Adobe Community: First time creating CSS Layout based webpage

Currently Being Moderated

First time creating CSS Layout based webpage

Mar 16, 2010 12:51 AM

Hi all,

Just wondering what the best way is to create a CSS based layout in dreamweaver. I've done website for over tens years now but I have only ever used table based layouts as they have always done what I have needed, but the CMS I am now working with unfortunatley only uses CSS based layouts.

Any good tutorials or links would be great.

1330 Views 37 Replies Latest reply: osgood_, Mar 24, 2010 1:12 AM

Replies

Currently Being Moderated

1. TF22Raptor2,

Mar 16, 2010 12:58 AM in reply to TF22Raptor2

Report

Okay I've just found dreamweaver has some default CSS layout based templates that I will be able to play with and get used to, that's a start.

|
Mark as:
Currently Being Moderated

2. brightbelt,

Mar 16, 2010 4:39 AM in reply to TF22Raptor2

Report

Hi,
I'm using CS4 - I'm also new to CSS layouts and from what folks here recommended to me, it's better and easier for a beginner to go with a 'Fixed' template than the liquid or elastic kinds.

See this thread: http://forums.adobe.com/thread/498260?tstart=120

You may have already seen this - but make sure you look over the code in your template because DW Templates are full of comments that explain why it's set up the way it is and what certain CSS properties are doing for you etc. They are a great learning tool.

Good Luck! Frank

|
Mark as:
Currently Being Moderated

3. osgood_,

Mar 16, 2010 5:21 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

Okay I've just found dreamweaver has some default CSS layout based templates that I will be able to play with and get used to, that's a start.

Humm thats the last place you should start. The templates which come with DW are crap.

I'd cut your teeth on these first. have a look at 8 and 9. Once you get the basics you can then alter to suit your own requirements.

http://css.maxdesign.com.au/floatutorial/

|
Mark as:
Currently Being Moderated

4. TF22Raptor2,

Mar 16, 2010 3:36 PM in reply to osgood_

Report

Why does Dreamweaver always seem to provide examples, code snippets, simple javascript code for simple things like a rollover, that seems to be written by an alien?????? It appears to always be written way over complicated and never straight up easily to allow people to see what is going on, why is that?

|
Mark as:
Currently Being Moderated

5. TF22Raptor2,

Mar 16, 2010 9:19 PM in reply to TF22Raptor2

Report

This is the format of the layout I am trying to achieve. It will be a fixed width layout with liquuid height (bottom expands downward as content is added).
Is this layout achieveable in CSS? I have 3 border cells there that will use an image to repeat throughout those 3 cells.

|
Mark as:
Currently Being Moderated

6. Nancy O.,

Mar 17, 2010 12:06 PM in reply to TF22Raptor2

Report

I think you want a basic 2-column layout. Then apply a repeating background image to create the illusion of borders and equal height columns.

BEFORE FAUX COLUMNS
http://alt-web.com/TEMPLATES/3-col-fixed-layout.shtml

AFTER FAUX COLUMNS
http://alt-web.com/TEMPLATES/3-col-white-gray.shtml

Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com

|
Mark as:
Currently Being Moderated

7. Charles Bannister,

Mar 17, 2010 12:35 PM in reply to TF22Raptor2

Report

The main thing with this is knowing how to generally layout your DIVs.

First have a main DIV called wrapper or container which will have all of your divs in.

Centre this simply by setting the margin as margin:0 auto;

From there on keep document flow in mind (left to right, top to bottom) so work from the top putting your header in first etc.

Once you learn how to float and clear you pretty much have it. (look these up).

|
Mark as:
Currently Being Moderated

8. TF22Raptor2,

Mar 17, 2010 9:05 PM in reply to Charles Bannister

Report

Does the word FAUX stand for fixed column width in CSS????

|
Mark as:
Currently Being Moderated

9. Charles Bannister,

Mar 17, 2010 9:14 PM in reply to TF22Raptor2

Report

I've honestly never heard that word (faux) before, and I'm pretty good with CSS.

|
Mark as:
Currently Being Moderated

10. TF22Raptor2,

Mar 17, 2010 11:02 PM in reply to Charles Bannister

Report

Guys I'm going through the tutorail over:
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt6_03.h tml#

What does

@charset "utf-8";

* {
    margin: 0;
    padding: 0;
    border: 0;
}

nean in an externally linked css file? Its at the very top of the css file.
eg. <link href="CssFiles/twoColElsLtHdr.css" rel="stylesheet" type="text/css" />

