Welcome to HBH! If you have tried to register and didn't get a verification email, please using the following link to resend the verification email.

CSS Design


Ingelo's Avatar
q|^.^|p - Say w00t!
0 0

Well, i am trying to put a design up in CSS, but i will not do what i want it to do. The site is: http://83.88.253.92/2noqex/test/ And the CSS source is:

body {
font-family:verdana,arial,sans-serif;
background-color:white;
color:black;
margin-left:25%;
margin-right:25%;
margin-top:0%;
padding:0px;
font-size:0.8em;
}
#top {
top:0px;
left:0px;
height:15px;
width:600px;
background:url(images/gamedump_01.jpg);
color:black;
border: solid 1px #666699;
position:relative;
margin-left:25px;
}
#banner {
top:0px;
left:0px;
height:79px;
width:553px;
background:url(images/gamedump_03.jpg);
color:black;
border: solid 1px #666699;
position:relative;
margin-left:25px;
}
#leftside {
top:0px;
left:0px;
height:385px;
width:25px;
background:url(images/gamedump_02.jpg);
color:black;
margin-left:0px;
margin-top:0px;
border: solid 1px #666699;
position:relative;
}

index.php source:

<?php ob_start( 'ob_gzhandler' ); ?>
<?php session_start(); ?>
<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="top"></div>
<div id="banner"></div>
<div id="leftside"></div>
</body>
</html>

The thing i want is that the leftside will stay left to top and banner instead of under it.

Thanks :)


ghost's Avatar
0 0

Try putting leftside into the top <div>.

Fc1x


ghost's Avatar
0 0

I generally have:


&lt;html&gt;
&lt;head&gt;
.....
&lt;/head&gt;
&lt;body&gt;
&lt;div id=&#39;wrapper&#39;&gt;

&lt;div id=&#39;top&#39;&gt;
...
&lt;/div&gt;

&lt;div id=&#39;content&#39;&gt;
...
&lt;/div&gt;

&lt;div id=&#39;bottom&#39;&gt;
...
&lt;/div&gt;

&lt;/div&gt; // to end &#39;wrapper&#39;

That way you specify the width of wrapper and the divs inside it with your content always stay inside the measurements you give


Ingelo's Avatar
q|^.^|p - Say w00t!
0 0

Well, know it works (With borders). http://83.88.253.92/2noqex/test But when i remove the borders it looks like: http://83.88.253.92/2noqex/test2/ the new source: index.php:

&lt;?php ob_start( &#39;ob_gzhandler&#39; ); ?&gt;
&lt;?php session_start(); ?&gt;
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;link href=&quot;style.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id=&quot;top&quot;&gt;
&lt;div id=&quot;leftside&quot;&gt;
&lt;div id=&quot;banner&quot;&gt;
&lt;div id=&quot;rightside&quot;&gt;
&lt;div id=&quot;news&quot;&gt;
&lt;div id=&quot;downloads&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;

style.css:

body {
font-family:verdana,arial,sans-serif;
background-color:white;
color:black;
margin-left:20%;
margin-right:25%;
margin-top:0%;
padding:0px;
font-size:0.8em;
}
#top {
top:0px;
left:0px;
height:15px;
width:600px;
background:url(images/gamedump_01.jpg);
color:black;
position:relative;
margin-left:25px;
}
#banner {
top:0px;
left:-1px;
height:79px;
width:553px;
background:url(images/gamedump_03.jpg);
color:black;
position:relative;
margin-left:25px;
mragin-top:15px;
}
#leftside {
top:0px;
left:-1px;
height:385px;
width:25px;
background:url(images/gamedump_02.jpg);
color:black;
margin-left:0px;
margin-top:15px;
position:relative;
}
#rightside {
top:0px;
left:-1px;
height:385px;
width:22px;
background:url(images/gamedump_04.jpg);
color:black;
margin-left:553px;
margin-top:-1px;
position:relative;
}
#news {
top:0px;
left:-1px;
height:17px;
width:146px;
background:url(images/gamedump_05.jpg);
color:black;
margin-left:-553px;
margin-right:0px;
margin-top:79px;
position:relative;
}
#downloads {
top:0px;
left:-1px;
height:25px;
width:146px;
background:url(images/gamedump_07.jpg);
color:black;
margin-left:0px;
margin-right:0px;
margin-top:17px;
position:relative;
}