question about left column and background colour

15 replies [Last post]

Sat, 2012-07-07 12:20

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Hi all

This is quite a generic question, so I havn't put any code in. Basically, my page consists of a left column, main content column and a footer (that spans both). My question is I have a background colour in the left column that I want the full length of the page, but it is the main content div that has all the info and is determining the height . This changes from page to page depending on how much content I have. What I want is the left column to be the same height as the right (from page to page) at all times basically so you can see the colour. Is there a way to do this without loading it up with divs to fill the sidebar or determining a height.

Hopefully that dosn't seem like a confusing question. I have seen it in heaps of websites, have a left sidebar navigation, mostly containing links, scroll down and there is lots of blank on that sidebar until it gets to the end of the main content, as the main content is determining the length of the page.

I just cant figure out how to do it!!!

Cheers
Fiona

Tags:

CSS Layouts

Sat, 2012-07-07 12:21

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Sorry, its not live yet so I

Sorry, its not live yet so I can't give you an example...

Sat, 2012-07-07 12:29

Tony

Offline

Moderator

Brisbane

Last seen: 1 week 8 hours ago

Brisbane

Timezone: GMT+10

Joined: 2003-03-12

Posts: 5344

Points: 2965

Hi FionaE, You don't need the

Hi FionaE,
You don't need the background image on the columns, it can be on the body or another element that contains the columns.
That way it will look as if the columns are all the same length.

The technique is known as faux columns

Sat, 2012-07-07 21:26

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Thanks Tony!

I will investigate that! I havnt been able to figure it out, apart from adding another div with a massive top and bottom margin to fill the content!

Thanks
Fiona

Wed, 2012-07-11 12:24

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

faux column not working!

Hi there

Me again I tried the faux column, have a image that is the width of the page in the "maincontentcols" div which contains both my main content the the sidebar. Its repeated on the Y-axis but its not working. Tried putting a clear both on that container, but nada. Can someone please look at the code and see if they know whats going on here. I can't seem to get it to work.

Sorry about all the divs, its roughly a 20 page site (not live yet) and one of the pages is a bit complex.

Thanks everyone, I'm learning with all this as I go, so any help will be appreciated!

Also, just another question, is IE6 important? My site seems to be working well cross-browser in adobe browser lab, but IE6 - wow - what a mess!

Here is my HTML code and my css I've highlighted the CSS "maincontentcols" which contains the faux image.

Cheers
Fiona

<!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" />
<title>Untitled Document</title>
<link href="petportraits2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
</style>
</head>
 
<body>
<div id="containerall">
  <div id="header">
    <div id="sidebarheader">
    <div id="Logo"></div></div>
    <div id="NavHeader">
      <div id="Navigation"> <a href="homepage.html"class="home"></a> <a href="Gallery.html"class="gallery"></a> <a href="SizePrice.html"class="sizeprice"></a> <a href="Commissions.html"class="commissions"></a> <a href="Photography.html"class="photography"></a> <a href="AboutMe.html"class="aboutme"></a> <a href="Contact.html"class="contact"></a></div>
    </div>
  </div>
  <div id="MainContentCols">  
  <div id="sidebar"><img src="Contact/Contact-heading.png" width="115" height="20" />
    <p>Here you can see how an oil painting develops from start to finish.</p>
 
<p>From a blank piece of canvas to a finished piece of art work, and all the hours inbetween.</p>
</div>  
<div id="maincontent">Please don't hesitate to contact me any time if you would like to place an order or have any questions or comments. I can be contacted either my telephone or email.
    <p>Email:</p>
    <p>[email protected]</p>
    <p>Telephone:</p>
    <p>National: </p>
    <p>International:</p>
    <p>Mobiile:</p>
    <p>If you are unable to reach me, please leave a message and I will get back to you as soon as possible.</p>
    <p></div>
  </div>
  <div id="footer">
    <div id="sidebarfooter">
      <div id="copyrighttext"><p class="pinktext">COPYRIGHT INFORMATION</p>
      All artwork is protected under copyright © 2012 by Fiona Elrington. Do not copy.</div>
    </div>
    <div id="maincontentfooter">
      <div id="quicklinks">
        <p class="pinktext">QUICK LINKS</p>
        About Me<br />
        Sizes and Prices<br />
        Gallery<br />
        About Commissions<br />
        Photography Tips<br />
        <br />
      </div>
      <div class="floatright" id="contact">
        <p class="pinktext">CONTACT ME</p>
        Fiona Elrington<br />
        Telephone: 027 4443875<br />
        Email: </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%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%22%3e%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script><p><br />
      </div>
    </div>
  </div>
</div>
 
</body>
</html>

@charset "UTF-8";
/* CSS Document */
 
/* Rollover pink #ba666d
   Visited pink #dfa5ad 
   text pink efced2*/
 
html, body {
	margin: 0px;
	padding: 0px;
}
 
 
/* ^2 --------------- limited-scale reset ---------------- */
h1, h2, h3, h4, h5, h6, p, div, ul, li {
	margin: 0;
	padding: 0;
	border: 0px;
}
 
 
h1 {
	font-size:1em;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-variant: normal;
	color: #000;
	text-align: left;
	text-transform: uppercase;
}
 
