Programming Forums > Web Development and Design > HTML / XHTML / CSS

Wizard1988 · Jan 16th, 2007, 11:35 PM

Im having a problem with css. I don't really know how to describe the problem so I will show you guys all the code and a screenshoot.

I am trying to keep the boxes inside of the bottom container.

html:

(Toggle Plain Text)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Home</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="top">
    <div id="banner">
        <div id="links">
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        <a href="#">link</a>
        </div>
    </div>
</div>
<div id="bottom">
    <div class="article">Text Text</div>
    <div class="article">Text Text</div>
    <div class="article">Text Text</div>
    <div class="article">Text Text</div>
</div>
<div id="footer"></div>
</body>
</html>

css:

(Toggle Plain Text)

/* CSS Document */

html{
    height:100%;
}

body{
    background-color:#000000;
    height:100%;
}

#top{
    margin:0 auto;
}

#banner{
    background-image:url(images/header.png);
    background-position:center;
    background-repeat:no-repeat;
    margin-top:1em;
    width:600px;
    height:172px;
    margin:0 auto;
}

#links{
    padding-top:15px;
    height:35px;
    text-align:right;
    margin-right:1em;
}

#links a{
    color:#66CCFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:12px;
    text-decoration:none;
}

#links a:hover{
    color:#FFFFFF;
}

#bottom{
    margin:0 auto;
    background-image:url(images/body.png);
    background-position:center;
    background-repeat:repeat-y;
    height:100%;
    width:600px;
}

.article
{
    position:relative;
    float:left;
    background-image:url(images/article.png);
    background-repeat:no-repeat;
    min-height:240px;
    min-width:500px;
    border:1px solid;
    margin-left:2em;
    margin-top:2em;
    padding:1em;
    clear:none;
}

#footer{
    background-image:url(images/footer.png);
    background-position:center;
    background-repeat:no-repeat;
    bottom:2em;
    height:77px;
}

Any help will be greatly apreciated.

PhilBon · Jan 17th, 2007, 12:01 AM

Can you make an image of what you want it to look like? It will help us better understand the result needed

DaWei · Jan 17th, 2007, 12:08 AM

You have a 'bottom' container, but you don't mark that on your screenshot. You can call something 'bottom', but put it at the top. This means we have to replicate your code and mark it for ourselves. Sometimes we do that. Sometimes not. Better to label your output appropriately.

Booooze · Jan 17th, 2007, 12:11 AM

Yeah, I don't quite understand either. If you want to keep the boxes inside the bottom container, why would you give the article class a min-height of 240px?

And by the way, I haven't done CSS for a while, but last time I checked, if you are floating a div, you don't need a position. float:left is your position.. why do you have relative in there? Mind you, you might want to try giving the rest of your divs positions. I'm curious to know how this is rendering in different browsers

I remember when that was a pain in the ass.

Wizard1988 · Jan 17th, 2007, 12:20 AM

Yeah. its some dirty code. I am just starting to mess around with css. However I managed to fix it. Here is what it looks like now. The problem happened to be me setting the height of body to 100%.

@Booooze The article class has a gradient image which is 200x200 and the background is set to the color which the gradient fades into. I just wanted to see the whole background image.

Booooze · Jan 17th, 2007, 12:31 AM

Owell, doesn't look too bad now. Enjoy

CSS is lots of fun when you get used to it, mind you, it has it's painful moments.

DaWei · Jan 17th, 2007, 1:15 AM

Setting relative or absolute conditions affects more than just the container, itself. It establishes relationships with the parent container according to the position attributes set for them. It might all be very clear to the CSS gurus, but it gives me a distinct pain in the posterior.

When it comes to setting heights to 100% (or any other percentage), one has to ask oneself, "100% of what?". YOUR 768 pixel screen? Your clients 480 pixel screen? Your other client's 1024 pixel screen? Is the browser going to check the resolution AND the window size and adjust? The answer is almost invariably, "No". What happens if they resize? YOU can grab that. The browser won't grab it and readjust "100%". Setting 100% generally means that the container will enclose completely all its contents, rather than letting them protrude beyond the boundaries. Don't take it to the bank unless you have some money to spare.

