Website fails when zooming out and zooming in

35 replies [Last post]

Thu, 2011-04-28 17:48

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Well I made a website with the stuff I know just to see if I can make a content and stuff, but I faced the problem that when I zoom in and out everything goes trough everything
Also when I try to set the navigator horizontal the same thing happens
I assume it has to do with the float and width and so but I have no idea on how to fix it
I have tried a lot of things
Here are the codes:
Xhtml:

<!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>
<title>Sinan</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>fly for hope</h1>
<div class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#forums">Forums</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
</div>
<div class="content">
<div class="left">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div>
<div class="right">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div>
<div class="rightbottom">My Div Class is right</div>
<div class="center">Hello World!</div>
<div class="centerbottom">I am centered</div>
</div>
</body>
</html>

CSS:

body
{
background-color:beige;
line-height: 1.5;
margin-left:500px;
margin-right:500px;
}
h1
{
position:relative;
display:block;
text-align: center;
text-transform: uppercase;
color:white;
border:2px solid gray;
background-color:black;
width:900px;
padding:10px;
margin-left:auto;
margin-right:auto;
clear:both;
overflow:auto;
}
div.content
{
border:1px solid;
margin:5px;
padding:5px;
display:block;
overflow:auto;
}
div.left,.right,.center,.rightbottom,.centerbottom
{
background-color:#CCFF99;
}
div.left
{
display:block;
float:left;
overflow:auto;
border:1px solid;
width:230px;
height:500px;
text-align:center;
padding:10px;
margin-left:auto;
margin-right:auto;
clear:both;
}
div.right
{
height:300px;
float:right;
overflow:auto;
border:1px solid;
width:230px;
text-align:center;
padding:10px;
margin:auto;
}
div.rightbottom
{
height:100px;
float:right;
overflow:auto;
border:1px solid;
width:230px;
text-align:center;
padding:10px;
margin-top:10px;
margin-right:auto;
clear:right;
}
div.center
{
float:center;
border:1px solid;
width:300px;
text-align:center;
margin:auto;
padding:10px;
}
div.centerbottom
{
float:center;
overflow:auto;
border:1px solid;
width:300px;
text-align:center;
margin-right:auto;
margin-left:auto;
margin-top:10px;
margin-bottom:auto;
padding:10px;
}
div.nav a:link,a:visited
{
display:block;
text-decoration:none;
width:120px;
padding:4px;
margin:0;
background-color:#0000FF;
color:white;
border:3px outset #0000FF;
}
div.nav a:hover,a:active
{
text-decoration:none;
width:120px;
padding:4px;
background-color:#000080;
color:white;
border:3px inset #000080;
}
div.nav ul
{
list-style-type:none;
margin:5px;
padding:0;
display:inline;
}
div.nav li
{
overflow:auto;
text-decoration:none;
}
div.nav
{
padding:0;
}

Tags:

Beginners CSS Questions

Thu, 2011-04-28 20:06

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

What's this all

What's this all about?

body
{
...
margin-left:500px;
margin-right:500px;
}

That's got to cause problems even on a 1920px width monitor (which has only about 1880px viewport width with browser maximized. Your h1 is 900px, plus body's 1000px worth of lateral margin, :shrug:.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Thu, 2011-04-28 20:44

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Fix

How do I fix this
And yea I earlier put 25% at the body for each side
But I late I put pixels to see if that would work but it didnt
Did you try zooming it in and out?
I want to find a way that everything zooms like h1 and the nav does
So it doesnt move to left or right when I zoom in or out
Basicaly I want to make the content a little like this

Thu, 2011-04-28 20:59

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Fix

How do I fix this
And yea I earlier put 25% at the body for each side
But later I put pixels to see if that would work but it didnt
Did you try zooming it in and out?
I want to find a way that everything zooms like h1 and the nav does
So it doesnt move to left or right when I zoom in or out
Basicaly I want to make the content a little like this
http://85.214.211.61/
This is mine
http://85.214.211.61/test/index.xhtml

Fri, 2011-04-29 01:11

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Study these suggested

Study these suggested changes. You add too many redundant properties. Only declare properties for which there is compelling reason.

body {
    background-color: beige;
    line-height: 1.5;
    margin: 0 auto;
    max-width: 1250px;
    min-width: 760px;
    width: 85%;
    }
 
h1 {
    background-color: black;
    border: 2px solid gray;
    color: white;
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
}
 
div.nav {}  <-- delete this element - ul is the proper container
 
ul.nav {
    list-style-type: none;
    padding: 0;
    }
 
.nav li {}
 
div.content {
    border: 1px solid;
    overflow: auto;
    padding: 5px;
    }
 
