CSS Background and Padding Issues

Some problems I need to fix

Page 1 of 1

6 Replies - 1115 Views - Last Post: 07 January 2008 - 01:37 PM

#1 Sacky  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 28-December 07

CSS Background and Padding Issues

Post icon  Posted 02 January 2008 - 09:13 PM

OK, well first I'll say that I am really bad at HTML/CSS web development, however I have to get done what needs to be done. So I am currently developing http://www.musicflock.com/ and I have a couple of problems:

1. How do I get a white background on the left bar to come down to wherever the text is, yet keep the current background image imposed over the white.
2. How do I get the center content's white background to automatically pad 10px to the top, left and right and not just the text
3. In the left bar, how can I make the forms equidistant to the text (tab's not working), without using spaces

Thanks for your time.

EDIT: Also you may notice that the site changes a bit from time to time, this is usually because I am trying new things constantly

This post has been edited by Sacky: 02 January 2008 - 09:22 PM


Is This A Good Question/Topic? 0
  • +

Replies To: CSS Background and Padding Issues

#2 Trake  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 115
  • Joined: 29-June 07

Re: CSS Background and Padding Issues

Posted 03 January 2008 - 05:19 AM

I haven't tested this but off the top of my head I would say for point 2 you should give the div a fixed width and then add padding as you wish. For point 3 I think you can use display: block and a width on the labels to get what you want.
Was This Post Helpful? 0
  • +
  • -

#3 LeprechauN  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 2
  • View blog
  • Posts: 857
  • Joined: 12-March 01

Re: CSS Background and Padding Issues

Posted 03 January 2008 - 10:07 AM

First question, take out background-repeat, and change background-image to:

background:#FFFFFF url(rightback.gif) repeat-x;

Second, I think I read it right - but you'll want to use margin, so margin: 10px;

Third, search google for "css tableless forms"
Was This Post Helpful? 0
  • +
  • -

#4 Akelo  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 98
  • Joined: 12-December 07

Re: CSS Background and Padding Issues

Posted 03 January 2008 - 07:47 PM

like the site! ;) but I'm with Leprechaun on the table layout *ugh*. To help you out, I posted some css i and xhtml i thought you might enjoy (use your website images to synch with it). This is a very rough draft, but you'll see the difference between it and the evil table layout.
Here is the xhtml file:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>musicFlock.com Coming Soon!</title>
		<link rel="stylesheet" type="text/css" href="default.css"/>
		<link rel="shortcut icon" href="favicon.ico" type="image/vnd.microsoft.icon"/>
		<link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon"/>
		</head>
	<body>
		<div id="wrapper">
			<div id="intro"></div>
			<div id="menu">
				<ul>
					<li><a href="index.html"><span>Home</span></a></li>
					<li><a href="index.html"><span>Search</span></a></li>
					<li><a href="index.html"><span>News</span></a></li>
					<li><a href="index.html"><span>Charts</span></a></li>
					<li><a href="index.html"><span>Forum</span></a></li>
					<li><a href="index.html"><span>Register</span></a></li>
					<li><a href="index.html"><span>Contact Us</span></a></li>
				</ul>
			</div>
			<div id="search">
				<p id="head">Search</p>
				<ul>
					<li>Song</li>
					<li>Artist</li>
					<li>Album</li>
				</ul>
				<form action="./search.php" method="get">
					<input type="text" name="song"/>
					<input type="text" name="artist"/>
					<input type="text" name="album"/>
				</form>
			</div>		
			<div id="register">
						<form action="register.php" method="post">
							<ul>
								<li>Username <li><input type="text" id="username" name="username" size="16"/></li></li><br/>
								<li>Password <li><input type="password" id="password" name="password" size="32"/></li></li><br/>
								<li>Password Confirm <li><input type="password" id="password_confirmed" name="password_confirmed" size="32"/></li></li><br/>
								<li>Email <li><input type="text" id="email" name="email" size="64"/></li></li><br/>
								<li>First Name <li><input type="text" id="name" name="name" size="64"/></li></li><br/>
								<li>Last Name <li><input type="text" id="lastname" name="lastname" size="64"/></li></li><br/>
								<li><input type="submit" name="register" value="register"/></li>
							</ul>
						</form>
			</div>
			<div id="content">
				<p>Hello Testing 2</p>
				
			</div>
				
	</body>
