Jump to content

Layout With <div> Tags


styphon
 Share

Recommended Posts

Hello everyone, I'm new to HTML and CSS and am struggling with creating a satisfactory layout. I have created a site using Photoshop but really am struggling with Aptana Studio to convert it to an HTML site. I would appreciate some help in getting me going. The site will look like this:Full-Site.png.The top bar stretches across the full page with a 1000px (can easily be converted down to 900px to fit width of the rest of the site) in the middle.The white box is 900px wide. The link bar, grey text box and footer bar are 850px wide. The white box and grey text box need to expand to accommodate all the text, which will vary from time to time and will be in the form of a brief introduction and then news updates. The about page will be the same, except a more permanent and detailed description of the clan.Any help people can offer will be much appreciated.

Link to comment
Share on other sites

body background is the black and white stripe.Top div is white (or whitish), the height of your TEMPLARS image. The exact background color is what you have at the edges of that image. The image is the div's background. no-repeat, position is center center.You have a wrapper div below that. It is 900px wide and centered. It has left and right padding of 25px each.The button bar can be done a lot of ways. A list, for example, or four divs floating left. It has top and bottom margins of 10px or so. If it fits in a block-level element like a diz or <ul> it needs no width defined.The grey box is a div. Give it no dimensions at all and it will expand from one side to other, excluding the pads.The footer is a div below that. Same sizing deal as above, but I it needs some vertical dimensions.One trick is the rounded corners. Several ways to handle that. I suggest roughing in the divs as rectangles and leaving the corners and exact details of the button bar till you have the basic shape.

Link to comment
Share on other sites

Hi, thanks for your help. I've made an attempt although it's not come out looking right. With all the round corners I'm intending on using images for backgrounds for them. I've hosted it at my site here - http://templars.co.cc/templars/My HTML is:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title>Templars.co.cc :: Home</title>	<link rel="stylesheet" type="text/css" href="style.css" /></head><body background="images/background.png" align="center">		<div class="header" width="100%">		<img src="./images/logo.png" align="center" />		</div>		<div class="container" width="900px">				<div class="buttonBar">						<div>				<a href="./index.html"><b>HOME</b></a>			</div>			<div>				<a href="#"><b>FORUMS</b></a>			</div>			<div>				<a href="#"><b>VWAR</b></a>			</div>			<div>				<a href="#"><b>ABOUT</b></a>			</div>					</div>				<div class="textBox">						<ch1><b>WELCOME TO THE HOME OF THE TEMPLARS ESPORTS CLAN</b></ch1> <br />					</div>				<div class="footer">						<p>All material is Copywrite (C) 2010 their respective owners. Everything else is Copywrite (C) 2010 Templars Clan.</p>					</div>			</div></body></html>

and my css is:

a:link{color:#F5F5F5; text-decoration:none;}a:visited{color:#F5F5F5; text-decoration:none;}a:hover{color:#D0D0D0; text-decoration:none;}a:active{color:#D0D0D0; text-decoration:none;}.container{	background-color:#FFFFFF;	font:Arial;	color:#000000;	vertical-align:top;	text-align:center;	padding-left:25px;	padding-right:25px;}.header{	background-image:url(images/top-bg.png) repeat-x;}.buttonBar{	background-color:#000000;	margin:25px, 0px, 25px, 0px;	float:left;	font-size: 25px;}.textBox{	clear:both;	background-color:#F5F3F5;}.ch1{	font-size:20px;}.footer{	background-color:#000000;	color:#F5F5F5;}

I don't know what I've done wrong. I've never been able to get the float command to work properly and I don't know why the header doesn't stretch all the way across.

Link to comment
Share on other sites

Get those width and align properties out of your tags. They belong in CSS. And don't define the width of a div to be 100%. It will fill the window naturally with no width definition at all. Defining it at 100% will not let it resize, and it will mess up margins and padding and everything else.Items don't float because they contained by an element with a float property. Get the float out of the button bar. The buttons themselves need to float.The correct way to center an element in CSS is margin: 0 auto; -- auto does the left-right centering, 0 defines the vertical margins. You can give those dimensions if you like.

Link to comment
Share on other sites

Get those width and align properties out of your tags. They belong in CSS. And don't define the width of a div to be 100%. It will fill the window naturally with no width definition at all. Defining it at 100% will not let it resize, and it will mess up margins and padding and everything else.Items don't float because they contained by an element with a float property. Get the float out of the button bar. The buttons themselves need to float.The correct way to center an element in CSS is margin: 0 auto; -- auto does the left-right centering, 0 defines the vertical margins. You can give those dimensions if you like.
OK, I've taken them out of the tags. I thought because I told the buttonBar to float the items in it would inherit that. Thanks for pointing that out. I've changed it to:HTML
<div class="header">		<img src="./images/logo.png" />		</div>		<div class="container">				<div id="buttonBar">						<div class="button">				<a href="./index.html"><b>HOME</b></a>			</div>			<div class="button">				<a href="#"><b>FORUMS</b></a>			</div>			<div class="button">				<a href="#"><b>VWAR</b></a>			</div>			<div class="button">				<a href="#"><b>ABOUT</b></a>			</div>					</div>				<div class="textBox">						<ch1><b>WELCOME TO THE HOME OF THE TEMPLARS ESPORTS CLAN</b></ch1> <br />					</div>				<div class="footer">						<p>All material is Copywrite (C) 2010 their respective owners. Everything else is Copywrite (C) 2010 Templars Clan.</p>					</div>			</div>

CSS

a:link{color:#F5F5F5; text-decoration:none;}a:visited{color:#F5F5F5; text-decoration:none;}a:hover{color:#D0D0D0; text-decoration:none;}a:active{color:#D0D0D0; text-decoration:none;}.container{	width:900px;	background-color:#FFFFFF;	font:Arial;	color:#000000;	vertical-align:top;	text-align:center;	padding-left:25px;	padding-right:25px;}.header{	background-image:url(images/top-bg.png) repeat-x;}.button{	background-color:#000000;	float:left;	margin:0 auto;	font-size: 25px;}.textBox{	clear:both;	background-color:#F5F3F5;}.ch1{	font-size:20px;}.footer{	background-color:#000000;	color:#F5F5F5;}

It's got the buttons in line, but nothing is centralised, nor is the top bar stretching all the way across yet. How do I get it all to centralise?

Edited by Styphon
Link to comment
Share on other sites

buttonbar and container need the centering definition, margin: 0 autoThe individual buttons do not.I do suggest giving the buttons some left-right padding, and probably a height definition.And if you set the buttons' line-height to the same value as their height, the text will be vertically centered in them.

Edited by Deirdre's Dad
Link to comment
Share on other sites

buttonbar and container need the centering definition, margin: 0 autoThe individual buttons do not.I do suggest giving the buttons some left-right padding, and probably a height definition.And if you set the buttons' line-height to the same value as their height, the text will be vertically centered in them.
It's getting there. The buttons are 30px high, or at least the pictures are so I've defined it to that hight for now. I've set margin:0 auto; for the header and container. It's worked on the container but the header hasn't changed and the buttons aren't centred. What could be wrong?HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title>Templars.co.cc :: Home</title>	<link rel="stylesheet" type="text/css" href="style.css" /></head><body background="images/background.png">			<div class="header">		<img src="./images/logo.png" />		</div>		<div class="container">				<div class="buttonBar">						<div class="button">				<a href="./index.html"><b>HOME</b></a>			</div>			<div class="button">				<a href="#"><b>FORUMS</b></a>			</div>			<div class="button">				<a href="#"><b>VWAR</b></a>			</div>			<div class="button">				<a href="#"><b>ABOUT</b></a>			</div>					</div>				<div class="textBox">						<ch1><b>WELCOME TO THE HOME OF THE TEMPLARS ESPORTS CLAN</b></ch1> <br />					</div>				<div class="footer">						<p>All material is Copywrite (C) 2010 their respective owners. Everything else is Copywrite (C) 2010 Templars Clan.</p>					</div>			</div>	</body></html>

CSS

a:link{color:#F5F5F5; text-decoration:none;}a:visited{color:#F5F5F5; text-decoration:none;}a:hover{color:#D0D0D0; text-decoration:none;}a:active{color:#D0D0D0; text-decoration:none;}.container{	width:900px;	background-color:#FFFFFF;	font:Arial;	color:#000000;	padding-left:25px;	padding-right:25px;	text-align:center;	margin:0 auto;}.header{	background-image:url(images/top-bg.png) repeat-x;	margin:0 auto;}.buttonBar{	margin:0 auto;}.button{	height:30px;	line-height:30px;	background-color:#000000;	float:left;	font-size:25px;	padding:10px 53px 10px 53px;}.textBox{	clear:both;	background-color:#F5F3F5;}.ch1{	font-size:20px;}.footer{	text-align:center;	background-color:#000000;	color:#F5F5F5;}

This will be my last post tonight. I'll check for replies in the morning.

Link to comment
Share on other sites

The problem is, you have not defined a width for buttonbar. So it actually fills the entire width of its container. You don't see the right side of it, because its empty. But it really does fill the whole width. So it is in fact centered, and it will be until it has a defined width smaller than its container.Part of the challenge is that currently you do not know in advance how wide each button will be. So you cannot reasonably define a width for button bar.The simplest solution is to give your button elements a defined width. With that information, you can add the padding width to get a real width for each button. Add together four buttons, and now you have a width for the buttonbar element. Define the button bar with that width. It should center. (If the right-most button drops down a line, then you've goofed the math somehow.)When defining a button width, give yourself enough room for the text plus a cushion. You could actually remove the left-right padding and instead use text-align:center to position the text.

Edited by Deirdre's Dad
Link to comment
Share on other sites

The problem is, you have not defined a width for buttonbar. So it actually fills the entire width of its container. You don't see the right side of it, because its empty. But it really does fill the whole width. So it is in fact centered, and it will be until it has a defined width smaller than its container.Part of the challenge is that currently you do not know in advance how wide each button will be. So you cannot reasonably define a width for button bar.The simplest solution is to give your button elements a defined width. With that information, you can add the padding width to get a real width for each button. Add together four buttons, and now you have a width for the buttonbar element. Define the button bar with that width. It should center. (If the right-most button drops down a line, then you've goofed the math somehow.)When defining a button width, give yourself enough room for the text plus a cushion. You could actually remove the left-right padding and instead use text-align:center to position the text.
The button bar is 848px long and 30px high, each button being 212px. I've set the dimensions and but it still wasn't looking right. The problem was the white area was set with a width of 900px and left and right padding of 25px each. When it displayed it was 950px wide, and that was throwing everything off for me. I've changed it to 850xp wide with 25px of padding either side and that has worked nicely.All that's out now is the header. Any idea why a. it's not centred and b. it's not replicating the background image across the entire screen?
Link to comment
Share on other sites

You're putting too much stuff in the background-image definition. All it can take is a URL. If you want to combine definitions, the background property accepts multiple values. Or just define background-image and background-repeat separately.The logo image needs centering, not the header div. That could look like this:

.header img {   display: block;   margin:0 auto;}

Link to comment
Share on other sites

You're putting too much stuff in the background-image definition. All it can take is a URL. If you want to combine definitions, the background property accepts multiple values. Or just define background-image and background-repeat separately.The logo image needs centering, not the header div. That could look like this:
.header img {   display: block;   margin:0 auto;}

Excellent, that's done it. Thank you very much for your help. I'm sure I'll have more questions later as I start adding all the background images in for the buttons and such.One last thing. Could you explain what display: block; does please?
Link to comment
Share on other sites

From a layout perspective, there are 3 general categories of page elements. Their default values determine exactly how they will fit into the page's physical structure. These values can be overridden, of course, which means that one kind can be turned into another.First are the specialized elements, like list items, select options, and table cells, which have their own special ways of being aligned on the page.Block level elements, like a div or paragraph, claim the whole page width (unless you say otherwise), begin on a new "line", and force "adjacent" items onto the next line also. The float and clear properties can modify this behavior without changing the display type.Inline elements function like text characters. One just follows another horizontally till they reach the edge of the containing element, where they wrap. Examples are spans, images, and form controls.To center an image using the margin technique, we need to make it a block-level element. So that's what I did. It would also have worked to set its container to text-align:center. I personally hate doing that with non-text items, but that's me. Some designers do not mind; they believe that "text" in this case can be understood to include any inline item.

Edited by Deirdre's Dad
Link to comment
Share on other sites

From a layout perspective, there are 3 general categories of page elements. Their default values determine exactly how they will fit into the page's physical structure. These values can be overridden, of course, which means that one kind can be turned into another.First are the specialized elements, like list items, select options, and table cells, which have their own special ways of being aligned on the page.Block level elements, like a div or paragraph, claim the whole page width (unless you say otherwise), begin on a new "line", and force "adjacent" items onto the next line also. The float and clear properties can modify this behavior without changing the display type.Inline elements function like text characters. One just follows another horizontally till they reach the edge of the containing element, where they wrap. Examples are spans, images, and form controls.To center an image using the margin technique, we need to make it a block-level element. So that's what I did. It would also have worked to set its container to text-align:center, but I hate doing that with non-text items. Some designers do not mind; they believe that "text" can be understood as including all inline items.
Ah, OK. Thank you for the explanation. You're been a huge help understanding the basics of laying out my page. With any luck I should be able to add the extra div's needed for all my images now.
Link to comment
Share on other sites

Ah, OK. Thank you for the explanation. You're been a huge help understanding the basics of laying out my page. With any luck I should be able to add the extra div's needed for all my images now.
Yep, I screwed it up and I'm not sure how. I have a few problems.First off the button bar background image isn't showing, with the exception of when I added in 10px of padding, it showed that 10px at the top.Second, the bottom white bar isn't showing. I'm guessing it's there but because of the float it's under the rest.Third, the White area is aligned to the left instead of centre.Fourth, the white sides aren't showing.I think I'm not understanding how float effects everything else. I thought if I put it in a wrapper (.container) then that would hold it's structure? I've uploaded it to my site - http://templars.co.cc/templars/index.htmlMy code is:HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />	<title>Templars.co.cc :: Home</title>	<link rel="stylesheet" type="text/css" href="style.css" /></head><body background="images/background.png">			<div class="header">				<img src="./images/logo.png" alt="Logo" />			</div>		<div class="whiteTop">			</div>		<div class="container">				<div class="whiteLeft">					</div>				<div class="whiteMain">					<div class="buttonBar">							<div class="button">					<a href="./index.html"><b>HOME</b></a>				</div>				<div class="button">					<a href="#"><b>FORUMS</b></a>				</div>				<div class="button">					<a href="#"><b>VWAR</b></a>				</div>				<div class="button">					<a href="#"><b>ABOUT</b></a>				</div>						</div>					<div class="textBox">							<ch1><b>WELCOME TO THE HOME OF THE TEMPLARS ESPORTS CLAN</b></ch1> <br />						</div>					<div class="footer">							<ch2>All material is Copywrite (C) 2010 their respective owners. Everything else is Copywrite (C) 2010 Templars Clan.</ch2>						</div>				</div>				<div class="whiteRight">								</div>			</div>		<div class="whiteBottom">					</div>	</body></html>

CSS:

a:link{color:#F5F5F5; text-decoration:none;}a:visited{color:#F5F5F5; text-decoration:none;}a:hover{color:#D0D0D0; text-decoration:none;}a:active{color:#D0D0D0; text-decoration:none;}.container{	width:9000px;	font:Arial;	color:#000000;	text-align:center;	margin:0 auto;	display:block;}.whiteTop{	width:900px;	height:10px;	background-image:url(images/white-top.png);	margin:0 auto;}.whiteLeft{	width:25px;	background-image:url(images/white-left.png);	float:left;	margin:0 auto;}.whiteMain{	width:850px;	float:left;	background-color:#FFFFFF;	margin:0 auto;}.whiteRight{	width:25px;	background-image:url(images/white-right.png);	float:left;	margin:0 auto;}.whiteBottom{	clear:both;	width:900px	height:10px;	background-image:url(images/white-bottom.png);	margin:0 auto;}.header{	height:114px;	background-image:url(images/top-bg.png);}.header img{	margin:0 auto;	display:block;}.buttonBar{	width:850px;	heigh:30px;	background-image:url(images/button-bar.png);	margin:0 auto;	padding-bottom:10px;}.button{	width:212px;	height:30px;	line-height:30px;	float:left;	font-size:25px;}.textBox{	clear:both;	width:850px;	background-color:#F5F3F5;}.footer{	width:850px;	height:30px;	background-image:url(images/footer.png);}ch1{	font-size:20px;}ch2{	font-size:12px;	color:#F5F5F5;	font-family:Arial, Helvetica, sans-serif;}

Link to comment
Share on other sites

.whiteLeft{	width:25px;	background-image:url(images/white-left.png);	float:left;	margin:0 auto;}.whiteMain{	width:850px;	float:left;	background-color:#FFFFFF;	margin:0 auto;}.whiteRight{	width:25px;	background-image:url(images/white-right.png);	float:left;	margin:0 auto;}

You didn't add any height. That's why they are all up at the top.

Link to comment
Share on other sites

As I explained to OP in another discussion, if you want to automatically center a single line of text in the vertical dimension, the easiest way is to set the element's height property to the same value as its line-height property. For example:

.myElement {   height: 40px;   line-height:40px;}

It doesn't even matter what size your font is. Your text will be vertically centered.(Remember that line-height refers to the distance between the baseline and the top of the tallest ascender in the font, like the left side of an h. It does not include descenders, like the bottom of a lowercase g. This is important to remember if lowercase text looks a little off-center.)This technique is only useful when you have a single line of text, like labels for form controls or menu items.It is a huge waste of time to center text with padding tricks, because fonts on different computers and browsers will be rendered differently.

Edited by Deirdre's Dad
Link to comment
Share on other sites

I need it to expand with the text. It's going to be a lot more than one line of text. It's going to contain news updates, so lots of text and images. It may be better to explain what I need from the site and then you guys tell me how best to achieve that.I need the header at the top to expand across the entire page, with a 1000px logo in the centre. This is working perfectly.Under that I need a white area split into 5 sections. The top and bottom are pictures 900px x 10px. Then I need the centre part split into the remaining 3. The left and right need to be 25px wide containing a 25px x 1px image that expands to whatever size is needed by the text box. The centre is 850px wide and is a solid white background that expands with the sides.Inside the centre I need 3 more sections, the button bar, the text box and the footer bar.The button bar is an 850px x 30px image, with 4 "buttons" (just hyperlinked text) spread evenly across the button bar.The text box has an 850px x 5px top and bottom images and then an 850px grey box with text in that needs to expand to accommodate the amount of text and images. The white box and it's two sides need to expand so the text box always remains inside it.The footer bar is simply a 850px x 30px image with some text in the centre (the text in the bottom right is part of the image).I need the whole lot to be centred.The part that seems to be screwing things up is when I float the three white sections that need to sit next to each other and expand to be whatever height I need them to be.

Link to comment
Share on other sites

That's what I'm saying. You still need to get the top worked out.The first problem I notice is .whiteLeft . This div is floated next to .whiteMain . But they are both using the margin definition for centering. They cannot both be centered if they are to be next to each other. I'm not sure what you're trying to accomplish, and my browser doesn't seem to know either.If you explain your intent, maybe we can get that button-bar centered.

Link to comment
Share on other sites

That's what I'm saying. You still need to get the top worked out.The first problem I notice is .whiteLeft . This div is floated next to .whiteMain . But they are both using the margin definition for centering. They cannot both be centered if they are to be next to each other. I'm not sure what you're trying to accomplish, and my browser doesn't seem to know either.If you explain your intent, maybe we can get that button-bar centered.
What I'm trying to get is the image in my first post..whiteTop, .whiteRight, .whiteBottom and .whiteLeft are all images because a. the corners are rounded, and b. there is a gradient from black to white. I tried to explain exactly what I needed in the post above. Other than all I can say is I need .whiteMain to be centred with .whiteLeft to it's left and .whiteRight to it's right.
I need the header at the top to expand across the entire page, with a 1000px logo in the centre. This is working perfectly.Under that I need a white area split into 5 sections. The top and bottom are pictures 900px x 10px. Then I need the centre part split into the remaining 3. The left and right need to be 25px wide containing a 25px x 1px image that expands to whatever size is needed by the text box. The centre is 850px wide and is a solid white background that expands with the sides.Inside the centre I need 3 more sections, the button bar, the text box and the footer bar.The button bar is an 850px x 30px image, with 4 "buttons" (just hyperlinked text) spread evenly across the button bar.The text box has an 850px x 5px top and bottom images and then an 850px grey box with text in that needs to expand to accommodate the amount of text and images. The white box and it's two sides need to expand so the text box always remains inside it.The footer bar is simply a 850px x 30px image with some text in the centre (the text in the bottom right is part of the image).I need the whole lot to be centred.
I entered the margin definition for centering because I was trying to get the white box in the middle, not stuck on the left as it is at the moment. I'm very new at this and I thought if I centred all three they would take the combined size of all three and centre based on the middle of the three. I have no idea how to have the 3 sections float yet still retain the structure I had before when it was just .whiteMain Edited by Styphon
Link to comment
Share on other sites

I suggested at the very beginning that we should handle the rounded corners later. There are well-established techniques for that, but there is no use discussing them until the button bar is correctly centered.The answer to the general question of centering multiple adjacent divs is that they should be floated next to each other (no centering techniques), and they should be contained by an element that is centered.I understand you are frustrated and anxious to get on with your work. Please understand that it is frustrating for me also to give you a solution to a problem, and then have you come back asking for more help because you've added a bunch of new stuff we never talked about. It means that anyone trying to help you out has to learn the problem from scratch, all over again.

Link to comment
Share on other sites

I suggested at the very beginning that we should handle the rounded corners later. There are well-established techniques for that, but there is no use discussing them until the button bar is correctly centered.The answer to the general question of centering multiple adjacent divs is that they should be floated next to each other (no centering techniques), and they should be contained by an element that is centered.I understand you are frustrated and anxious to get on with your work. Please understand that it is frustrating for me also to give you a solution to a problem, and then have you come back asking for more help because you've added a bunch of new stuff we never talked about. It means that anyone trying to help you out has to learn the problem from scratch, all over again.
The button bar is correctly centred, but inside of the white container. It's getting the white container to be centred as well that is the issue. I've already put .whiteLeft, .whiteMain and .whiteRight inside a div called .container and that is supposed to be centring them, but it's not for some unknown reason.I appreciate your patience with this. I'm not trying to ignore what you've said but build upon it. I think if you can ignore the fact that I want round corners and more on the gradient you see it must be images (unless you can do round corners and gradient without images). But I'm at the stage where I need to construct the entire site. I had the basic structure nicely. Just by adding the .whiteLeft and .whiteRight and floating them left it's stopped .container from being centred.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...