div.left {
    border: 1px solid;
    float: left;
    padding: 10px;
    text-align: center;
    width: 230px;
    }
 
div.right {
    border: 1px solid;
    float: right;
    padding: 10px;
    text-align: center;
    width: 230px;
    }
 
div.rightbottom {  <-- this container should be a child of div.right
    border: 1px solid;
    margin-top: 10px;
    padding: 10px;
    }
 
div.center {
    border: 1px solid;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    }
 
div.centerbottom {  <-- this container should be a child of div.center
    border: 1px solid;
    margin: 10px 0;
    padding: 10px;
    }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Fri, 2011-04-29 13:28

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Thanks

Thanks a lot this really helped!
But when I zoom in I still get the same problem kinda
It brings everything together in the content
Also when I display it as a block so I can add a background and width to the nav
It goes vertical and not horizontal
And how do I do the child thing?
Like this?
div.rightbottom:first-child

Fri, 2011-04-29 16:21

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

sinan92 wrote: Thanks a lot

sinan92 wrote:

Thanks a lot this really helped!
But when I zoom in I still get the same problem kinda

What do you expect to happen when you cause the page to be larger than the space available to hold it? Did you notice the limits placed on the width of body? That will cause scrolling when over-zoomed.

Quote:

It brings everything together in the content

Not sure what you mean, here. Go back to my comment above.

Quote:

Also when I display it as a block so I can add a background and width to the nav
It goes vertical and not horizontal

Float the list items, or make them inline-block.

Quote:

And how do I do the child thing?
Like this?
div.rightbottom:first-child

No, I mean the div should simply be nested within the .right div in the html markup. This is about grouping. You have the page as a whole. Within the page are two groups, the top banner that includes the heading and navigation, and a content group that contains three side by side column groups. Each column has its own context and children. Consider a chest of drawers. The drawers may be re-arranged in the chest; a given drawer may be moved to any of the slots without affecting what's in it, or what's within another drawer. Likewise, the contents of any drawer may be re-arranged or the contents changed without affecting any of the other drawers. If the drawers are sub-divided, those sub-divisions' content can be messed with without affecting anything else.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Fri, 2011-04-29 17:30

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

The last part confused me a

The last part confused me a little
And well like I said before my actualy goal is to make it a little like this website
http://85.214.211.61/
When you zoom in there the content doesnt turn into mess
I looked at the CSS and HTML code but didnt understand how he did those stuff like
the width of the content and so
CSS:

/* CREDITS GO TO MERPH */
 
/* Reset */
 
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, code, small, strong, dl, dt, dd, ol, ul, li, fieldset, form, label, img {
	margin: 0px;
	padding: 0px;
	border: 0px;
	outline: 0px;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;	
}
 
body {
	line-height: 1.5;
	font-family: helvetica, arial, sans-serif;
	background: url(images/bgPattern.jpg) repeat-x;
	background-color: #dddddd;
}
ol, ul {
	list-style: none;
}
 
a:link 
{
color:#666;
text-decoration:none;
text-decoration:blink;
}
 
a:hover 
{
color:#999;
font-weight:bold;
text-decoration:none;
}
 
a:visited 
{
text-decoration:none;
}
 
/* End Reset */
 
/* Wrapper */
 
#wrapper {
	width: 850px;
	margin-left: auto;
	margin-right: auto;
}
 
/* End Wrapper */
 
/* Menu */
 
#menu {
	width: 850px;
	height: 41px;
	background: url(images/menuBar.jpg) no-repeat;
	border-bottom: #fff solid 1px;
	clear: both;
}
#menu ul {
	padding-top: 7px;
	padding-left: 210px;
	position: relative;
}
#menu ul li{
	float: left;
	padding-right: 15px;
}
#menu ul li a {
	color: #fff;
	font-family: helvetica, arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
#menu ul li a:hover {
	color: #00ccd8;
}
 
/* End Menu */
 
/* Header */
 
#header {
	clear: both;
	margin-top: 20px;
	border: #ccc solid 4px;
 
}
 
/* End Header */
 
/* Content */
 
