Zymic Forums

Webmaster resources

Zymic IRC Server

Chat in real time at irc.zymic.com - Learn More

Welcome

Welcome to the Zymic webmaster forums. Our forums are here to provide people the free ability to discuss a range of websites related topics such as design, development coding and marketing.

In order to post you will need to register for a zymic account or if you already have one simply login by using the form on the left.

left Zymic Webmaster ForumsWeb Design & DevelopmentClient Side ScriptingHTML and CSS right
left
Coding Html/css Layout. No Images.
 right
k.digennaro
post Jul 31 2008, 08:13 PM
Post #1


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
Hey all finnaly after 3months of trying my coding skills are starting to fall into place. Instead of using tags etc because people say to use them I'm understanding why there used. Thanks to everyone whos helped me.

Anyways back on topic, I'm coding a fully HTML/CSS layout without images right now and I need a little help. I've basically got the layout coded except for the middle section (content area) as you see in the image below there's supposed to be a black line on the right and left of the content box, I can't seem to get it to work on the same line, everytime I code it the design is either on top of each other, or vertical instead of horizontal. The image belows what I'm trying to code. It seems like I don't fully understand how to "pad" an object. because everytime I do it. it doesn't move, I've read through tuts on padding etc, I do what I think is exactly what they do but mine doesn't work.
*note recently I started coding the CSS inside the HTML just while I'm coding it, later ill paste the CSS into another document. I just like having it on the same page for convience*



* I realize this is a really simple layout not even a great design, I'm just building it for learning purposes.
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>

body{
background-color:#777777;
margin:0 0;
padding:0 0;
}

#headerblack{
background-color:#000000;
width:70%;
height:50px;
margin:0 0;
padding:0 0;
}

#headerwhite{
background-color:#ffffff;
width:70%;
height:50px;
margin:0 0;
padding:0 0;
border:2px black solid;
}

#sideleft{
background-color:#000000;
width:20px;
height:75%;
background-repeat:no-repeat
}

#sideright{
background-color:#000000;
width:20px;
height:75%;
background-repeat:no-repeat;
}

#navbar{
background-color:#ffffff;
width:100px;
height:150px;
border: 2px black solid;
left:100px;
background-repeat:no-repeat
}

#footerwhite{
background-color:#ffffff;
width:70%;
height:25px;
margin:0 0;
padding:0 0;
border:2px black solid;
background-repeat:no-repeat
}

#footerblack{
background-color:#000000;
width:70%;
height:25px;
margin:0 0;
padding:0 0;
background-repeat:no-repeat
}

#content{
background-color:#555555;
width:50%;
heigth:75%;
background-repeat:no-repeat
}


</style>
</head>
<body>
  
    <div id="headerblack">
   </div>
  
    <div id="headerwhite">
    </div>
  
    <div id="sideleft">
    <div id="content">
    <div id="sideright">
  </div>
    </div>
    </div>
    
    <div id="footerwhite">
   </div>
  
    <div id="footerblack">
    </div>

</body>
</html>


Thanks for any help,
Kevin
Go to the top of the page 
 
  + Quote Post
 
 Start new topic
Replies
prixat
post Aug 2 2008, 11:35 PM
Post #2


Member
**

Group: Members
Posts: 58
Joined: 1-May 08
Member No.: 23,512
Hi Kevin

I modified your code but not using 3 columns:

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>

body{
    background-color:#777777;
    margin:0 0;
    padding:0 0;
    text-align: center;
}

#container {
    height: auto;
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}
#headerblack{
background-color:#000000;
height:50px;
}

#headerwhite{
background-color:#ffffff;
height:50px;
border:2px black solid;
}

#middlearea {
    height: 400px;
    background-color: #000000;
}

#sideleft{
    background-color:#000000;
    width:20px;
    height:auto;
    background-repeat:no-repeat;
    float: left;
}

#content{
    background-color:#555555;
    height:100%;
    background-repeat:no-repeat;
    margin-right: 3%;
    margin-left: 3%;
    width: 94%;
    text-align: left;
}
#whitebox {
    background-color: #FFFFFF;
    height: 180px;
    width: 150px;
}
#sideright{
    background-color:#000000;
    width:20px;
    height:200%;
    background-repeat:no-repeat;
    float: right;
}

#navbar{
background-color:#ffffff;
width:100px;
height:150px;
border: 2px black solid;
left:100px;
background-repeat:no-repeat
}