p {
  margin: 1em 0;
}
ul {
    list-style-type: none;
}
h2 {
	font-size:1em;
	font-weight:bold;
	font-family:Arial, Arial, Helvetica, sans-serif, 
	text-transform: capitalize;
	font-family: Arial, Helvetica, sans-serif;
	font-variant: normal;
	font-style: normal;
}
#containerall {
	width: 980px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	position: relative;
	overflow: hidden;
}
#sidebarheader {
	background-color: #000;
	float: left;
	width: 264px;
	margin-left: 25px;
	overflow: auto;
}
#header {
	float: left;
	width: 980px;
}
#Logo {
	background-color: #000;
	background-image: url(logo2.png);
	background-repeat: no-repeat;
	float: left;
	width: 236px;
	margin-left: 14px;
	height: 102px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #898989;
	margin-top: 30px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #898989;
}
#NavHeader {
	float: left;
	width: 640px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #898989;
	border-bottom-color: #898989;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 30px;
	height: 102px;
	overflow: auto;
}
#Navigation {
	float: left;
	width: 640px;
	margin-top: 70px;
}
<strong>#MainContentCols {
	float: left;
	width: 980px;
	background-image: url(faux-image.png);
	background-repeat: repeat-y;</strong>
}
#sidebar {
	float: left;
	width: 224px;
	margin-left: 25px;
	background-color: #000;
	background-image: url(left-column.png);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #ebebeb;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 40px;
}
#maincontent {
	float: left;
	width: 640px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.4em;
	font-weight: normal;
	margin-top: 40px;
	margin-right: 20px;
	margin-left: 20px;
	color: #464646;
	overflow: auto;
}
#originalsection {
	float: left;
	width: 637px;
	padding-top: 20px;
	padding-right: 10px;
}
#size {
	float: left;
	width: 200px;
}
#price {
	float: left;
	width: 250px;
}
#moresizetext {
	float: left;
	width: 610px;
}
#differentsizes {
	float: left;
	width: 200px;
	margin-top: 20px;
}
#differentprices {
	float: left;
	width: 110px;
	margin-top: 20px;
}
#pricetext {
	float: left;
	width: 280px;
	margin-top: 20px;
	margin-right: 30px;
	padding-top: 3px;
}
#footer {
	clear: both;
}
#sidebarfooter {
	float: left;
	width: 264px;
	background-color: #000;
	padding-bottom: 50px;
	margin-left: 25px;
	overflow: auto;
}
#maincontentfooter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #333;
	float: left;
	width: 640px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #898989;
	overflow: hidden;
	margin-right: 20px;
	margin-left: 20px;
}
#quicklinks {
	float: left;
	width: 313px;
}
#contact {
	float: right;
	width: 324px;
	text-align: right;
}
#copyrighttext {
	float: left;
	width: 236px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #898989;
	margin-left: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .7em;
	color: #ebebeb;
}
a.home {
	background-image: url(Home/new%20links/home-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 39px;
}
a.photography {
	background-image: url(Home/new%20links/photo-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 125px;
}
a.gallery {
	background-image: url(Home/new%20links/gallery-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 70px;
}
a.sizeprice {
	background-image: url(Home/new%20links/size-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 115px;
}
a.commissions {
	background-image: url(Home/new%20links/comm-link.png);
	float: left;
	height: 13px;
	width: 135px;
	background-repeat: no-repeat;
}
a.aboutme {
	background-image: url(Home/new%20links/about-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 75px;
}
a.contact {
	background-image: url(Home/new%20links/contact-link.png);
	float: left;
	height: 13px;
	width: 80px;
}
.floatright {
	text-align: right;
}
.pinktext {
	color: #BA666D;
}
.clearboth {
	clear: both;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.testimonial {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8.5pt;
	font-style: italic;
}
.list {
	line-height: 2em;
}

Fri, 2012-07-13 02:01

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

I think part of your problem

I think part of your problem may lie with your having used a piecemeal approach to setting styles. I suggest you back up a bit and apply your rulesets top-down. Let the detail stuff be the last thing you do after all the layout is done.

I changed some of your markup to more closely say what the content is, e.g a list of links was re-marked as a list; headings were marked as such, and normal text was marked as p elements. Proper semantic and structural markup will go a long way toward your properly visualizing the structure of the document. The div tag is for grouping block elements within a given context. In my opinion, there is always a better element tag for raw content than the div.

You didn't upload the images you used, so mine may not complement your intentions. Do compare my version of the page line by line to your own. I scattered changes and if I attempted to enumerate them, I'd surely leave some out. So, I leave it to you.

<!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" />
    <title>Untitled Document</title>
    <link href="petportraits2.css" 
	  rel="stylesheet" 
	  type="text/css" />
    <style type="text/css">
      body {
        margin: 0;
        padding: 0;
        }
 
      h1 {
	font-size:1em;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	font-variant: normal;
	color: #000;
	text-align: left;
	text-transform: uppercase;
        }
 
      p {
        margin: 1em 0;
        }
 
      ul {
        list-style-type: none;
        padding: 0;
        }
 
      h2 {
	font-size:1em;
	font-weight:bold;
	font-family:Arial, Arial, Helvetica, sans-serif, 
	text-transform: capitalize;
	font-family: Arial, Helvetica, sans-serif;
	font-variant: normal;
	font-style: normal;
        }
 
      #containerall {
	width: 980px;
	margin: 0 auto;
	position: relative;
        }
 
      #sidebarheader {
	background-color: #000;
	float: left;
	width: 264px;
	margin-left: 25px;
	overflow: auto;
        }
 
      #header {
        overflow: hidden;
        }
 
#Logo {
	background-color: #000;
	background-image: url(logo2.png);
	background-repeat: no-repeat;
	float: left;
	width: 236px;
	margin-left: 14px;
	height: 102px;
	border-bottom-width: thin;
	border-bottom-style: solid;
	border-bottom-color: #898989;
	margin-top: 30px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #898989;
}
#NavHeader {
	float: left;
	width: 640px;
	border-top-width: thin;
	border-bottom-width: thin;
	border-top-style: solid;
	border-bottom-style: solid;
	border-top-color: #898989;
	border-bottom-color: #898989;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 30px;
	height: 102px;
	overflow: auto;
}
      #Navigation {
	float: left;
	width: 640px;
	margin-top: 70px;
        }
 
      #MainContentCols {
	background: transparent url(faux-image.png) 25px 0 repeat-y;
        overflow: hidden;
        }
 
      #sidebar {
	float: left;
	width: 224px;
	margin-left: 25px;
        margin-right: 20px;
	background-color: #000;
	background-image: url(left-column.png);
	background-repeat: no-repeat;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	line-height: 1.5em;
	color: #ebebeb;
	padding-right: 20px;
	padding-left: 20px;
	padding-top: 40px;
        }
 
      #maincontent {
	color: #464646;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	font-weight: normal;
	line-height: 1.4em;
	margin: 40px 20px 0;
        overflow: hidden;
        }
 
