Zymic Webmaster Forums > Coding Html/css Layout. No Images.

Full Version: Coding Html/css Layout. No Images.

Zymic Webmaster Forums > Web Design & Development > Client Side Scripting > HTML and CSS

k.digennaro

Jul 31 2008, 08:13 PM

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

Andrew

Jul 31 2008, 09:24 PM

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.

k.digennaro

Jul 31 2008, 10:15 PM

thanks for the help tripping, lol i cant beleive i spelled height wrong lol

prixat

Aug 1 2008, 09:20 AM

Hi Kevin

I noticed some convoluted nesting in that middle area.

CODE

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

Andrew

Aug 2 2008, 02:49 AM

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>

k.digennaro

Aug 2 2008, 08:19 PM

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;
}

prixat

Aug 2 2008, 11:35 PM

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="content">
    <div id="whitebox">white box in content</div>
    </div>

  </div>

    <div id="footerwhite"></div>
    <div id="footerblack"></div>
</div>

</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>

  </div>

  <div id="footerwhite"></div>
  <div id="footerblack"></div>
</div>

</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.

Andrew

Aug 3 2008, 09:11 AM

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

k.digennaro

Aug 3 2008, 07:35 PM

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.

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

halwits

Aug 18 2011, 05:57 AM

I think its a very interesting and nice code so thanks for giving us these code.

timpane

Oct 3 2011, 04:28 PM

I believe he's just seeking to conceive a layout without content for practice. If I'm incorrect Kevin delight correct me

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.