???

|
Mark as:
Currently Being Moderated

11. TF22Raptor2,

Mar 18, 2010 1:23 AM in reply to TF22Raptor2

Report

Also guys I am trying to put a div underneath another div, despite there being a left side div that is floating left.

Heres my code. Can this be done even? All the layout I am examining none of them appear to have a div directly undereath another div like this.

<style type="text/css">


<div id="container">


<div id="leftside">
this is left side
</div>



<div id="maincontent">
this is main content


<div id="mainheader">
this is main header

</div>


</div>


</div>


</body>
</html>

|
Mark as:
Currently Being Moderated

12. osgood_,

Mar 18, 2010 2:10 AM in reply to TF22Raptor2

Report

Answer both questions:

1) * {
blah: blah;
}

Is a univeral selector. In your example its zeroing out all the default padding and margin that some tags are preset with. personally I don't use it prefering only to zero out the padding/margins on those tags in my layout that need it.

2)

Yes, its easy to set out the construction you want with css (see html/css code below). There is this myth with css layouts that they more difficult than they actually are to achieve. Think of the layout as a set of simple linear boxes where one container fits in another. It's a bit like building with lego.

<!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 {
height:100%;
background-image: url(images/apgm_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #1d3c18;
margin:0;
padding: 0;
}
#container {
width: 1000px;
}
#leftside {
width: 200px;
float: left;
}
#rightside {
float: left;
width: 800px;
}
</style>
</head>

<body>
<div id="container">
<div id="leftside">This is left side</div>
<div id="rightside">
<div id="mainContent">This is main content</div>
<div id="mainHeader">This is main header</div>
</div>
</div>
</body>
</html>

|
Mark as:
Currently Being Moderated

13. TF22Raptor2,

Mar 18, 2010 2:53 AM in reply to osgood_

Report

Hi osgood thanks for showing me that, how do I get your new code to be centered on the page and for the leftside dive to expand past the bottom of the first main div? At the moment the left side div expands to the start of the second div, not all the way to the bottom of it.

Yeah I can see how doing pages like this will have its benefits, but its just taking me a while to get my head around all these new terms float: clear: relative positioning: overflow: wrappers: etc etc etc when I've been so used to tables for a good 10 years. I'm a pixel my pixel designer and don't really do too many flexible/expandable/liquid website designs so the tables method served my needs over all this time. Hopefully after a bit of practice it will all sink in.

|
Mark as:
Currently Being Moderated

14. osgood_,

Mar 18, 2010 3:28 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

Hi osgood thanks for showing me that, how do I get your new code to be centered on the page
Add margin: 0 auto; plus overflow: hidden; to the 'container' css selector as shown below. margin: 0 auto; centers the design horizontally in the browser window whilst overflow: hidden; makes sure the 'container' wraps itself around the 'floated' <divs> inside of it. (which you'll need for the other explanation).

#container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
}

and for the leftside dive to expand past the bottom of the first main div? At the moment the left side div expands to the start of the second div, not all the way to the bottom of it.
The leftside <div> will expand all the way down if you put more text in it. However if you have less content in it than the <divs> on the right side it wont. To overcome this issue you need to create a 'faux' column background image if you want a background colour to go all the way to the bottom and match with the rightside <div>. Attach this repeating image to the 'container' <div> as a background (see css below)

#container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
background-image: url(images/yourBg.gif);
background-repeat: repeat-y;
}

|
Mark as:
Currently Being Moderated

15. TF22Raptor2,

Mar 18, 2010 3:50 AM in reply to osgood_

Report

What does this word "faux" mean exactly?

|
Mark as:
Currently Being Moderated

16. osgood_,

Mar 18, 2010 4:01 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

What does this word "faux" mean exactly?
It means 'fake', 'false' You have to fake the column depth by using a repeating background image if you want them to be all the same. Css cannot do this yet like tables can.

http://www.alistapart.com/articles/fauxcolumns/

You can use javascript as well to accomplish this.

http://www.projectseven.com/tutorials/css/pvii_columns/

|
Mark as:
Currently Being Moderated

17. John Waller,

Mar 18, 2010 3:58 AM in reply to TF22Raptor2

Report

Faux is French for false or fake.

The trick gives the illusion of 2 equal height columns, side by side, both partially filled with text..

In reality, you have two <div>s of text finishing wherever the text in each <div> finishes, with a background image faking the look of side by side, equal height columns.