#originalsection {
	float: left;
	width: 637px;
	padding-top: 20px;
	padding-right: 10px;
}
#size {
	float: left;
	width: 200px;
}
#price {
	float: left;
	width: 250px;
}
#moresizetext {
	float: left;
	width: 610px;
}
#differentsizes {
	float: left;
	width: 200px;
	margin-top: 20px;
}
#differentprices {
	float: left;
	width: 110px;
	margin-top: 20px;
}
#pricetext {
	float: left;
	width: 280px;
	margin-top: 20px;
	margin-right: 30px;
	padding-top: 3px;
}
#footer {
	clear: both;
}
#sidebarfooter {
	float: left;
	width: 264px;
	background-color: #000;
	padding-bottom: 50px;
	margin-left: 25px;
	overflow: auto;
}
#maincontentfooter {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.7em;
	color: #333;
	float: left;
	width: 640px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #898989;
	overflow: hidden;
	margin-right: 20px;
	margin-left: 20px;
}
#quicklinks {
	float: left;
	width: 313px;
}
#contact {
	float: right;
	width: 324px;
	text-align: right;
}
#copyrighttext {
	float: left;
	width: 236px;
	border-top-width: thin;
	border-top-style: solid;
	border-top-color: #898989;
	margin-left: 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: .7em;
	color: #ebebeb;
}
a.home {
	background-image: url(Home/new%20links/home-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 39px;
}
a.photography {
	background-image: url(Home/new%20links/photo-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 125px;
}
a.gallery {
	background-image: url(Home/new%20links/gallery-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 70px;
}
a.sizeprice {
	background-image: url(Home/new%20links/size-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 115px;
}
a.commissions {
	background-image: url(Home/new%20links/comm-link.png);
	float: left;
	height: 13px;
	width: 135px;
	background-repeat: no-repeat;
}
a.aboutme {
	background-image: url(Home/new%20links/about-link.png);
	background-repeat: no-repeat;
	float: left;
	height: 13px;
	width: 75px;
}
a.contact {
	background-image: url(Home/new%20links/contact-link.png);
	float: left;
	height: 13px;
	width: 80px;
}
.floatright {
	text-align: right;
}
.pinktext {
	color: #BA666D;
}
.clearboth {
	clear: both;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.testimonial {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8.5pt;
	font-style: italic;
}
.list {
	line-height: 2em;
}
 
    </style>
  </head>
 
  <body>
    <div id="containerall">
      <div id="header">
	<div id="sidebarheader">
	  <div id="Logo"></div>
	</div>
 
	<div id="NavHeader">
	  <div id="Navigation"> <a href="homepage.html"class="home"></a> <a href="Gallery.html"class="gallery"></a> <a href="SizePrice.html"class="sizeprice"></a> <a href="Commissions.html"class="commissions"></a> <a href="Photography.html"class="photography"></a> <a href="AboutMe.html"class="aboutme"></a> <a href="Contact.html"class="contact"></a>
	  </div>
	</div>
      </div>
 
      <div id="MainContentCols">  
	<div id="sidebar"><img src="Contact/Contact-heading.png" width="115" height="20" />
	  <p>Here you can see how an oil painting develops from start to finish.</p>
 
	  <p>From a blank piece of canvas to a finished piece of art work, and all the hours inbetween.</p>
	</div>
 
	<div id="maincontent">
	  <p>Please don‘t hesitate to contact me any time if you would
	    like to place an order or have any questions or
	    comments. I can be contacted either my telephone or
	    email.</p>
	  <p>Email:</p>
	  <p>fepetportraits@suchandsuch.co.nz</p>
	  <p>Telephone:</p>
	  <p>National: </p>
	  <p>International:</p>
	  <p>Mobile:</p>
	  <p>If you are unable to reach me, please leave a message and
	    I will get back to you as soon as possible.</p>
	</div>
      </div>
      <div id="footer">
	<div id="sidebarfooter">
	  <div id="copyrighttext">
	    <h3 class="pinktext">COPYRIGHT INFORMATION</h3>
	    <p>All artwork is protected under copyright © 2012 by
	      Fiona Elrington. Do not copy.</p>
	  </div>
	</div>
 
	<div id="maincontentfooter">
	  <div id="quicklinks">
            <h3 class="pinktext">QUICK LINKS</h3>
            <ul>
	      <li>About Me</li>
	      <li>Sizes and Prices</li>
	      <li>Gallery</li>
	      <li>About Commissions</li>
	      <li>Photography Tips</li>
	    </ul>
	  </div>
 
	  <div class="floatright" id="contact">
            <h3 class="pinktext">CONTACT ME</h3>
            <p>Fiona Elrington<br />
              Telephone: 027 4443875<br />
              Email: 
	    <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%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%22%3e%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script></p>
	  </div>
	</div>
      </div>
    </div>
 
  </body>
</html>

cheers,

gary

Attachment	Size
faux-image.png	277 bytes

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

Fri, 2012-07-13 11:43

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Hi Gary

Thanks for your reply! The changes you made worked (though for some reason it's done something funky to my gallery). However, I do have a few questions, because I am not quite sure why it worked!

Also, you mentioned you made changes to the markup for lists, paragraphs etc? I couldn't find any re those, just some in the CSS.

I wasn't too sure what you meant by applying rules topset down. When I built the site I built all the divs and then added the attributes to them. Do you mean the order of the css, box structure first, then text, etc etc?

I noticed you took the width off the "header" and the "maincontentcols". Both of these divs are full width and enclosed in the container, so they don't need a width?

Also I noticed you set a 25px position on the x position and a 0 for the y, and the image wasn't the width of the page? Why if you don't mind me asking? I keep reading different rules on this one.

Now the other question I had was you took the height and width and the float of the maincontent, the box that lies next to the side bar. I can understand the others, but was a bit unsure about the reason for this, as its not a full width box.

Also is it better to use element tags (like the <hl/>) instead of setting a border in the divs. If you can use element tags instead of setting it in the css should you? I think I might have a screaming case of divitis going on

Sorry for the questions, I'm just trying to get a better understanding of it so I don't repeat the same mistakes. I'll see what I can cut down in my code. I am reasonably new to this, sometimes it seems the deeper I get in, the more messy it becomes! So much to learn.

Thanks heaps for your reply by the way, I really appreciate it I hope you don't mind me picking your brains

Cheers
Fiona

Sat, 2012-07-14 04:08

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

I get questions

FionaE wrote:

Thanks for your reply! The changes you made worked (though for some reason it's done something funky to my gallery). However, I do have a few questions, because I am not quite sure why it worked!

Please do ask if you don't understand. It's silly to leave yourself confused.

Quote:

Also, you mentioned you made changes to the markup for lists, paragraphs etc? I couldn't find any re those, just some in the CSS.

Look at the footer area.

Quote:

There are two, hopefully complementary, structures to a web page; the document structure, and the visual structure. In your page the document structure reads logo, top navigation, contact info, main area, copyright notice, and footer links.

The doc structure is all about marking up each and every bit of content for what it is. When you're done, you ought to be able to open it in your browser and have it make perfect sense. That's without applying any style rules and without a single div element.

The visual structure has three rows of two columns each. This is where the top-down starts.

First, there is a wrapper div around the whole page to let us set its size and placement in the viewport. Next is a div around each of the three rows. Finally we wrap each column in a div. We now have our contexts for styling the page.

First set the wrapper rules. This is a key context. Since a block element natively expands to take in all available width, we don't need to get fussy with them. All three rows do the same thing, so a single set of rules covers most of the bases. These are major contexts, so it's usually a good idea to give each an id. The same applies to all sidebar contexts and their sibling main areas. A single class for each column will do. A few rules, and your page is laid out. Each box now acts a context for its content and can be further styled as required.

Always apply styles as high up the cascade as possible. If you want the font to be arial/helvetica/sans-serif, put it on the body element, and every element will inherit. Only when you want something different for some element or group do you need to create a new font rule to apply within that context.

Quote:

I noticed you took the width off the "header" and the "maincontentcols". Both of these divs are full width and enclosed in the container, so they don't need a width?

It is nearly always a Good Thing® to avoid setting an explicit width or height without compelling reason.

Quote:

Also I noticed you set a 25px position on the x position and a 0 for the y, and the image wasn't the width of the page? Why if you don't mind me asking? I keep reading different rules on this one.

The column was set in from the edge of the parent element, which owns the bg image. Without moving the image in also, it wouldn't line up with the column. For a fixed width column and/or parent, there was no need to make the image any larger.

Quote:

A non-float sibling to a float will take all the available width, sliding under the float (it doesn't know the float, which is not in the flow, is there). Its inline descendents are aware of the float and respect its space. This usually what we want, as the inline content will wrap around the float. In this case, we need to create a new block formatting context, which we do by setting the overflow to hidden (or auto). Now the block element is aware of the float and does not allow wrapping. The element will automagically change size as needed to fit.

Quote:

Abso-posi-lutely! On semantically marking the content. Whether a border or whatever is on one element or another depends on the document and visual structural models.

A few thoughts on this page:

Do not use background images for content. If the images fail to load, there is no content. Witness your top navigation menu sans images. The logo, too. There are some image replacement methods, most of which I consider too fragile for the real world. A foreground image with alternative text should always work. Even IE gets it right, if in an ugly way. Same with Opera. For some reason, Chrome is pretty stupid, and Firefox is damned near perfect, even following applicable stye rules for the alt text.

Do mark up the menus and other lists as proper lists. A bunch of inline links is awfully hard on folks using assistive technology. Likewise much of getting around a page is by moving from heading to heading. If you don't use headings properly, you're screwing over your visitors.

I would imagine that more people wanting a portrait of their pets are at or approaching middle age and beyond than are twenty-something. For the gods' sake, don't make the fonts tiny. Go with 100% of their default size. You can squeeze the footer stuff a little, but not much of that either.

I cleaned up the code a bit more. Notice the way the logo is handled. Also, the main navigation has one of the links use a foreground image (which doesn't exist) so you can see the effect. Compare to your original with broken images. See also the various bits of text. It is my conviction that there is no good reason for an inline element to have a block sibling. For one thing, the specs do not address how that interface should work.

<!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" />
 
    <title>Untitled Document</title>
 
    <style type="text/css">
      body {
        font:  arial, helvetica, sans-serif 100%/1.4;
        margin: 0;
        padding: 0;
        }
 
      h1, h2, h3 {
	font-size: 1em;
	font-family: arial, helvetica, sans-serif;
	text-transform: uppercase;
        }
 
      h2, h3 {
        text-transform: capitalize;
        }
 
      h3 {
        margin-top: 0;
        }
 
      h3 img {
        display: block;
        }
 
      p {
        margin: 1em 0;
        }
 
      ul {
        list-style-type: none;
        padding: 0;
        }
 
      hr {
        background-color: #898989;
        border: none;
        height: 1px;
        margin: 0 0 40px;
        }
 
      #wrapper {    /* née containerall */
	background: transparent url(faux-image.png) left top repeat-y;
	margin: 0 auto;
        padding-top: 30px;
	width: 960px;
        }
 
      #header,
      #main,
      #footer {
        overflow: hidden;
        }
 
      #footer,
      #main .sidebar {
        font-size: .83em;
        }
 
      #footer h3 {
	color: #ba666d;
        }
 
      .sidebar {
	background-color: #000;
        color: #ebebeb;
	float: left;
	width: 224px;
	margin: 40px 20px 0 0;
        padding: 0 20px;
        }
 
      .maincol {
        margin-top: 40px;
        overflow: hidden;
        }
 
      #navigation {
        margin: 0;
        padding: 0;
        text-align: center;
        }
 
      #navigation li {
        display: inline-block;
        margin: 0 .5em;
        }
 
      #navigation li img {
        border: none;
        display: block;
        }
 
      #quicklinks {
	float: left;
        }
 
      #contact {
	float: right;
	text-align: right;
        }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <div id="header">
	<div class="sidebar">
	  <hr />
	  <h1><img src="logo2.png"
		   alt="logo‘s equivalent text" />
	  </h1>
	</div>
 
	<div class="maincol">
	  <hr />
 
	  <ul id="navigation"> 
	    <li><a href="homepage.html">
		<img src="home-link.png"
		     alt="Home" /></a></li> 
	    <li><a href="Gallery.html">Gallery</a></li> 
	    <li><a href="SizePrice.html">Price</a></li> 
	    <li><a href="Commissions.html">Commmissions</a></li> 
	    <li><a href="Photography.html">Photos</a></li>
	    <li><a href="AboutMe.html">About Me</a></li>
	    <li><a href="Contact.html">Contact</a></li>
	  </ul>
	</div>
      </div>
 
      <div id="main">
	<div class="sidebar">
	  <hr />
 
	  <h3>
	    <img src="Contact/Contact-heading.png" 
		 alt="Contact"
		 width="115" 
		 height="20" />
	  </h3>
 
	  <p>Please don‘t hesitate to contact me any time if you would
	    like to place an order or have any questions or
	    comments. I can be contacted either my telephone or
	    email.</p>
 
	  <ul>
	    <li>Email:</li>
	    <li>fepetportraits@suchandsuch.co.nz</li>
	    <li>Telephone:</li>
	    <li>National: </li>
	    <li>International:</li>
	    <li>Mobile:</li>
	  </ul>
 
	  <p>If you are unable to reach me, please leave a message and
	    I will get back to you as soon as possible.</p>
	</div>
 
	<div class="maincol">
	  <hr />
 
	  <p>Here you can see how an oil painting develops from start
	    to finish.</p>
 
	  <p>From a blank piece of canvas to a finished piece of art
	    work, and all the hours inbetween.</p>
	</div>
      </div>
      <div id="footer">
	<div class="sidebar">
	  <hr />
 
	  <h3>COPYRIGHT INFORMATION</h3>
 
	  <p>All artwork is protected under
	      copyright © 2012 by Fiona Elrington. Do not copy.</p>
	</div>
 
	<div class="maincol">
	  <hr />
 
	  <div id="quicklinks">
            <h3>QUICK LINKS</h3>
 
            <ul>
	      <li>About Me</li>
	      <li>Sizes and Prices</li>
	      <li>Gallery</li>
	      <li>About Commissions</li>
	      <li>Photography Tips</li>
	    </ul>
	  </div>
 
	  <div id="contact">
            <h3>CONTACT ME</h3>
            <p>Fiona Elrington<br />
              Telephone: 027 4443875<br />
              Email: 
	    <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%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%22%3e%66%65%70%65%74%70%6f%72%74%72%61%69%74%73%40%73%75%63%68%61%6e%64%73%75%63%68%2e%63%6f%6d%3c%2f%61%3e%27%29%3b'))</script></p>
	  </div>
	</div>
      </div>
    </div>
  </body>