#footerwhite{
background-color:#ffffff;
height:25px;
margin:0;
padding:0;
border:2px black solid;
background-repeat:no-repeat
}

#footerblack{
background-color:#000000;
height:25px;
margin:0;
padding:0;
background-repeat:no-repeat
}

</style>
</head>
<body>
  <div id="container">
    <div id="headerblack"></div>
    <div id="headerwhite"></div>
  
  <div id="middlearea">
<!--    <div id="sideleft">left</div>-->
    <div id="content">
    <div id="whitebox">white box in content</div>
    </div><!--end content-->
<!--    <div id="sideright">right</div>-->
  </div><!--end middlearea-->
    
    <div id="footerwhite"></div>
    <div id="footerblack"></div>
</div><!--end container-->

</body>
</html>


I've commented out the 'sides' and used middelearea instead.

But if you really, really, really want to use 3 columns...

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<style>

body{
    background-color:#777777;
    margin:0 0;
    padding:0 0;
    text-align: center;
}

#container {
    height: auto;
    width: 70%;
    margin-right: auto;
    margin-left: auto;
}
#headerblack{
background-color:#000000;
height:50px;
}

#headerwhite{
background-color:#ffffff;
height:50px;
border:2px black solid;
}

#middlearea {
    height: 400px;
    background-color: #000000;
}

#sideleft{
    background-color:#000000;
    width:3%;
    height:400px;
    background-repeat:no-repeat;
    float: left;
}

#content{
    background-color:#555555;
    height:100%;
    background-repeat:no-repeat;
    width: auto;
    text-align: left;
}
#whitebox {
    background-color: #FFFFFF;
    height: 180px;
    width: 150px;
}
#sideright{
    background-color:#000000;
    width:3%;
    height:400px;
    background-repeat:no-repeat;
    float: right;
}

#navbar{
background-color:#ffffff;
width:100px;
height:150px;
border: 2px black solid;
left:100px;
background-repeat:no-repeat
}

#footerwhite{
background-color:#ffffff;
height:25px;
margin:0;
padding:0;
border:2px black solid;
background-repeat:no-repeat
}

#footerblack{
background-color:#000000;
height:25px;
margin:0;
padding:0;
background-repeat:no-repeat
}

</style>
</head>
<body>
<div id="container">
  <div id="headerblack"></div>
  <div id="headerwhite"></div>
  
  <div id="middlearea">
    <div id="sideleft"></div>
    <div id="sideright"></div>
    <div id="content">
       <div id="whitebox">white box in content</div>
    </div><!--end content-->

  </div><!--end middlearea-->
    
  <div id="footerwhite"></div>
  <div id="footerblack"></div>
</div><!--end container-->

</body>
</html>


I've still got the new middlearea div to keep things simple. and the container is to center everything.

One problem you had with either method is mixing fixed pixel widths with a percentage width.
So I made it all percentages 3%left 94%content 3%right totaling 100% width.
Go to the top of the page 
 
  + Quote Post

Posts in this topic
k.digennaro   Coding Html/css Layout. No Images.   Jul 31 2008, 08:13 PM
Trippin7464   I'm messing around with it right now, but the ...   Jul 31 2008, 09:24 PM
k.digennaro   thanks for the help tripping, lol i cant beleive i...   Jul 31 2008, 10:15 PM
prixat   Hi Kevin I noticed some convoluted nesting in tha...   Aug 1 2008, 09:20 AM
Trippin7464   You also have to set float left and float right. ...   Aug 2 2008, 02:49 AM
k.digennaro   thanks trip, that helped alot, im having a problem...   Aug 2 2008, 08:19 PM
prixat   Hi Kevin I modified your code but not using 3 col...   Aug 2 2008, 11:35 PM
halwits   I think its a very interesting and nice code so th...   Aug 18 2011, 05:57 AM
Trippin7464   I'm assuming he wants sidebars otherwise he wo...   Aug 3 2008, 09:11 AM
k.digennaro   thanks guys, @prixat: thanks for the tips ill have...   Aug 3 2008, 07:35 PM
timpane   I believe he's just seeking to conceive a layo...   Oct 3 2011, 04:28 PM

« Next Oldest · HTML and CSS · Next Newest »
 
 Reply to this topic Start new topic
left
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
 right
0 Members:
left
Forum Jump
 right
 
Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

Lo-Fi Version Time is now: 24th May 2013 - 06:56 PM
Powered By IP.Board 2.2.2 © 2013  IPS, Inc.