Jan 16th, 2007, 11:35 PM	#1
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 422 Rep Power: 4	css problems Im having a problem with css. I don't really know how to describe the problem so I will show you guys all the code and a screenshoot. I am trying to keep the boxes inside of the bottom container. html: (Toggle Plain Text) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Home</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="top"> <div id="banner"> <div id="links"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> </div> </div> </div> <div id="bottom"> <div class="article">Text Text</div> <div class="article">Text Text</div> <div class="article">Text Text</div> <div class="article">Text Text</div> </div> <div id="footer"></div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Home</title> <link href="styles.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="top"> <div id="banner"> <div id="links"> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> <a href="#">link</a> </div> </div> </div> <div id="bottom"> <div class="article">Text Text</div> <div class="article">Text Text</div> <div class="article">Text Text</div> <div class="article">Text Text</div> </div> <div id="footer"></div> </body> </html> css: (Toggle Plain Text) /* CSS Document / html{ height:100%; } body{ background-color:#000000; height:100%; } #top{ margin:0 auto; } #banner{ background-image:url(images/header.png); background-position:center; background-repeat:no-repeat; margin-top:1em; width:600px; height:172px; margin:0 auto; } #links{ padding-top:15px; height:35px; text-align:right; margin-right:1em; } #links a{ color:#66CCFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; } #links a:hover{ color:#FFFFFF; } #bottom{ margin:0 auto; background-image:url(images/body.png); background-position:center; background-repeat:repeat-y; height:100%; width:600px; } .article { position:relative; float:left; background-image:url(images/article.png); background-repeat:no-repeat; min-height:240px; min-width:500px; border:1px solid; margin-left:2em; margin-top:2em; padding:1em; clear:none; } #footer{ background-image:url(images/footer.png); background-position:center; background-repeat:no-repeat; bottom:2em; height:77px; } / CSS Document / html{ height:100%; } body{ background-color:#000000; height:100%; } #top{ margin:0 auto; } #banner{ background-image:url(images/header.png); background-position:center; background-repeat:no-repeat; margin-top:1em; width:600px; height:172px; margin:0 auto; } #links{ padding-top:15px; height:35px; text-align:right; margin-right:1em; } #links a{ color:#66CCFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; text-decoration:none; } #links a:hover{ color:#FFFFFF; } #bottom{ margin:0 auto; background-image:url(images/body.png); background-position:center; background-repeat:repeat-y; height:100%; width:600px; } .article { position:relative; float:left; background-image:url(images/article.png); background-repeat:no-repeat; min-height:240px; min-width:500px; border:1px solid; margin-left:2em; margin-top:2em; padding:1em; clear:none; } #footer{ background-image:url(images/footer.png); background-position:center; background-repeat:no-repeat; bottom:2em; height:77px; } Any help will be greatly apreciated. __________________ Last edited by Wizard1988; Jan 17th, 2007 at 12:29 AM.*

Jan 17th, 2007, 12:08 AM	#3
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	You have a 'bottom' container, but you don't mark that on your screenshot. You can call something 'bottom', but put it at the top. This means we have to replicate your code and mark it for ourselves. Sometimes we do that. Sometimes not. Better to label your output appropriately. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Jan 17th, 2007, 12:20 AM	#5
Wizard1988 Professional Programmer Join Date: Oct 2005 Location: Chitown Posts: 422 Rep Power: 4	Yeah. its some dirty code. I am just starting to mess around with css. However I managed to fix it. Here is what it looks like now. The problem happened to be me setting the height of body to 100%. @Booooze The article class has a gradient image which is 200x200 and the background is set to the color which the gradient fades into. I just wanted to see the whole background image. __________________

Jan 17th, 2007, 1:15 AM	#7
DaWei Resident Grouch Join Date: Jun 2005 Posts: 6,453 Rep Power: 10	Setting relative or absolute conditions affects more than just the container, itself. It establishes relationships with the parent container according to the position attributes set for them. It might all be very clear to the CSS gurus, but it gives me a distinct pain in the posterior. When it comes to setting heights to 100% (or any other percentage), one has to ask oneself, "100% of what?". YOUR 768 pixel screen? Your clients 480 pixel screen? Your other client's 1024 pixel screen? Is the browser going to check the resolution AND the window size and adjust? The answer is almost invariably, "No". What happens if they resize? YOU can grab that. The browser won't grab it and readjust "100%". Setting 100% generally means that the container will enclose completely all its contents, rather than letting them protrude beyond the boundaries. Don't take it to the bank unless you have some money to spare. __________________ Abstraction doesn't make it impossible to write bad code; it makes it possible to write superior code. Contributor's Corner: Grumpy on C++ Exceptions DaWei on Pointers

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Jan 17th, 2007, 12:01 AM	#2
PhilBon Hobbyist Programmer Join Date: Nov 2005 Posts: 172 Rep Power: 4	Can you make an image of what you want it to look like? It will help us better understand the result needed

Jan 17th, 2007, 12:11 AM	#4
Booooze Expert Programmer Join Date: Mar 2006 Location: Igloo Posts: 710 Rep Power: 3	Yeah, I don't quite understand either. If you want to keep the boxes inside the bottom container, why would you give the article class a min-height of 240px? And by the way, I haven't done CSS for a while, but last time I checked, if you are floating a div, you don't need a position. float:left is your position.. why do you have relative in there? Mind you, you might want to try giving the rest of your divs positions. I'm curious to know how this is rendering in different browsers I remember when that was a pain in the ass.

Jan 17th, 2007, 12:31 AM	#6
Booooze Expert Programmer Join Date: Mar 2006 Location: Igloo Posts: 710 Rep Power: 3	Owell, doesn't look too bad now. Enjoy CSS is lots of fun when you get used to it, mind you, it has it's painful moments.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
problems loading 2 dlls in Delphi7	nico765	Delphi	0	Jan 7th, 2006 4:03 PM
2 problems on permutations	alejandrito	Assembly	0	Dec 15th, 2005 4:07 AM
Problems with directx and game crashing	Craig05	Coder's Corner Lounge	0	Oct 30th, 2005 5:54 AM
New Switch, FTP Problems	ViOLATiON	Coder's Corner Lounge	6	Sep 13th, 2005 2:44 PM
Problems accessing site...	Broax	Community Announcements and Feedback	26	Jan 26th, 2005 2:27 AM

Programming Forums > Web Development and Design > HTML / XHTML / CSS

css problems