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
  Reply to this topic Start new topic
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
Andrew
post Jul 31 2008, 09:24 PM
Post #2


Hosting Abuse Staff
*******

Group: Moderators
Posts: 2,933
Joined: 14-February 08
From: Fort Myers FL, USA
Member No.: 10,089
I'm messing around with it right now, but the one thing I noticed is your #content area has height misspelled (in the css). i'll post back after I mess with it.
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Jul 31 2008, 10:15 PM
Post #3


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
thanks for the help tripping, lol i cant beleive i spelled height wrong lol
Go to the top of the page 
 
  + Quote Post
prixat
post Aug 1 2008, 09:20 AM
Post #4


Member
**

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

I noticed some convoluted nesting in that middle area.

CODE
    <div id="sideleft">
    <div id="content">
    <div id="sideright">
  </div>
    </div>
    </div>


you've got the sideright inside the content and the content inside the sideleft.

you could simplify that with an extra div (I've called it middlearea):

CODE
<div id="middlearea">
   <div id="sideleft"></div>
   <div id="content"></div>
   <div id="sideright"></div>
</div>end middlearea


If you don't actually want any content in the sides you can remove them completely:

CODE
<div id="middlearea">
   <div id="content"></div>
</div>end middlearea


and use the middlearea div to give the appearance of two side areas
Go to the top of the page 
 
  + Quote Post
Andrew
post Aug 2 2008, 02:49 AM
Post #5


Hosting Abuse Staff
*******

Group: Moderators
Posts: 2,933
Joined: 14-February 08
From: Fort Myers FL, USA
Member No.: 10,089
You also have to set float left and float right.

But I still couldn't figure it out.

So here is a site that has it done for you! lmao
http://www.glish.com/css/2.asp

I edited it to make it look like what you had going:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html><head><title>glish.com : CSS layout techniques : 3 columns, all fluid</title>

<style type="text/css">
@import "all.css"; /* just some basic formatting, no layout stuff */

body {
margin:10px 10px 0px 10px;
padding:0px;
color: #99CC33;
background: #000099;
}

#mainright {
width:33%;
float:left;
background:#000000;
padding-bottom:10px;
}

#maincenter {
width:34%;
float:left;
background:#555555;
padding-bottom:10px;
}

#mainleft {
width:33%;
float:left;
background:#000000;
padding-bottom:10px;
}

#banner {
background:#000000;
padding: -2px;
border:2px white solid;
}

p,h1,pre {
margin:0px 10px 10px 10px;
}

h1 {
font-size:14px;
padding-top:10px;
}

#mainright p { font-size:10px}
#banner h1 { margin:0px; padding:10px}

</style>
</head><body>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>

<div id="mainleft">
<h1>mainleft</h1>
<pre>#mainleft {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p class="greek">
Marketing teams input produce cross purposing in view of goal alignments due to knowlege paucity, necessitating workflow education and orientation. Media sourcing as an acquistion strategy is counterproductive in a internet environment in virtual component methodology. Imaging through ideals rather than real world branding, is a perilous undertaking with negative results. Branding strategies generating motion as activity without reproducible results is a ultimately futile effort if left in place.
</p>
</div>

<div id="maincenter">
<h1>maincenter</h1>
<pre>#maincenter {
width:34%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p>A much simpler and potentially more useful technique that then <a class="sitelinksredorange layout" href="8.asp">4 column technique</a> using float:left instead of position:absloute. It suffers from needing percentage widths for each column, and from potential column wrapping when the browser window is narrowed.</p>
<p><strong>Scroll down for the source.</strong></p>
<p class="greek">Enterprise engenderment accelerates initiative platforms, reducing staffing components, integration of technical accessibility, resulting in bottom line pluralisms, benefit-wise. Incidental re-sizing staff requirements through attrition can be accelerated by paridigm shifts and focusing on core suitability and cross-training. </p>
</div>

<div id="mainright">
<h1>mainright</h1>
<pre>#mainright {
width:33%;
float:left;
background:#fff;
padding-bottom:10px;
}</pre>
<p>
This page is part of <a href="home.asp">CSS Layout Techniques</a>, a resource for web developers and designers.
</p>
<p>
Other Layout Techniques:<br/>
<a href="7.asp">3 columns, the holy grail</a><br/>
<a href="9.asp">2 columns, ALA style</a><br/>
<a href="8.asp">4 columns, all fluid</a><br/>
<a href="2.asp">3 columns, all fluid </a><br/>
<a href="3.asp">static width and centered</a><br/>
<a href="1.asp">nested float</a><br/>
</p>
<p>
Does it <a href="http://validator.w3.org/check?uri=http://www.glish.com/css/2.asp?noSRC=true">validate</a>?
</p>

</div>
<div style="clear:both;"></div>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>
<div id="banner"><h1><a href="home.asp">LAYOUT TECHNIQUES</a>: 3 columns, all fluid</h1></div>

</body>
</html>
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Aug 2 2008, 08:19 PM
Post #6


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
thanks trip, that helped alot, im having a problem though, when I add padding to this code it streches out the image. Screen shot below, look at the right colum.

CODE
#sideright{
background-color:#000000;
width:20px;
height:75%;
background-repeat:no-repeat;
float:right;
padding-left:200px;
}
Go to the top of the page 
 
  + Quote Post
prixat
post Aug 2 2008, 11:35 PM
Post #7


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
Andrew
post Aug 3 2008, 09:11 AM
Post #8


Hosting Abuse Staff
*******

Group: Moderators
Posts: 2,933
Joined: 14-February 08
From: Fort Myers FL, USA
Member No.: 10,089
I'm assuming he wants sidebars otherwise he wouldn't have them there, I think he's just trying to create a layout without content for practice. If I'm wrong Kevin please correct me
Go to the top of the page 
 
  + Quote Post
k.digennaro
post Aug 3 2008, 07:35 PM
Post #9


Outrageously Uber Ninja
*******

Group: Members
Posts: 840
Joined: 30-March 08
From: Cincinnati, OH
Member No.: 16,073
thanks guys,
@prixat: thanks for the tips ill have to study those codes and see what i learn

@trippin, your correct im just trying to work with differnt simple layouts right now to learn how things work a little better. I'm one of those people that learn best by trial and error. smile.gif

Ive actaully applied what ive learned and coded this template for my site, the design i did a while ago i just didnt know how to code it then. I think the code is good, except i think i need to wrap it with a container to keep it centered, because i noticed on my parents computer the design wasn't centered, but on mine its perfect. my page smile.gif
Go to the top of the page 
 
  + Quote Post
halwits
post Aug 18 2011, 05:57 AM
Post #10


Member
**

Group: Members
Posts: 42
Joined: 29-July 11
Member No.: 200,941
I think its a very interesting and nice code so thanks for giving us these code.
Go to the top of the page 
 
  + Quote Post
timpane
post Oct 3 2011, 04:28 PM
Post #11


Newbie
*

Group: Members
Posts: 24
Joined: 3-August 11
Member No.: 201,716
I believe he's just seeking to conceive a layout without content for practice. If I'm incorrect Kevin delight correct me
Go to the top of the page 
 
  + Quote Post
« 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: Standard · Switch to: Linear+ · Switch to: Outline

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

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