#content {
	margin-top: 20px;
}
#left {
	float: left;
	display: block;
	background: url(images/conBg.jpg) repeat-x;
	background-color: #E6E6E6;
	width: 210px;
	margin-right: 15px;
	border-bottom: #999 solid 4px;
	padding-bottom: 10px;
}
#center {
	float: left;
	display: block;
	background: url(images/conBg.jpg) repeat-x;
	background-color: #E6E6E6;
	width: 399px;
	margin-right: 16px;
	border-bottom: #999 solid 4px;
}
#right {
	float: left;
	display: block;
	background: url(images/conBg.jpg) repeat-x;
	background-color: #E6E6E6;
	width: 210px;
	border-bottom: #999 solid 4px;
	padding-bottom: 10px;
}
.serverinfo {
	background: url(images/navOrange.jpg) repeat-x;
	text-align: center;
	padding-top: 8px;
	height: 32px;
	-moz-border-radius-topleft: 10px;
	border-top-left-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-top-right-radius: 10px;
}
.serverinfo p {
	color: #fff;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	text-transform: uppercase;
	text-shadow: #212b2c 1px 1px 0px;
}
.textcon {
	padding-left: 10px;
	padding-right: 10px;
}
.textcon p {
	color: #666;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	padding: 7px;
	padding-bottom: 12px;
}
.textleft p {
	color: #666;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	padding: 7px;
	text-align: center;
}
.posttitle {
	color: #666;
	font-family: helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: bold;
	padding: 7px;
}
.meta {
	color: #999;
	font-family: helvetica, arial, sans-serif;
	font-size: 11px;
	padding: 7px;
	margin-top: -18px;
}
 
/* End Content */
 
/* Footer */
 
#footer {
	width: 100%;
	height: 60px;
	text-align: center;
	clear: both;
	padding-top: 20px;
}
 
/* End Footer */

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=utf-8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
		<title>Fly For Hope - Welcome to FlyFH Private Server!</title>
        <meta name="description" content="Dope Flyff Private Server">
        <meta name="keywords" content="Dope Flyff Private Server, Dopeflyff dopeflyff">
	</head>
 
<body>
 
<div id="wrapper">
 
        	<div id="menu">
            	<ul>
                <li id="home"><a href="index.html">Home</a></li>
                <li id="register"><a href="register.php">Register</a></li>
                <li id="download"><a href="index.html">Download</a></li>
                <li id="chat"><a href="http://www.xtremetop100.com/in.php?site=1132320464">Vote For Us</a></li>
                <li id="donate"><a href="donate.html">Donate</a></li>
                <li id="forum"><a href="#">Forum</a></li>
                <li id="contact"><a href="contact.html">Contact</a></li>
                </ul>
            </div><!-- End Menu -->
 
            <div id="header"> <img src="images/headerImagegrey.jpg" width="850" height="177" border="0" /></div><!-- End Header -->
 
            <div id="content">
 
            	<div id="left">
                	<div class="lefttop">