</html>

So here's fodder for more questions; maybe.

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, 2012-07-14 09:32

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Hi Gary

Gosh, arn't you fabulous! I'll come back soon with probably more questions, just taking a look at your code and seeing if I can re put my webste together. I noticed you redid some of the divs as classes, was that because you can use them more than once and it cuts down on code?

The new code looks good. Thank you for your time in helping with this and answering my questions. I really appreciate it and will go a long way to me getting my head around this.

I did have to have a laugh at the small font though. I have a design background, large font makes me flinch. However I might have to get over that one!

Thanks again, I'll sort this out and be back!

Cheers
Fiona

Mon, 2012-07-16 13:00

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Me again, more questions...

Hi Gary

Ok, I think THINK I might have this. its taken some playing around to get the horizontal lines where I want them, but I may just have it under control....just a couple of things though.

Anyway to show the list as a horizontal list? Its viewing as one in the browser, but as a vertical list in design view in Dreamweaver. Issue is I need to move it down in line with the pet portraits. I've set a top padding on the navigation li img, but it is very disruptive in the view.

Its a bit tricky using repeated classes because of margin adjustments, and I've added an extra class for the sidebar (there is an image attached to that that I don't want repeated). I made a couple of changes as I was getting a extra spacing on the horizontal lines. I think that was just due to it being in a heading. Is there any reason for that? Reason I also ask is some of my pages (like the gallery) are image heavy and I havn't enclosed these in headings.