|
Mark as:
Currently Being Moderated

18. TF22Raptor2,

Mar 18, 2010 8:03 PM in reply to John Waller

Report

osgood I am trying to now place a footer at the bottom on thge leftside div and obviosuly I want the left side div to fill to the footer and the right side div to also meet/fill the bottom of the footer.

It's proving rather difficult. (Have tried floating etc)

|
Mark as:
Currently Being Moderated

19. TF22Raptor2,

Mar 18, 2010 8:07 PM in reply to TF22Raptor2

Report

Ok just answered my own question:
clear: both;

and it was rather simple!

|
Mark as:
Currently Being Moderated

20. TF22Raptor2,

Mar 18, 2010 8:37 PM in reply to TF22Raptor2

Report

But now trying to vertically center a line of text inside a div, that has got me boggled!!! Any help would be great

|
Mark as:
Currently Being Moderated

21. TF22Raptor2,

Mar 18, 2010 8:47 PM in reply to TF22Raptor2

Report

line-height: with a value the same size as your div seems to have got it, so many little tricks you need to learn to do basic stuff in CSS!!! Arh!

|
Mark as:
Currently Being Moderated

22. TF22Raptor2,

Mar 19, 2010 12:17 AM in reply to osgood_

Report

osgood_ wrote:

The leftside <div> will expand all the way down if you put more text in it. However if you have less content in it than the <divs> on the right side it wont. To overcome this issue you need to create a 'faux' column background image if you want a background colour to go all the way to the bottom and match with the rightside <div>. Attach this repeating image to the 'container' <div> as a background (see css below)

#container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
background-image: url(images/yourBg.gif);
background-repeat: repeat-y;
}

osgood yes I can see where this would have its purpose, but what about where my left hand side colum needs an image at the very bottom of it????

In the past I would simply vertical align the image to the bottom and have a BG image to fill the rest. With this CSS way for what ever reason my left hand side column does not reach to the length of the other to divs to the right, so I have a very annoying (blank) space on the end of it where it doesnt reach to the length of the others. (So what you were saying by using a bg to fake it won't work, because I need that very bottom image (its a design element) to be at the very bottom.

Any other ways around it for what I am trying to achieve??? This CSS is turning into a real pain!

|
Mark as:
Currently Being Moderated

23. osgood_,

Mar 19, 2010 12:59 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

osgood_ wrote:

The leftside <div> will expand all the way down if you put more text in it. However if you have less content in it than the <divs> on the right side it wont. To overcome this issue you need to create a 'faux' column background image if you want a background colour to go all the way to the bottom and match with the rightside <div>. Attach this repeating image to the 'container' <div> as a background (see css below)

#container {
width: 1000px;
margin: 0 auto;
overflow: hidden;
background-image: url(images/yourBg.gif);
background-repeat: repeat-y;
}

osgood yes I can see where this would have its purpose, but what about where my left hand side colum needs an image at the very bottom of it????

In the past I would simply vertical align the image to the bottom and have a BG image to fill the rest. With this CSS way for what ever reason my left hand side column does not reach to the length of the other to divs to the right, so I have a very annoying (blank) space on the end of it where it doesnt reach to the length of the others. (So what you were saying by using a bg to fake it won't work, because I need that very bottom image (its a design element) to be at the very bottom.

Any other ways around it for what I am trying to achieve??? This CSS is turning into a real pain!
Without seeing the code which you are working with to date I can't say. But to get an image to stay at the bottom of your left hand side column you would have to use another background-image positioned at the bottom. This may possibly involve introducing another <div> if there is not one which is free to use for this purpose.

Tableless css layouts are by no means perfect, they can't do a minority of things that tables could do very easily. However I personally think the benefits outweight the disadvantages and it may mean you need to rethink some design stragegy.

|
Mark as:
Currently Being Moderated

24. TF22Raptor2,

Mar 19, 2010 7:29 PM in reply to osgood_

Report

Hi Osgood thanks for all this help your a god send, I'm also still having some difficult vertically centering a line of text inside a div. I am trying to get my text into the middle, heres what I have.

#footer {
padding: 0;
background-image: url(images/UI/cms_footer_1.jpg);
clear: both;
height: 37px;
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #FFFFFF;
/* line-height:37px */
/* display:table-cell; vertical-align:middle */
}