</html>


Now the CSS:
body
{
	background: rgb(5,63,145) url(musicflock.png) top left no-repeat;
	margin:0;
	padding:0;
	font:bold 11px/1.5em Verdana;
}
#wrapper
{
	background: url(logo1.png) top right no-repeat;
	width:%100;
	height:%100;
}
#intro
{
	
	width:%100;
	height:65px; 
}
#menu
{
	background: url(menuback.gif) top left repeat-x;
	position: relative;
	width:%100;
	height:32px;
	border-bottom: 1px solid #666;
	display: block;
}
#menu ul
{
	margin-left: 300px;
	list-style: none;
	height:32px;
	padding:5px 10px 0 30px;
	display: block;
	
}
#menu ul li
{
	
	display: inline;
	margin: 0;
	padding: 0;
}
#menu ul li a
{
	background: url(menuleft.gif) top left no-repeat;
	float: left;
	text-decoration: none;
	padding:0 0 0 4px;
	display: block;
	
}
#menu a span
{
	background: url(menuright.gif) top right no-repeat;
	display:block;
	float:left;
	
	padding:5px 15px 4px 6px;
	color:#FFF;
}
#menu a:hover
{
	background-position:0% -42px;
}
#menu a:hover span
{
	background-position:100% -42px;
}
#search 
{
	background: rgb(255,255,255) url(centerback.gif) top left repeat-x;
	margin: 0;
	
	padding: 0;
	padding-top: 32px;
	position: relative;
	float: left;
	height: 300px;
	width: 200px;
	
}
#search p#head
{
	text-align: center;
}
#search ul
{
	margin: 0;
	padding: 0;
	margin-left: 5px;
	float: left;
	display:block;
}
#search ul li
{
	margin:0;
	height: 25px;
	padding: 0;
	text-decoration: none;
	display: block;
}
#search form  input
{
	float: left;
	height: 25px;
	margin-left: 4px;
}
#register
{
	background: rgb(255,255,255) url(centerback.gif) top left repeat-x;
	position: relative;
	float: left;
	border-left: 1px solid #666;
	margin-left: 10px;
	
	
}
#register form ul
{
	
	margin: 0;
	padding: 0;
	margin-left: 10px;
	
	
}
#register form ul li
{
	display: inline;
}
#register form ul li li
{
	left: 25px;
}


Would also like to mention, to validate, you will need elements inclosing ALL text (that is pointed at the text that marks the input fields). Hope this helps, I know I had fun practicing :). Also, need any more help, let me know, working on my css as well.
Was This Post Helpful? 0
  • +
  • -

#5 Sacky  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 26
  • Joined: 28-December 07

Re: CSS Background and Padding Issues

Posted 05 January 2008 - 05:13 PM

Thanks for the replies, the basic layout is now all done :), however I do have 2 questions:

1. Why does everyone in web-design have something against tables?
2. In this forum: http://forums.whirlp...et.au/forum.cfm they have little lines going across the categories, how can I stretch a line image like that?
Was This Post Helpful? 0
  • +
  • -

#6 LeprechauN  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 2
  • View blog
  • Posts: 857
  • Joined: 12-March 01

Re: CSS Background and Padding Issues

Posted 05 January 2008 - 05:30 PM

http://www.hotdesign.com/seybold/
Was This Post Helpful? 0
  • +
  • -

#7 Akelo  Icon User is offline

  • D.I.C Head

Reputation: 4
  • View blog
  • Posts: 98
  • Joined: 12-December 07

Re: CSS Background and Padding Issues

Posted 07 January 2008 - 01:37 PM

The biggest reason in my own opinion for doing it this way is the saved time for yourself. Change the rules in one place rather than in three. Also, updating the page becomes many times easier if it's in an easy to see format, rather than having to count the td and tr elements. Less room for error. Besides...css sounds so much cooler than tables. It's mysterious. "Yeah, I was up all night working on a hot css template for my website" rather than "Yeah, I was working on boring tables for my now lame website, why oh why didn't I learn css?". See...last statement says it all ;).
Besides...what if you wanted to reuse a rule you defined earlier...doing that with tables seems like a lot more work than changing the css rules. That's just my take on it.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1