Something else random, the font is showing up as Arial in the design view, but not on the browser....

Here is the code again with the changes I've made! Thanks again for all your help, I really appreciate it! I've also uploaded my logo to just incase you need it...(its white and transparent)

I've also added a screenshot of what the page should look like (the top half of it anyway. The bottom is similar just without the bottom border.

webpage capture.jpg

Cheers
Fiona

<!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" />
<title>Untitled Document</title>
<link href="test.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	margin: 0;
	padding: 0;
}
</style>
</head>
 
<body>
    <div id="wrapper">
      <div id="header">
	<div class="sidebartopbottom">
	  <hr />
	  <img src="logo2.png"
	 alt="Fiona Elrington" />
	</div>
 
	<div class="maincol">
	  <hr />
 
	  <ul id="navigation"> 
	    <li><a href="homepage.html"><img src="Home/home-link.png"width="39" height="13" alt="Home" /></a></li> 
	    <li><a href="Gallery.html"><img src="Home/gallery-link.png"width="70" height="13" alt="Gallery" /></a></li> 
	    <li><a href="SizePrice.html"><img src="Home/size-link.png"width="115" height="13" alt="Sizes and Prices" /></a></li> 
	    <li><a href="Commissions.html"><img src="Home/comm-link.png" width="135" height="13" alt="Commissions" /></a></li> 
	    <li><a href="Photography.html"><img src="Home/photo-link.png" width="125" height="13" alt="Photography Tips" /></a></li>
	    <li><a href="AboutMe.html"><img src="Home/about-link.png" width="75" height="13" alt="About Me" /></a></li>
	    <li><a href="Contact.html"><img src="Home/contact-link.png" width="80" height="13" alt="Contact Me" /></a></li>
	  </ul>
	</div>
      </div>
 
      <div id="main">
	<div class="sidebar">
	  <hr />
 
	  <h3>
	    <img src="Contact/Contact-heading.png" 
		 alt="Contact"
		 width="115" 
		 height="20" />
	  </h3>
 
	  <p>Here you can see how an oil painting develops from start
	    to finish.</p>
 
	  <p>From a blank piece of canvas to a finished piece of art
	    work, and all the hours inbetween.</p>
	</div>
 
	<div class="maincol">
	  <hr />
 
	  <p>Please don't hesitate to contact me any time if you would
	    like to place an order or have any questions or
	    comments. I can be contacted either my telephone or
	    email.</p>
 
	  <ul>
	    <li>Email:</li>
	    <li>[email protected]</li>
	    <li>Telephone:</li>
	    <li>National: </li>
	    <li>International:</li>
	    <li>Mobile:</li>
	  </ul>
 
	  <p>If you are unable to reach me, please leave a message and
	    I will get back to you as soon as possible.</p>
	</div>
      </div>
      <div id="footer">
	<div class="sidebartopbottom">
	  <hr />
 
	  <h3>COPYRIGHT INFORMATION</h3>
 
	  <p>All artwork is protected under
	      copyright © 2012 by Fiona Elrington. Do not copy.</p>
	</div>
 
	<div class="maincol">
	  <hr />
 
	  <div id="quicklinks">
            <h3>QUICK LINKS</h3>
 
            <ul>
	      <li>About Me</li>
	      <li>Sizes and Prices</li>
	      <li>Gallery</li>
	      <li>About Commissions</li>
	      <li>Photography Tips</li>
	    </ul>
	  </div>
 
	  <div id="contact">
            <h3>CONTACT ME</h3>
            <p>Fiona Elrington<br />
              Telephone: 027 4443875<br />
              Email: 
 
	  </div>
	</div>
      </div>
    </div>
  </body>