#footerleft {
height: 37px;
margin-left: 24px;
width: 350px;
float:left;
/* vertical-align: middle; */
min-height: 5px;
display: table-cell;
vertical-align: middle }

}

<div id="footer">
<div id="footerleft">line of text </div>
</div>

|
Mark as:
Currently Being Moderated

25. TF22Raptor2,

Mar 19, 2010 7:48 PM in reply to TF22Raptor2

Report

osgood and here is my other query regarding getting the image to the bottom of the left side div while expanding that cell all the way in height to be at the save level as the main content div.

Heres the code you asked about. (you will notice a green gap after the left side div thats what I am trying to expand into while having the image at the bottom of the div.

<!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 {
height:100%;
background-image: url();
background-repeat: no-repeat;
background-position: center top;
background-color: #1d3c18;
margin:0;
padding: 0;
}

#container {
width: 1002px;
margin: 0 auto;
/* overflow: hidden; */
/* background-color:#00FF00; */
/* background-image:url(images/UI/css_rightside_bg.jpg) */
}

#leftside {
width: 250px;
float: left;
background-color:#FFFFFF
}

#rightside {
width: 752px;
float: right;
background-color: #000000;
}

#mainnav {

}

#mainheader {

}

#footer {
padding: 0;
clear: both;
height: 37px;
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #000000; /* line-height:37px */ /* display:table-cell; vertical-align:middle */
background-color:#FFFF00
}

#footerleft {
height: 37px;
margin-left: 24px;
width: 350px;
float:left;
/* vertical-align: middle; */
min-height: 5px;
    display: table-cell;
    vertical-align: middle }

}

#footerright {
height: 37px;
width: 350px;
float:right;
text-align: right;/* line-height:37px */
margin-right: 24px;
}

.imgrightalign {
/* text-align: right; */
float:right
}

.botimgrightalign {
/* text-align: right; */
float:right;
vertical-align: bottom;
}

.style1 {color: #FFFFFF}
</style>
</head>

<body>
<div id="container">
<div id="leftside">
<div align="center"><br />
<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    My white cell (trying to expand to the footer and have that image at the bottom)<br />
    <br />
    <br />
    <br />
      <br />
      <span class="botimgrightalign"><img src="images/UI/css_leftside_bot.gif" alt="here is my bottom image" /></span></div>
</div>

<div id="rightside">
<div id="mainheader">
<div align="center"><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <span class="style1">This is my main content cell I'd like the white cell to the left to expand to the size (height) as this black one, but also to have an image be at the very bottom of the white cell</span><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
        <br />
</div>
</div>
</div>

<div id="footer">This is my footer</div>

</div>
</body>
</html>

|
Mark as:
Currently Being Moderated

26. osgood_,

Mar 22, 2010 3:32 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

Hi Osgood thanks for all this help your a god send, I'm also still having some difficult vertically centering a line of text inside a div. I am trying to get my text into the middle, heres what I have.

#footer {
padding: 0;
background-image: url(images/UI/cms_footer_1.jpg);
clear: both;
height: 37px;
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #FFFFFF;
/* line-height:37px */
/* display:table-cell; vertical-align:middle */
}

#footerleft {
height: 37px;
margin-left: 24px;
width: 350px;
float:left;
/* vertical-align: middle; */
min-height: 5px;
display: table-cell;
vertical-align: middle }

}

<div id="footer">
<div id="footerleft">line of text </div>
</div>
display: table-cell; is not supported in IE7 or IE6. I think IE8 does display it to some degree. I would not use it at the moment until IE7 has disappeared and that going to be along time yet.

|
Mark as:
Currently Being Moderated

27. osgood_,

Mar 22, 2010 3:44 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

osgood and here is my other query regarding getting the image to the bottom of the left side div while expanding that cell all the way in height to be at the save level as the main content div.

Heres the code you asked about. (you will notice a green gap after the left side div thats what I am trying to expand into while having the image at the bottom of the div.

<!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 {
height:100%;
background-image: url();
background-repeat: no-repeat;
background-position: center top;
background-color: #1d3c18;
margin:0;
padding: 0;
}

#container {
width: 1002px;
margin: 0 auto;
/* overflow: hidden; */
/* background-color:#00FF00; */
/* background-image:url(images/UI/css_rightside_bg.jpg) */
}

#leftside {
width: 250px;
float: left;
background-color:#FFFFFF
}

#rightside {
width: 752px;
float: right;
background-color: #000000;
}

#mainnav {

}

#mainheader {

}

