Page layout with CSS.... help please

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

Ok. did you want to re-write it with Cory or do you want me to clean up what you have and post it when i am done? No need for Cory and i both to be doing it Very Happy

Corey Bryant · Posted: Sun Oct 16, 2005 12:52 pm

Float the buttons also

pptdgc · Joined: 13 Oct 2005 Posts: 23

Superpetauction · Joined: 07 Oct 2005 Posts: 47 Location: Logansport, Indiana

Cool, good choice as it is always better to have help writing it than have it written for you. Very Happy

Corey Bryant · Posted: Sun Oct 16, 2005 1:06 pm

Well after you go thru the code from the last time - let me know what you came up with. Letting the divs lay as they will - this will allow you a lot of leeway.

I do have to go out for a little bit actually but go thru your code - especially the HTML / CSS and make sure that everything is lower case - you did have BODY but I changed it to body. With XHTML, it has to be lower case as well.

pptdgc · Joined: 13 Oct 2005 Posts: 23

A few questions...

1. I wanted the div.1 area on the left to have a background color so I set this. I then noticed that the width of the div.1 area seemed more than div.flash when they are both supposed to be the same width? I tried making the padding 0 and this makes the two areas the same width with a nice gap in between. However the txt is right to the edges of the div.1 area. When I increase the padding it seems to make the width of the div.1 area bigger in order to do this. I thought it was supposed to add extra apace inside the element?

2. I cant seem to float the buttons correctly. I would like all 3 horizontally one after each other with a background color for the area of the rectangle and gap in between each. Currently I have the following which doesn't seem to work and makes the flash move to the left after div.1.

div.flash {
width:350px;
height:1800px;
background-color:#cadbff;
float:left;
}

div.menu_home{
width:50px
height:25px;
background-color:#cadbff;
float:left;
}

div.menu_help{
width:50px
height:25px;
background-color:#cadbff;
float:left;
}

<div class="menu_home"><a href="index.html">Home</a></div>
<div class="menu_help"><a href="help.html">help</a></div>
<div class="menu_questions"><a href="questions and answers.html">Q&A</a></div>

3. The image I have for the title isn't centered. I have tried to float it in the center but it still stays alligned to the left.

div.title {
width:700px;
height:160px;
float: center;
}

<div id="main">
<div class="title">
<img src="images/title.jpg" alt="Title" width="700px" height="160px" />
</div>

All other bits seem to look good though... Thanks

Corey Bryant · Posted: Mon Oct 17, 2005 4:00 am

I wrote somewhere that center was not valid for float - it is only left, right, or none. Center is not valid - I am not certain how that got in there.

Your menu buttons - are the the same? If so why have a CSS for each? Add clear: both to them and see what happens to them there.

Instead of padding - try margin to see if that will help. Keep in mind that your main div - if you add up the padding & the width, it should not be larger than 730 px.

pptdgc · Joined: 13 Oct 2005 Posts: 23

I've kind of solved the layout problem. I noticed than when you float something to the right it goes directly to the right of the thing on the left, not completely to the right of your page. I've sorted my alignment out but can't really have a border around my div.1 and div.flash as they are touching.

Can't sort my buttons out though. I can't seem to get them to look like they did with absolute positioning with a rectangle of area of colour with the text in the middle. At the moment I have...

div.menu{
width:50px
height:30px;
background-color:#cadbff;
clear: both;
}

<div class="menu"><a href="index.html">Home</a></div>
<div class="menu"><a href="help.html">Help</a></div>
<div class="menu"><a href="questions and answers.html">Q&A</a></div>

What is the best way to position them? ideally I would like one after each other horizontally with a small gap in between.

Thanks

Corey Bryant · Posted: Mon Oct 17, 2005 11:04 am

try something like:

pptdgc · Joined: 13 Oct 2005 Posts: 23

Yes I did want the text centered. Is it possible to center the text vertically as well, so its sits right in the middle of the rectangular area?

The buttons look good but they are still on top of each other on the left and not next to each other.

Thanks

Corey Bryant · Posted: Mon Oct 17, 2005 11:29 am

I thought at one point you said you wanted them on top of one another, sorry about that. Try this

pptdgc · Joined: 13 Oct 2005 Posts: 23

Thanks the alignment of the buttons is good. The vertical-align: middle; doesn't seem to work though. It always seems to align to the top no matter how much I increase the height.

Also is it ok for me to use a font tag within the div.menu tag so I can change my font... like this..

div class="menu"><a href="index.html"><h1>Home</h1></a></div>

And what about things like <b> for bold and <center> for center. Is it ok to use these or have they been phased out with xhtml?

Thanks

Corey Bryant · Posted: Mon Oct 17, 2005 11:58 am

The h1 tags are still good but you can control your text within the menu class. Those are not really h1 tags.

Font tags have been deprecated since HTML 4. <b> can still be used some. There is some debate over that. This page will help show you what tags are deprecated

pptdgc · Joined: 13 Oct 2005 Posts: 23

Thanks.. Still having some trouble with the buttons. Anyone have any idea why the text may not be in the middle of the area vertically? I have used vertical-align: middle; but it doesn't seem to work...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
div.menu{
width:50px;
height:100px;
background-color:#cadbff;
border: medium double rgb(255,255,255);
text-align: center;
font-family: "Comic Sans MS" "Arial";
font-size: 12pt;
float: left;
vertical-align: middle;
}
</style>
</head>

<body>
<div>
<div class="menu"><a href="index.html">Home</a></div>
<div class="menu"><a href="help.html">Help</a></div>
<div class="menu"><a href="questions and answers.html">Q&A</a></div>
</div>
</body>

</html>