</html>

  @charset "UTF-8";
/* CSS Document */
 
      body {
        font:  arial, helvetica, sans-serif 100%/1.4;
        margin: 0;
        padding: 0;
        }
 
      h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	font-size: 1em;
        }
 
      h2, h3 {
        text-transform: capitalize;
        }
 
      h3 {
        margin-top: 0;
        }
 
      h3 img {
        display: block;
        }
 
      p {
        margin: 1em 0;
        }
 
      ul {
        list-style-type: none;
        padding: 0;
        }
 
      hr {
	background-color: #898989;
	border: none;
	height: 1px;
	margin: 0;
        }
 
      #wrapper {    /* née containerall */
	background: transparent url(faux-image.png) left top repeat-y;
	margin: 0 auto;
        padding-top: 30px;
	width: 960px;
        }
 
      #header,
	  #main,
      #footer {
	overflow: hidden;
        }
 
      #footer,
      #main .sidebar {
        font-size: .83em;
        }
 
      #footer h3 {
	color: #ba666d;
        }
 
      .sidebar {
	background-color: #000;
	color: #ebebeb;
	float: left;
	width: 224px;
	background-image: url(left-column.png);
	background-repeat: no-repeat;
	margin-bottom: 0;
	margin-left: 25;
	padding-top: 40;
	padding-right: 20px;
	padding-bottom: 0;
	padding-left: 20px;
	height: 780px;
        }