<div class="serverinfo"><p>Server Information</p></div>
                      <p class="meta">&nbsp;</p>
                      <p class="meta"><b>Founder(<img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/drunk.png" title="Drunk" alt="Drunk" class="smiley-content" />:</b>
 
                        <font color="black"><b>Curse & Xegano</b></font>
                        <br>
                        <b> Server:</b>
                        <b>
                        <font color="#00FF00">Online</font>
                        </b>                        </p>
                      <p class="meta"><b>Registration:</b>
                        <b>
                        <font color="#00FF00">Online</font>
                        </b></p>
                      <p class="meta"><b>Server Rates:</b>                      </p>
 
                      <p><span class="meta"><b>
                      Official Server v15
                      </b>
                      </span></span>
  <br />
 
  <span class="meta"><b> Max Level:
    <font color="black">200</font>
    </b></span></span></li>
  <br />
 
 
                        <span class="meta"><b>Exp:
                          <font color="black">500x</font>
                        </b></span></span>
  <br />
 
                        <span class="meta"><b>Drops:
                          <font color="black">500x</font>
                        </b></span></span>
  <br />
 
 
                        <span class="meta"><b>Penya:
                          <font color="black">1000x</font></b></span></span>
                        <br />
 
 
                        <span class="meta"><b>Rain Event 2x Exp:
                      <font color="black">1000x</font></b></span></span></p>
                      <p>&nbsp;</p>
<div class="textleft">
</div><!-- End Textcon -->
                    </div><!-- End Lefttop -->
                </div><!-- End Left -->
 
                <div id="center">
                	<div class="centertop"><div class="serverinfo">
               	  <p>Download</p></div></div>
               	  <div class="textcon">
                    <p><B>Updated 23/04/11: </B>
<p><B>Full Client:</B><a target='_blank' href='http://www.megaupload.com/?d=M6SILUGK'> #Mirror 1 - Megaupload</a></p>
<p><B>Patch:</B><a target='_blank' href='http://www.multiupload.com/2U5OVV9ZLT'>#Mirror 1 - Multiupload</a></p>
               	  </div>
                	<div class="centertop">
                    	<div class="serverinfo"><p>News and Updates</p></div>
                    </div><!-- End Centertop -->
                    <div class="textcon">
 
                    	<div class="posttitle">FlyFH - New Patch !</div>
                        <div class="meta">03/04/11 by Curse</div>
                        <p>FlyFH has a new patch for download, the patch contains a launcher with updater that will allow you to play FlyFH and download the updates without visiting the website for patch downloads.</p>
                        <p>Thank You For Reading, Have a Nice Day<br />
                        The Owner Of Hope Network, Curse</p>
<div class="posttitle">FlyFH Open Beta !</div>
                        <div class="meta">18/04/11 by Curse</div>
                        <p>Welcome to FlyFH Private Server, we have just released our BETA test client, the client will be updated in the future, if you find anything you don't like ingame just report it to the Staff Team, and if you find any bugs/errors report to Curse or Xegano so they can fix it.<br />
                        </p>
                        <p>Staff Contact: Curse - </p>
<script type="text/javascript">eval(unescape('%64%6f%63%75%6d%65%6e%74%2e%77%72%69%74%65%28%27%3c%61%20%68%72%65%66%3d%22%6d%61%69%6c%74%6f%3a%54%68%65%4f%6e%65%5f%54%68%65%50%72%6f%40%68%6f%74%6d%61%69%6c%2e%63%6f%6d%22%3e%54%68%65%4f%6e%65%5f%54%68%65%50%72%6f%40%68%6f%74%6d%61%69%6c%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p></p>
                        <p>Thank You For Reading, Have a Nice Day<br />
                        The Owner Of Hope Network, Curse</p>
 
                    </div><!-- End Textcon -->
                </div><!-- End Center -->
 
                <div id="right">
                	<div class="righttop">
                   	  <div class="serverinfo"><p>Vote for us!</p></div>
                      <span class="meta">Please Help Us Become Nº1!</span>
                      <div class="textleft">
                        </li>
                    </li>
                    <a href="http://www.xtremetop100.com/in.php?site=1132320464">
 <img border="0" alt="Flyff Online" src="http://www.xtremeTop100.com/votenew.jpg"></div>
 
               	  </div>
                	<!-- End Righttop -->
                </div><!-- End Right -->
                <br />
 
                 <div id="right">
                	<div class="righttop">
                   	  <div class="serverinfo">
                   	    <p>Staff Team                   	  </p>
                   	  </div>
                   	  <div class="textleft">
                      <p>Curse - Owner<br />
                        Xegano - Co-Owner<br />
                        NeoBlader - Game Master<br />
                        SitStep - Game Master</p>
                      </div>
 
               	  </div>
                	<!-- End Righttop -->
                </div><!-- End Right -->
 
 
            </div><!-- End Content -->
            <div id="footer"><div class="textleft">
              <p>Copyright © 2011 Fly For Hope, All Rights Reserved<br />
              Design and Coding by Curse</p></div></div>
</div><!-- End Wrapper -->
 
	</body>
</html>

Fri, 2011-04-29 18:02

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Fixed

Oh I found out how to do it
It was just this part:

#wrapper {
	width: 850px;
	margin-left: auto;
	margin-right: auto;

Thanks a lot you really helped me out
I just still dont exactly understand the child part sorry
Could you maybe give an example?
And I know I already did inline the list item and also tried float but
it somehow doesnt allow me to set the width of it

.nav li {
    display:inline;
    }

.nav a:link,a:visited {
    text-decoration:none;
	background-color:purple;
	width:120px;
	display:inline;
	color:yellow;

<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#forums">Forums</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>

Sorry for troubling you

http://85.214.211.61/test/index.xhtml

Sat, 2011-04-30 00:11

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

I'll try to cover all your

I'll try to cover all your questions.

Notice the example you ref'd has a #wrapper element to control the width. Since you didn't have that, I used the body element for that purpose. You may do either, but I prefer using an explicit wrapper.

Read the manual/instructions carefully; I said to use float or inline-block, not inline. Inline elements have neither width nor height (except for IE<8, which got things terribly wrong). Each has its own set of gotchas, so decide which you want, and we can deal with them.

Note the list structure: Each list item is a child of the ul. Each list item is a sibling to the other list items.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sat, 2011-04-30 10:26

#10

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

The inline-block thing worked

The inline-block thing worked now all I have to do with that is to set the width to the same as the others so it stays in the middle too and doesnt move to all the way left,but I didnt manage to do this.
Also I thought I understood and put "div.rightbottom" between the "div.right" tag in HTML but that didnt work either cause then it just goes inside of div.right
So I suppose I still didnt understand that part I am terribly sorry :/

CSS:

body {
    background-color: beige;
    line-height: 1.5;
    }
 
h1 {
    background-color: black;
    border: 2px solid gray;
    color: white;
    padding: 10px;
	width:850px;
	margin-top:0;
	margin-right:auto;
	margin-left:auto;
    text-align: center;
    text-transform: uppercase;
}
 
ul.nav {
    list-style-type: none;
    padding: 0;
	margin-left:auto;
	margin-right:auto;
    }
 
.nav li {
    display:inline-block;
    }
 
.nav a:link,a:visited {
    text-decoration:none;
	background-color:purple;
	width:120px;
	display:block;
	color:yellow;
    }
 
.nav a:hover,a:active {
    background-color:green;
    }
 
div.content {
    overflow: auto;
    margin-right:auto;
	margin-left:auto;
	width:850px;
    }
 
div.left {
    border: 1px solid;
    float: left;
    padding: 10px;
    text-align: center;
    width: 230px;
    }
 
div.right {
    border: 1px solid;
    float: right;
    padding: 10px;
    text-align: center;
    width: 230px;
    }
 
div.rightbottom {
    border: 1px solid;
    margin-top: 20px;
    padding: 10px;
    }
 
div.center {
    border: 1px solid;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    }
 
div.centerbottom {
    border: 1px solid;
    margin: 10px 0;
    padding: 10px;
    }

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>
<title>Sinan</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>fly for hope</h1>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#forums">Forums</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
<div class="content">
<div class="left">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div>
<div class="right">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.
<div class="rightbottom">My Div Class is right</div>
</div>
<div class="center">Hello World!
<div class="centerbottom">I am centered</div>
</div>
</div>
</body>
</html>

Sat, 2011-04-30 15:14

#11

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

sinan92 wrote: The

sinan92 wrote:

Set the ul to {text-align: center;}, just as you would for any inline element.

Quote:

Also I thought I understood and put "div.rightbottom" between the "div.right" tag in HTML but that didnt work either cause then it just goes inside of div.right

That's where it belongs.

Quote:

So I suppose I still didnt understand that part I am terribly sorry :/

You're thinking in paste-up-for-print terms, or in table layout, everything-in-its-own-cell thinking.

Go back to my earlier post. Use the values I gave you and nothing more. We discussed the wrapper idea. You can either treat the body element as your wrapper, or better, in my opinion, use an explicit wrapper div around the whole page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sat, 2011-04-30 23:13

#12

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

I thought the wrapper was in

I thought the wrapper was in my case the content
Would you mind telling me more about the wrapper?
How do I use it
Thanks for helping me so much btw you helped me a lot
The nav thing worked everything is fine now except for the wrapper thing
I dont really understand it yet
Edit:
Oh I guess I got it
I opened content right after body
And closed it right before /body
All I still dont understand is how to make the bottom right and left like on the other site I was looking at
Also when I set the background color it doesnt go all the way to the bottom
Just till the end of the bottom of the columns

Sun, 2011-05-01 00:16

#13

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Show me. Update your test

Show me. Update your test page.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Sun, 2011-05-01 09:32

#14

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

That was my dedicated server

That was my dedicated server but it is down now
Is it fine if I show a screenshot too?

In case you want to see

CSS:

body {
    background-color: beige;
    line-height: 1.5;
	background-color: #dddddd;
    }
 
div.header {
    background-color: black;
    border: 2px solid gray;
    color: white;
	margin-top:0;
	margin-right:auto;
	margin-left:auto;
    text-align: center;
    text-transform: uppercase;
}
 
ul.nav {
    list-style-type: none;
    padding: 0;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
    }
 
.nav li {
    display:inline-block;
	margin-left:20px;
	margin-right:20px;
    }
 
.nav a:link,a:visited {
    text-decoration:none;
	background-color:purple;
	width:150px;
	display:block;
	color:yellow;
	border:3px outset green;
    }
 
.nav a:hover,a:active {
    background-color:green;
	border:3px inset purple;
    }
 
div.content {
    overflow: auto;
    margin-right:auto;
	margin-left:auto;
	width:850px;
	background-color:beige;
    }
 
div.left {
    border: 1px solid;
    float: left;
    padding: 10px;
    text-align: center;
    width: 230px;
	margin-right:20px;
    }
 
div.right {
    border: 1px solid;
    float: right;
    padding: 10px;
    text-align: center;
    width: 230px;
	margin-left:20px;
    }
 
div.rightbottom {
    border: 1px solid;
    margin-top: 20px;
    padding: 10px;
    }
 
div.center {
    border: 1px solid;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    }
 
div.centerbottom {
    border: 1px solid;
    margin: 10px 0;
    padding: 10px;
    }

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>
<title>Sinan</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="content">
<div id="header"> <img src="images/headerImagegrey.jpg" width="850" height="177" border="0" /></div>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#forums">Forums</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
<div class="left">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div>
<div class="right">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.
<div class="rightbottom">My Div Class is right</div>
</div>
<div class="center">Hello World!
<div class="centerbottom">I am centered</div>
</div>
</div>
</body>
</html>

Somehow my router doesnt allow me to use XAMPP on the ip adress

Sun, 2011-05-01 17:59

#15

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Structure

Now you're cookin'. I suggest you wrap the three columns in a div and name it #content. Give it {overflow: hidden;}, nothing else needed. You'll understand why when you try to add a footer, for example. Rename the top level wrapper to um, #wrapper. Rename the left, center and right, etc. to reflect their content, not their positions. If you decide you want to swap column positions, you'll feel kinda silly having a right column named "left".

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2011-05-02 22:02

#16

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Im sorry but it kinda

Im sorry but it kinda confused me
So I change div.content to div#content and all it needs in it is overflow:hidden; right?
What else?
I feel stupid lol

CSS:

body {
    background-color: beige;
    line-height: 1.5;
	background-color: #dddddd;
    }
 
div.header {
    background-color: black;
    border: 2px solid gray;
    color: white;
	margin-top:0;
	margin-right:auto;
	margin-left:auto;
    text-align: center;
    text-transform: uppercase;
}
 
ul.nav {
    list-style-type: none;
    padding: 0;
	margin-left:auto;
	margin-right:auto;
	margin-top:-35px;
	text-align:center;
    }
 
.nav li {
    display:inline-block;
	margin-left:20px;
	margin-right:20px;
    }
 
.nav a:link,a:visited {
    text-decoration:none;
	background-color:purple;
	width:150px;
	display:block;
	color:yellow;
	border:3px outset green;
    }
 
.nav a:hover,a:active {
    background-color:green;
	border:3px inset purple;
    }
 
div#content {
    overflow: hidden;
    }
 
div.left {
    border: 1px solid;
    float: left;
    padding: 10px;
    text-align: center;
    width: 230px;
	margin-right:20px;
    }
 
div.right {
    border: 1px solid;
    float: right;
    padding: 10px;
    text-align: center;
    width: 230px;
	margin-left:20px;
    }
 
div.rightbottom {
    border: 1px solid;
    margin-top: 20px;
    padding: 10px;
    }
 
div.center {
    border: 1px solid;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    }
 
div.centerbottom {
    border: 1px solid;
    margin: 10px 0;
    padding: 10px;
    }

Mon, 2011-05-02 22:01

#17

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

What you say you did doesn't

What you say you did doesn't match what I said you should do. Did you rename div.content to div#wrapper? Did you add a new element, div#content, as the parent to the three columns?

These miss-communications on yours and/or my part are the reason for posting the exact code for all changes.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2011-05-02 22:44

#18

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Alright I suppose I did it

Alright I suppose I did it like you said I might be wrong
Everything looks the same actually though

CSS:

body {
    background-color: beige;
    line-height: 1.5;
	background-color: #dddddd;
    }
 
div.header {
    background-color: black;
    border: 2px solid gray;
    color: white;
	margin-top:0;
	margin-right:auto;
	margin-left:auto;
    text-align: center;
    text-transform: uppercase;
}
 
ul.nav {
    list-style-type: none;
    padding: 0;
	margin-left:auto;
	margin-right:auto;
	margin-top:-35px;
	text-align:center;
    }
 
.nav li {
    display:inline-block;
	margin-left:20px;
	margin-right:20px;
    }
 
.nav a:link,a:visited {
    text-decoration:none;
	background-color:purple;
	width:150px;
	display:block;
	color:yellow;
	border:3px outset green;
    }
 
.nav a:hover,a:active {
    background-color:green;
	border:3px inset purple;
    }
 
div#wrapper {
    overflow: auto;
    margin-right:auto;
	margin-left:auto;
	width:850px;
	background-color:beige;
    }
 
div#content {
    overflow:hidden;
	}
 
div.left {
    border: 1px solid;
    float: left;
    padding: 10px;
    text-align: center;
    width: 230px;
	margin-right:20px;
    }
 
div.right {
    border: 1px solid;
    float: right;
    padding: 10px;
    text-align: center;
    width: 230px;
	margin-left:20px;
    }
 
div.rightbottom {
    border: 1px solid;
    margin-top: 20px;
    padding: 10px;
    }
 
div.center {
    border: 1px solid;
    overflow: hidden;
    padding: 10px;
    text-align: center;
    }
 
div.centerbottom {
    border: 1px solid;
    margin: 10px 0;
    padding: 10px;
    }

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>
<title>Sinan</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="wrapper">
<div id="header"> <img src="images/headerImagegrey.jpg" width="850" height="177" border="0" /></div>
<ul class="nav">
<li><a href="#home">Home</a></li>
<li><a href="#forums">Forums</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#donate">Donate</a></li>
</ul>
<div id="content">
<div class="left">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div>
<div class="right">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.
<div class="rightbottom">My Div Class is right</div>
</div>
<div class="center">Hello World!
<div class="centerbottom">I am centered</div>
</div>
</div>
</div>
</body>
</html>

Mon, 2011-05-02 23:28

#19

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Those last changes were not

Those last changes were not to alter the looks of the page. They were to change the html structure to more closely mirror the page's structure. The name changes were to provide a more semantic value to those tokens.

HTML is a declarative, structural markup language. Your markup should properly indicate the structure of the document. Likewise, the names (tokens) you give various elements, i.e. the class and id tokens, should reflect what the content of that element is, not its position or appearance.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Mon, 2011-05-02 23:50

#20

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Oh okay so thats fine now

Oh okay so thats fine now right?
So how do I put like rightbottom below right instead of inside right?
Like on the website I showed you earlier

Tue, 2011-05-03 00:53

#21

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

You don't. The "right" div is

You don't. The "right" div is a container for all that belong in that column. Once you've established that context, you can further sub-group whatever is in the column, giving each its own styling if you want. Remember, you group from the top down. You started from the bottom up, in other words, backwards.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2011-05-03 01:07

#22

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Yea thats what I mean How do

Yea thats what I mean
How do I add those sub-groups
I want the rightbottom colomn below right
But when I put rightbottom inside of right it shows it inside of it and if I put rightbottom below right in HTML it just centers it trough the whole content
What I want is this:

But I instead have this now:

Tue, 2011-05-03 05:15

#23

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

So wrap that upper section in

So wrap that upper section in a div and put your border on it. Remove the border from #right.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2011-05-03 13:02

#24

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Oh is this what you

Oh is this what you mean?

CSS:

div.right {
    float:right;
	margin-left:20px;
    } 
 
div.righttop {
    border: 1px solid;
    padding: 10px;
    text-align: center;
    width: 230px;
    }
 
div.rightbottom {
    border: 1px solid;
    margin-top: 20px;
    padding: 10px;
    }

HTML:

<div class="right">
<div class="righttop">This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</div>
<div class="rightbottom">My Div Class is right</div>
</div>

It looks the way I want it im just not sure if I did it right so that I wont see unexpected things later
Also what should I do to shee the background of the content now from top to bottom?

If the only way is putting a footer
How do I put a footer?
float:bottom; doesnt exist right?

Tue, 2011-05-03 16:39

#25

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Pretty good. How many

Pretty good.

How many elements are you planning to be named .right? Just one? Use id, not class. There are reasons (that you haven't run into here) to support that.

Background? It looks to me like your background fills #content. Or, do you mean the whole browser viewport? If the latter, put the background on the body element.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2011-05-03 17:29

#26

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Thats how it looks right now

Thats how it looks right now
Im now trying to learn some more CSS3 once I am done Ill start designing it and stuff
Thanks a lot without you I couldnt do it
But what I mean is the part marked in red
I suppose the only way to make that part colored too is using padding-top:(for example)200px; at #wrapper, or just add a footer
Well the first thing doesnt seem good to me lol
I have to add a footer at the end anyway but I have no idea on how to position it to the bottom
Oh and I dont know I could add a bottom right column later
But like I said earlier this is just to test my skills with HTML and CSS
I have been learning like a week or 2 straight
Learned HTML and CSS so far im still on a beginner level ofcourse but I hope itll improve with the time
My goal is to learn HTML,CSS,PHP and SQL for now
Once I have improved my skills in these I want to learn some more languages like Java, AJAX and .NET

Edit:

Sorry but I found out one more problem
I changed the border image but its not right on the edge of the column so when I try to change the background of the column this happens:

HTML:

<div id="left">
<div id="lefttop">
<div id="border"><p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</p>
</div>
</div>
</div>

CSS:

div#left { 
    float:left;
	overflow:hidden;
	background-color:gray;
    }
 
 div#lefttop {
    padding: 10px;
    text-align: center;
    width: 230px;
    }