#footer {
padding: 0;
clear: both;
height: 37px;
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #000000; /* line-height:37px */ /* display:table-cell; vertical-align:middle */
background-color:#FFFF00
}

#footerleft {
height: 37px;
margin-left: 24px;
width: 350px;
float:left;
/* vertical-align: middle; */
min-height: 5px;
    display: table-cell;
    vertical-align: middle }

}

#footerright {
height: 37px;
width: 350px;
float:right;
text-align: right;/* line-height:37px */
margin-right: 24px;
}

.imgrightalign {
/* text-align: right; */
float:right
}

.botimgrightalign {
/* text-align: right; */
float:right;
vertical-align: bottom;
}

.style1 {color: #FFFFFF}
</style>
</head>

<body>
<div id="container">
<div id="leftside">
<div align="center"><br />
<br />
    <br />
    <br />
    <br />
    <br />
    <br />
    My white cell (trying to expand to the footer and have that image at the bottom)<br />
    <br />
    <br />
    <br />
      <br />
      <span class="botimgrightalign"><img src="images/UI/css_leftside_bot.gif" alt="here is my bottom image" /></span></div>
</div>

<div id="rightside">
<div id="mainheader">
<div align="center"><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <span class="style1">This is my main content cell I'd like the white cell to the left to expand to the size (height) as this black one, but also to have an image be at the very bottom of the white cell</span><br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
        <br />
</div>
</div>
</div>

<div id="footer">This is my footer</div>

</div>
</body>
</html>
Contain your leftside and rightside <div>s in a wrapper <div> then use the faux background image technique to fake the leftside <div> extending to the height of the rightside <div>.

To have an image appear at the foot of the leftside <div> wrap the left/right side wrapper in another wrapper and attach a background image to it positioned at the bottom left.

OR

You could make the footer <div> have a position of relative, insert an absolutely positioned <div> inside of it and move that into the required position using css.

You have to think outside of the box a bit when using css. Things are possible if you know how.

|
Mark as:
Currently Being Moderated

28. TF22Raptor2,

Mar 23, 2010 12:02 AM in reply to osgood_

Report

osgood, I've also only just found that the doc type also makes a differences when rendering CSS.
I have been working in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

but the CMS I am using uses a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

and there is a difference between the two when I render.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
as it gives quite a few horizontal space issues around images which I need to fix.

Do you have more knowledge about this?

I'll have to redesign my CSS for
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

What's causes the differences, tags to look out for do you know of head?

|
Mark as:
Currently Being Moderated

29. osgood_,

Mar 23, 2010 2:59 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

osgood, I've also only just found that the doc type also makes a differences when rendering CSS.
I have been working in:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

but the CMS I am using uses a
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

and there is a difference between the two when I render.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
as it gives quite a few horizontal space issues around images which I need to fix.

Do you have more knowledge about this?

I'll have to redesign my CSS for
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

What's causes the differences, tags to look out for do you know of head?

Would need to see a page with the below doctype so I can see the spaces.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

|
Mark as:
Currently Being Moderated

30. TF22Raptor2,

Mar 23, 2010 5:32 AM in reply to osgood_

Report

os good its the same code as I was using before (in a previous post but with the different document type, and I removed a few of those tags you suggested to move.

The purple areas here is where the unecessary space is created when I change the document type for whatever reason. The grey and the white areas are the image I have contained in the divs etc. Black is the background where it is supposed to be, its just those purple areas that I am trying to fix, or get them to vertically align to push upwards I guess you would call it.

|
Mark as:
Currently Being Moderated

31. osgood_,

Mar 23, 2010 9:02 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

os good its the same code as I was using before (in a previous post but with the different document type, and I removed a few of those tags you suggested to move.

The purple areas here is where the unecessary space is created when I change the document type for whatever reason. The grey and the white areas are the image I have contained in the divs etc. Black is the background where it is supposed to be, its just those purple areas that I am trying to fix, or get them to vertically align to push upwards I guess you would call it.

Can you paste the complete page code and css here. State which browser/s give this problem. Posting images really don't mean a great deal.

|
Mark as:
Currently Being Moderated

32. TF22Raptor2,

Mar 23, 2010 4:41 PM in reply to osgood_

Report

osgood, ok here is the full code. As I said since I now have to use

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
I now get those purple gaps (space that pushes my images apart horizontally by 2-3px). When I was using the previous transitional doc type I did not get this behaviour, but unfortunatley I now have to use the xhtml11.dtd doc type.
I get the behaviour in FF, IE and Safari.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript">

</script>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

<style type="text/css">
body {
height:100%;
background-image: url(../../images/ui/apgm_bg.jpg);
background-repeat: no-repeat;
background-position: center top;
background-color: #1d3c18;
margin:0;
padding: 0;
}

#container {
width: 1002px;
margin: 0 auto;
/* overflow: hidden; */
/* background-color:#00FF00; */
/* background-image:url(images/UI/css_rightside_bg.jpg) */
}

#leftside {
width: 250px;
float: left;
background-image:url(../images/UI/css_leftside_bg.gif)
}

#rightside {
width: 752px;
float: right;
}