.sidebartopbottom {
	background-color: #000;
	float: left;
	width: 236px;
	padding-left: 14px;
	color: #ebebeb;
	padding-right: 14px;
	margin: 0px;
	padding-bottom: 0px;
}
 
      .maincol {
	overflow: hidden;
	padding-left: 25px;
        }
 
      #navigation {
	padding: 0;
	margin: 0;
        }
 
      #navigation li {
	display: inline-block;
	margin: 0;
        }
 
      #navigation li img {
	border: none;
	display: block;
	padding-top: 60px;
	margin: 0;
        }
 
      #quicklinks {
	float: left;
        }
 
      #contact {
	float: right;
	text-align: right;
        }

Mon, 2012-07-16 18:26

#10

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Off the top of my head

In order for me, or any of the other cssc denizens, to really grok what you're doing, we really need to see the images you're using, not just a picture of the page; though that helps, too.

addendum: I see you may have tried on the logo image.

Why does the sidebar column, headed "Contact Me" not have contact info, while the main column does?

Ignore Dreamweaver. It is not a browser. It is, at best, a very expensive text editor. There are better editors available, and for free.

What do you mean by margin adjustments? There is no need for that. Even if there were, you should use the cascade in choosing your selectors, e.g. #main .sidebar {}.

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, 2012-07-16 22:44

#11

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Sorry

Its ok, I think I might have it under control. There were a few adjustments with the new code to be made, especially in relation the the hr/, but it appears to be looking the way I want it. Cross fingers it stays that way.

The margin adjustments was just in reference to where I want things placed. Pushed down a little bit etc. Where the classes are repeated it affects them all. I didn't try the #main actually. I keep forgetting its there

The contact info is in the main part of the page instead of the sidebar because that's the flow of the whole site. Sidebar has a heading, introductory paragraph, main content is on the right (though in saying that I havn't actually written the paragraph for this page yet, its copied from my development page). Probably looks a bit funny in this one because there isn't a lot of content, but this is not the case for others.

No, I know its not a browser, one bonus though, I can see what I'm doing. Is there others that do that? For Macs? I have heard that developers hate dreamweaver and that it produces a lot of messy code? Is this the case? It dosn't shorthand anything...

Also, was there any reason for the images being in a heading? And is there anyway for the list to show as a horizontal list in my design view?

Thanks again for your time you've spent on this Gary, your guidance has been invaluable, and helped me get a better understanding of it for sure!!

Cheers
Fiona

Tue, 2012-07-17 06:50

#12

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Forget about viewing your