Tue, 2011-05-03 19:24

#27

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

sinan92 wrote:[snip]But

sinan92 wrote:

[snip]
But what I mean is the part marked in red
I suppose the only way to make that part colored too is using padding-top:(for example)200px; at #wrapper, or just add a footer
Well the first thing doesnt seem good to me lol

You're thinking in print terms again. The web does not have a page size; it is not a piece of paper. I'll guess you have your browser maximized on a large monitor. Don't. Run your browser at a sane size (1024x768, 1280x1024 or even 800x600 at times) and you won't have all that excess space. If your buy yourself a larger desk, do you insist the your letter paper, memo pads, envelopes, etc. be enlarged too? A web page is what it is. That's why we have scrolling for longer pages and space for shorter ones. If your page lacks sufficient content, making the background stretch further won't make it any more full.

Quote:

I have to add a footer at the end anyway but I have no idea on how to position it to the bottom

You don't. That's a print concept. I did a prototype about 6 years ago, "Footer at bottom of viewport". I don't suggest you try until you're much further advanced in your studies; by then you'll be too smart to want to use it.

Quote:

Oh and I dont know I could add a bottom right column later

Just add another block after the previous block in that column.

Quote:

[snip]
Sorry but I found out one more problem
I changed the border image but its not right on the edge of the column so when I try to change the background of the column this happens:[snip]