#mainnav {
background-image:url(../images/UI/css_rightside_green_bg.jpg)
}

#mainheader {
background-image:url(../images/UI/css_rightside_bg.jpg)
}

#footer {
padding: 0;
background-image: url(../../images/UI/cms_footer_1.jpg);
clear: both;
height: 37px;
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #FFFFFF;
/* line-height:37px */
/* display:table-cell; vertical-align:middle */
}

.footer_text {
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #FFFFFF;
}

.footer_text a{
font-weight: bold;
}

#footerleft {
height: 37px;
margin-left: 24px;
width: 350px;
float:left;
min-height: 5px;
    /* display: table-cell; */
    /* vertical-align: middle */
}

#footerright {
height: 37px;
width: 350px;
float:right;
text-align: right;/* line-height:37px */
margin-right: 24px;
}

.imgrightalign {
/* text-align: right; */
float:right
}

.botimgrightalign {
/* text-align: right; */
float:right;
vertical-align: bottom;
}

.contact {
font-family: Tahoma, Arial, Sans-Serif, Veranda;
font-size: 11px;
color: #000000;
}

.contactmarg {
font-size: 11px;
font-weight: bold;
margin-left: 20px;
display: block;
}

.contactmargnonbold {
font-size: 11px;
/* font-weight: bold; */
margin-left: 20px;
display: block;
}
</style>

</head>

<body onload="MM_preloadImages('../images/UI/nav/n_01home1_on.gif','../imag es/UI/nav/n_02aboutus1_on.gif','../images/UI/nav/n_03why1_on.gif','../ images/UI/nav/n_04who_on.gif','../images/UI/nav/n_05mp1_on.gif','../im ages/UI/nav/n_06ls1_on.gif','../images/UI/nav/n_071_on.gif','../images /UI/nav/n_08history1_on.gif','../images/UI/nav/n_091_on.gif','images/U I/nav/n_10links1_on.gif','../images/UI/nav/n_11contacts1_on.gif')">

<div id="container">
<div id="leftside"><span class="imgrightalign"><img src="../images/UI/cms_logo_1.jpg" width="246" height="190" /></span>
<span class="imgrightalign">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#ve rsion=9,0,28,0" width="247" height="254">
              <param name="movie" value="../images/ui/apgm_left_image.swf" />
              <param name="quality" value="high" />
              <embed src="../images/ui//apgm_left_image.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=S hockwaveFlash" type="application/x-shockwave-flash" width="247" height="254"></embed>
            </object></span>
      <span class="imgrightalign"><img src="../images/ui/css_flash_bot.gif" width="247" height="42" /></span><br />
    <br />
<span class="imgrightalign">
      <table width="243" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="243"><img src="../images/ui/css_contact_top.gif" width="243" height="65" /></td>
        </tr>
        <tr>
          <td><table width="243" border="0" cellspacing="0" cellpadding="0">
            <tr>
              <td width="32"><img src="../images/UI/css_contact_left.gif" width="32" height="160" /></td>
              <td valign="top"><table width="178" height="160" border="0" cellpadding="0" cellspacing="0" background="../images/UI/css_cont_bg.gif" class="contact">
                <tr>
                  <td width="72" valign="top">
                    <span class="contactmarg">
                    <br />
                    line1:
                      line2:
                      <br />
                      line3:<br />
                    line4:</p>
                    </span></td>
                  <td width="90" valign="top"><a href="link.html" class="contact"><br />
                    line1</a><br />
                   line2<br />
                    line3<br />
                  line4 </td>
                </tr>
                <tr>
                  <td colspan="2" valign="top">
                  <span class="contactmargnonbold">
                  <b>line</b><br />
                      <br />
                    line2<br />
                    line3<br />
                   line4<br /></span></td>
                </tr>
              </table></td>
              <td width="33"><img src="../images/UI/css_contact_right.gif" width="33" height="160" /></td>
            </tr>
          </table></td>
        </tr>
        <tr>
          <td><img src="../images/UI/css_contact_bot.gif" width="243" height="42" /></td>
        </tr>
      </table>
    </span>
      <br />
      <br />
      <br />
      <br />
      <br />
      <br />
    <br />
    <span class="botimgrightalign"><img src="../images/UI/css_leftside_bot.gif" /></span>