Forget about viewing your work in DW. Always view the page in a real browser. My last time with DW was in 2002. I figured out that it was simpler to just code the damned page than to use DW; and I wrote better html. If you're going to use that application, limit yourself to the edit mode. Switch to a browser and refresh it to see the page. In Linux and Win, that's simply two keystrokes: [alt+tab], then [F5]. I am ignorant of Mac's keys.

Quote:

I didn't try the #main actually. I keep forgetting its there

That's one of the very good reasons for you to write the html yourself; you need to be familiar with the page's document structure.

Re images in headings: The logo image is treated as the top level heading by default; there doesn't appear to be another heading that applies to the page as a whole. Likewise, the contact image in the second row's sidebar is a heading; though it should probably be an h2 since there doesn't seem to be a level between that and the page heading.

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, 2012-07-17 11:02

#13

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

your not kidding

About writing the code yourself. Your footer about "a tangled wad of brain cramping confusion" appears to be my state at the moment. I think I might combine some of yours, some of mine, follow your heirachy advice and start over. Cause my grip has gone and deserted me.

I do have one more question before stop pestering you. How the hell do you write the code for a navigation list (visited etc) when its a foreground image. For example this was the home class

a.home {
background-image: url(Home/new%20links/home-link.png);
background-repeat: no-repeat;
float: left;
height: 13px;
width: 39px;
}

I tried changing it to img src, but that didn't do anything. I've also tried to find info on it but most people seem to deal with background images. Its probably something simple, but I'm more used to dealing with classes and background images when it comes to navigation than lists, and am a little unsure on how to proceed with writing the css...

These are the two images, link and roll (actually I just wanted visited, not going to bother with a rollover). If you could give me an example that would be fabulous. Then I'll leave you alone, promise!

Cheers
Fiona

Tue, 2012-07-17 14:29

#14

gary.turner

Offline

Moderator

Dallas

Last seen: 2 years 3 weeks ago

Dallas

Timezone: GMT-6

Joined: 2004-06-25

Posts: 9776

Points: 3858

Why do you want images to

Why do you want images to replace the link texts? What's wrong with text?

Here are four examples:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" 
	  content="text/html; charset=UTF-8" />
 
    <title>Test document</title>
 
    <style type="text/css">
      body {
	background-color: white;
	color: black;
	font: 100%/1.25 sans-serif;
	margin: 0;
        }
 
      p {
        font-size: 1em;
        }
 
      #wrapper {
        border: 1px solid black;
        margin: 20px auto;
        width: 90%;  
        }
 
      #nav {
        text-align: center;
        }
 
      #nav li {
        display: inline-block;
        }
 
      #nav a {
        color: pink;
        display: block;
        font-size: 13px;
        height: 13px;
        overflow: hidden;
        text-transform: uppercase;
        }
 
      #nav a:hover {
        color: black;
        }
 
      #nav a img {
        display: block;
        }
 
      #nav a:hover img {
        margin-top: -13px;
        }
 
      #nav a.hybrid {
        background-image: url("home-roll.png");
        }
 
      #nav a.hybrid:hover img {
        opacity: 0;
        }
 
      #nav a.bg {
        background: url(fiona-nav-home.png) top no-repeat;
        text-indent: -99em;
        width: 39px;
        }
 
      #nav a.bg:hover {
        background-position: bottom;
        }
 
    </style>
  </head>
 
  <body>
    <div id="wrapper">
      <ul id="nav">
	<li>
	  <a href="fiona.html">
	    <img src="fiona-nav-home.png"
		 alt="HOME" /></a>
	</li>
 
	<li>
	  <a class="text-link" 
	     href="about.html">About</a>
	</li>
 
	<li>
	  <a class="hybrid"
	     href="fiona.html">
	    <img src="home-link.png"
		 alt="HOME" /></a>
	</li>
 
	<li>
	  <a class="bg"
	     href="fiona.html">Home</a>
	</li>
 
      </ul>
    </div> <!-- end wrapper -->
  </body>
</html>

The combo image used in #s 1 and 4 is attached.

#1: Works poorly if image fails to load. Is usable if css fails.

#2: Plain text works well with or without image or css loading.

#3: A hybrid, foreground image works with or without images or css. Background fails with with failed image load.

#4: Fails with failed image load unless css also fails to load.

You're not doing anything fancy, so just use text. Besides, with text, your visitors can increase the font size to a sane value; though better if they didn't have to.

cheers,

gary

Attachment	Size
fiona-nav-home.png	718 bytes

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

Tue, 2012-07-17 21:41

#15

FionaE

Offline

Regular

New Zealand

Last seen: 10 years 31 weeks ago

New Zealand

Timezone: GMT+12

Joined: 2012-06-16

Posts: 27

Points: 31

Great!

Thanks for that Gary, you're fabulous! I'll have a play around with it. Thank you.

Cheers
Fiona

question about left column and background colour

Sorry, its not live yet so I

Hi FionaE, You don't need the

Thanks Tony!

faux column not working!

I think part of your problem

Hi Gary

I get questions

Hi Gary

Me again, more questions...

Off the top of my head

Sorry

Forget about viewing your

your not kidding

Why do you want images to

Great!

User login

Navigation