Be specific. Explain what happens, why it's wrong, and how it should be.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2011-05-03 20:13

#28

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Well as you can see the color

Well as you can see the color goes outside of the border
I want the background color inside of the borders

Nice website btw
But I didnt quite understand it
Lets say I want to do it the way it is done on the website I am using as example
I supposed its locked to the bottom too
But how?
Its not like when I type
#footer
It gets to the bottom right?
And yea I understood the print part now lol never saw it that way
But still isnt there a way it gets to the bottom of the page no matter what the resolution is?

Tue, 2011-05-03 20:10

#29

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Huh! I thought that looked

Huh! I thought that looked pretty good. Shows what I know about graphic design.

Where's the code? Did I miss it?

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2011-05-03 20:24

#30

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

HTML: <div id="left"> <div

HTML:

<div id="left">
<div id="lefttop">
<div id="border"><p>This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties.
The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the
<a target="_blank" href="tryit.asp?filename=trycss_text">"Try it yourself"</a> link.</p>
</div>
</div>
</div>

CSS:

div#left { 
    float:left;
	overflow:hidden;
	background-color:gray;
    }
 
 div#lefttop {
    padding: 10px;
    text-align: center;
    width: 230px;
    }

I posted it earlier so thought there wouldnt be need for it
But no you are right it actually doesnt look bad your site shows that you know enough about graphic design xD
But I still prefer to know how to put the border on the edge instead
I suck at graphic design lol thats why I always ask the opinion of other people for it xD

Tue, 2011-05-03 21:03

#31

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

#border css? gary

#border css?

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tue, 2011-05-03 21:14

#32

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

#border {

#border {
    border-image:url(border.png) 30 30 stretch;
	-moz-border-image:url(border.png) 30 30 30 30 stretch;
	-webkit-border-image:url(border.png) 30 30 stretch;
    }

Wed, 2011-05-04 18:45

#33

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Any idea?

Wed, 2011-05-04 22:12

#34

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 13 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

I haven't played with that

I haven't played with that property. From the example, shouldn't that be 27 rather than 30?

I recall there's an offset, or something, that can be applied.

Also, you're using the browser specific variations in the wrong order; do it like so:

#border {
  -moz-border-image:url(border.png) 30 30 30 30 stretch;
  -webkit-border-image:url(border.png) 30 30 stretch;
  border-image:url(border.png) 30 30 stretch;
  }

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Wed, 2011-05-04 22:51

#35

sinan92

Offline

Regular

Last seen: 11 years 38 weeks ago

Timezone: GMT+2

Joined: 2011-04-28

Posts: 34

Points: 41

Oh okay thank you I did it

Oh okay thank you
I did it that way because it said so in w3schools
And well okay then Ill try to figure it out by myself or try another forum or something
Thanks a lot for your help!

Website fails when zooming out and zooming in

What's this all

Fix

Fix

Study these suggested

Thanks

sinan92 wrote: Thanks a lot

The last part confused me a

Fixed

I'll try to cover all your

The inline-block thing worked

sinan92 wrote: The

I thought the wrapper was in

Show me. Update your test

That was my dedicated server

Structure

Im sorry but it kinda

What you say you did doesn't

Alright I suppose I did it

Those last changes were not

Oh okay so thats fine now

You don't. The "right" div is

Yea thats what I mean How do

So wrap that upper section in

Oh is this what you

Pretty good. How many

Thats how it looks right now

sinan92 wrote:[snip]But

Well as you can see the color

Huh! I thought that looked

HTML: <div id="left"> <div

#border css? gary

#border {

Any idea?

I haven't played with that

Oh okay thank you I did it

User login

Navigation