</div>

<div id="rightside">
<div id="mainnav"><img src="../images/UI/css_navtop1.gif" width="752" height="96" /><br />
    <table width="747" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="7"><img src="../images/UI/nav/n_edge_left.gif" width="7" height="70" /></td>
        <td width="92"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','home','../images/UI/nav/n_01home 1_on.gif',1)" onmouseover="MM_nbGroup('over','home','../images/UI/nav/n_01home1_on. gif','images/UI/nav/n_01home1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_01home1.gif" alt="Home" name="home" width="52" height="70" border="0" id="home" onload="" /></a></td>
        <td width="107"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','aboutus','../images/UI/nav/n_02a boutus1_on.gif',1)" onmouseover="MM_nbGroup('over','aboutus','../images/UI/nav/n_02aboutu s1_on.gif','images/UI/nav/n_02aboutus1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_02aboutus1.gif" alt="About Us" name="aboutus" width="72" height="70" border="0" id="aboutus" onload="" /></a></td>
        <td width="89"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','whyfarm','../images/UI/nav/n_03w hy1_on.gif',1)" onmouseover="MM_nbGroup('over','whyfarm','../images/UI/nav/n_03why1_o n.gif','images/UI/nav/n_03why1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_03why1.gif" alt="Why" name="activities" width="76" height="70" border="0" id="activities" onload="" /></a></td>
        <td width="79"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','whcfa','../images/UI/nav/n_04who _on.gif',1)" onmouseover="MM_nbGroup('over','whcfa','../images/UI/nav/n_04who_on.g if','images/UI/nav/n_04who_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_04who.gif" alt="Who" name="rd" width="86" height="70" border="0" id="rd" onload="" /></a></td>
        <td width="83"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','mepr','../images/UI/nav/n_05mp1_ on.gif',1)" onmouseover="MM_nbGroup('over','mepr','../images/UI/nav/n_05mp1_on.gi f','images/UI/nav/n_05mp1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_05mp1.gif" alt="Meat Products" name="mepr" width="69" height="70" border="0" id="mepr" onload="" /></a></td>
        <td width="63"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','lstock','images/UI/nav/n_06ls1_o n.gif',1)" onmouseover="MM_nbGroup('over','lstock','../images/UI/nav/n_06ls1_on. gif','images/UI/nav/n_06ls1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_06ls1.gif" alt="lstock" name="lstock" width="72" height="70" border="0" id="lstock" onload="" /></a></td>
        <td width="106"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','gsup','../images/UI/nav/n_071_on .gif',1)" onmouseover="MM_nbGroup('over','gsup','../images/UI/nav/n_071_on.gif' ,'images/UI/nav/n_071_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_07grower1.gif" alt="GS" name="gsup" width="64" height="70" border="0" id="gsup" onload="" /></a></td>
        <td width="27" background="../images/UI/nav/09_blank.gif"><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','history','../images/UI/nav/n_08h istory1_on.gif',1)" onmouseover="MM_nbGroup('over','history','../images/UI/nav/n_08histor y1_on.gif','images/UI/nav/n_08history1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_08history1.gif" alt="History" name="history" width="60" height="70" border="0" id="history" onload="" /></a></td>
        <td><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','re','../images/UI/nav/n_091_on.g if',1)" onmouseover="MM_nbGroup('over','re','../images/UI/nav/n_091_on.gif',' images/UI/nav/n_091_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_09r1.gif" alt="re" name="forsale" width="62" height="70" border="0" id="forsale" onload="" /></a></td>
        <td><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','links','../images/UI/nav/n_10lin ks1_on.gif',1)" onmouseover="MM_nbGroup('over','links','../images/UI/nav/n_10links1_o n.gif','images/UI/nav/n_10links1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_10links1.gif" alt="Links" name="links" width="48" height="70" border="0" id="links" onload="" /></a></td>
        <td><a href="mylink" target="_top" onclick="MM_nbGroup('down','group1','contactus','../images/UI/nav/n_1 1contacts1_on.gif',1)" onmouseover="MM_nbGroup('over','contactus','../images/UI/nav/n_11cont acts1_on.gif','../images/UI/nav/n_11contacts1_on.gif',1)" onmouseout="MM_nbGroup('out')"><img src="../images/UI/nav/n_11contacts1.gif" alt="Contact Us" name="contactus" width="71" height="70" border="0" id="contactus" onload="" /></a></td>
        <td> </td>
        <td> </td>
      </tr>
    </table>
      </div>
<div id="mainheader">
<div align="center"><img src="../images/ui/rwel_APGM.jpg" width="718" height="263" /><br />
    <table width="720" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="243"><a href="mylink.html"><img src="../images/ui/rAPGM_1.gif" width="234" height="211" border="0" /></a></td>
            <td width="231"><a href="mylink.html"><img src="../images/ui/rU_Interested.jpg" width="231" height="211" border="0" /></a></td>
            <td><a href="mylink.html"><img src="../images/ui/r_forsale.jpg" width="255" height="211" border="0" /></a></td>
          </tr>
        </table>
        <br />
        <img src="../images/ui/footer_btm.gif" width="709" height="107" /><br />
        <br />
</div>
</div>
</div>


<div id="footer">
<div id="footerleft">left text goes here </div>
<div id="footerright">right text goes here <a href="http://www.link.com" class="footer_text">link name</a></div>
</div>

</div>

</body>
</html>

|
Mark as:
Currently Being Moderated

33. TF22Raptor2,

Mar 23, 2010 4:56 PM in reply to TF22Raptor2

Report

osgood

If I simply add

img {
vertical-align:top;
}

to my css, then all of my images push up and I have removed the purple space!

So I now take it that

img {
vertical-align:top;
}

should be a default setting in any future css I write, do you know of any websites out there that has this kind of info listed.
So for noobs to css like me don't have to find these little bugs/hints/tips out on our own, like default ways css behaves etc?

|
Mark as:
Currently Being Moderated

34. TF22Raptor2,

Mar 23, 2010 5:32 PM in reply to TF22Raptor2

Report

PS osgood I am still battling to get that leftside wrapper faux background tecnique to extend my left hand div into a liquid div that equals the same height as my right had div.

Do you think you could show us using the code I just posted, I'm really struggling to get that to do anything. I thought my leftside was already a wrapper, anyway.

|
Mark as:
Currently Being Moderated

35. TF22Raptor2,

Mar 23, 2010 6:25 PM in reply to TF22Raptor2

Report

again heres what I am trying to accomplish with this.

I was thinking now that I have that bit of code that aligns my images to the top

img {
vertical-align:top;
}

For what I want to do here I think I need to stop my image from taking on that peice of css, is that right?. With images how would I do that?

|
Mark as:
Currently Being Moderated

36. TF22Raptor2,

Mar 23, 2010 6:27 PM in reply to TF22Raptor2

Report

okay got the bakcground faux image to work on the left hand side colum ( I created a bg that was the entire horizonal size of both left and right side divs) then went to the container div and added a background image with repeat to its css.

Now to get that image to go right to the bottom of the div (left side). That thing is starting to tear my hair out.

|
Mark as:
Currently Being Moderated

37. osgood_,

Mar 24, 2010 1:12 AM in reply to TF22Raptor2

Report

TF22Raptor2 wrote:

okay got the bakcground faux image to work on the left hand side colum ( I created a bg that was the entire horizonal size of both left and right side divs) then went to the container div and added a background image with repeat to its css.

Now to get that image to go right to the bottom of the div (left side). That thing is starting to tear my hair out.
There's a lot of questions there lol

The image align issue, although I can't be sure, only relates to the images in <td> cells.

<td>'s by default have a setting of align-middle so therefore you would see gaps and spaces appearing unless you set the contents within the <td> cell to vertical-align: top;

td {
vertical-align: top;
}

The way to get an image to always sit at the bottom of the leftside is to wrap the leftside and rightside <divs> in their own wrapper and use a background image positioned right, bottom attached to it. However this means that the rightside content must have enough content in it to push the wrapper down to show the image. If the rightside content is in anyway shorter than the leftside content the image will only be partially shown or not at all. In that instance you would need to add padding bottom to the leftside <div> to push it down. This can be added on specific page where this occurs.

|
Mark as: