CSS Layout problems

I should start this by saying I am very new to CSS layouts,
and am self taught, so I'm probably doing something very wrong. So
far I've stuck to really simple layouts and had no problems...but
they were very simple layouts.
With the site I'm doing at the moment I have placed other
div's inside a content div, so that I can have left and right hand
content within the content div. But the left and right div's are
not pushing the content div down with their content, and I'm not
sure what else to try to get it to work.
I've tried setting the height of the content div to auto or
inherit but that doesn't work.
As you can see on the main page of the site I'm using a
background image in the content cell.
http://members.westnet.com.au/zelky/surfschoolnew/index.html
And if you look at the details page you can see what I am
trying to describe. The content div not pushing down with the left
and right content div’s contents means the background image
is just a few pixels deep under the nav div.
http://members.westnet.com.au/zelky/surfschoolnew/details.html
And my pathetic CSS/stylesheet is here:
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
Thanks in advance and hopefully my mess isn’t’ to
hard to look at. As I said I'm a bit lost so hopefully I'm not
going to confuse anyone with my "home made" skills.

When you 'float' elements on your page you effectively remove
them from
the normal flow of the document, therfore the 'content'
<div> thinks
nothing is inside it. You need to help it by 'clearing' the
floats.
There are various methods for clearing floats.
Insert a 'clearing' <br> (shown below) into your pages
code directly
AFTER the closing 'right' container tag and BEFORE the
closing 'content'
container tag.
</div>
<br style="clear: both;" />
</div>
zelky wrote:
> I should start this by saying I am very new to CSS
layouts, and am self taught,
> so I'm probably doing something very wrong. So far I've
stuck to really simple
> layouts and had no problems...but they were very simple
layouts.
>
> With the site I'm doing at the moment I have placed
other div's inside a
> content div, so that I can have left and right hand
content within the content
> div. But the left and right div's are not pushing the
content div down with
> their content, and I'm not sure what else to try to get
it to work.
>
> I've tried setting the height of the content div to auto
or inherit but that
> doesn't work.
>
> As you can see on the main page of the site I'm using a
background image in
> the content cell.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/index.html
>
> And if you look at the details page you can see what I
am trying to describe.
> The content div not pushing down with the left and right
content div?s contents
> means the background image is just a few pixels deep
under the nav div.
>
>
http://members.westnet.com.au/zelky/surfschoolnew/details.html
>
> And my pathetic CSS/stylesheet is here:
>
>
http://members.westnet.com.au/zelky/surfschoolnew/mainstyle.css
>
> Thanks in advance and hopefully my mess isn?t? to hard
to look at. As I said
> I'm a bit lost so hopefully I'm not going to confuse
anyone with my "home made"
> skills.
>
>

Similar Messages

CSS Layout Problem?

Can someone please help me with a layout problem.
As far as I can tell the page looks as it should in Netscape,
Firefox, etc., but IE6 and 7 refuse to work correctly.
The page I am working on is:
http://www.vmtampademo.com/localangler/testpage.html
Most of the picture caption and headline of the middle column
is behind the picture. I attempted to force the info with a
seperating div which seems to work sometimes. I doubt that this is
the correct solution. What am I doing wrong?
Thank you for the help!

It looks fine in Firefox 2.0.0.1, Opera 9.10, and IE 7.

Css layout problems - css and tables

Hi guys,
Well as some of you suggested months ago, I've been trying to
learn to layout with CSS... It's actually getting a bit rewarding
now as I start to figure a few things out but there's still plenty
of questions!!!
If anyone can take a look at what I'm working on at the
moment and give me some help I'd REALLY REALLY appreciate it!!
My main trouble (I think) is working with a drop-down menu
system that I found on the web and I'm dying to use it because it's
perfect for this design. It's layed out using a table so I'm trying
to incorporate that...
Click
[url=http://home.iprimus.com.au/jediwdog/ltc/mockup2.jpg]here[/url]
for a picture of what i'm trying to get this page to look like and
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.html]here[/url]
to see how far I've got. You can download the stylesheet from
[url=http://home.iprimus.com.au/jediwdog/ltc/example1.css]here[/url].
Here's what I need to know:
1. I'm trying to push the table down so it looks better lined
up with the logo but when I tell it to be further from the top, it
doesn't seem to move. Any ideas on why?
2. As you can see, I've inserted some blank space into the
middle of the menu so that the logo doesn't cover any of the menu
items. I can't seem to get the same 1px black border on this
section.
I assume this is because the border on the other parts is a
layer/div border? Will I have to somehow put a div in there so as
to create the same border effect?
3. I'd really like to keep the header and footer visible at
all times, even if there's lots of content to scroll through. I
found this:
http://www.cssplay.co.uk/layouts/basics2.html#Top
but when I tried to implement this on my page, it all went haywire!
Is this going to be a possibility?
4. I guess other than that, have I completely stuffed this
up!? I don't think I have but it's worth asking I guess!
THANKS IN ADVANCE! I'm really loving using css layout rather
than tables - it's soooo much more versatile. I just need to get
past some obstacles I think!
Cheers
Neil

On Wed, 24 Jan 2007 22:17:20 +0000 (UTC), "Barb S."
<[email protected]> wrote:
>Ok, I made your suggested changes and have this:
>
> body {
> font-family: Georgia, "Times New Roman", Times, serif;
> text-align: center;
> font-size: 1em;
> font-style: normal;
> text-decoration: none;
> top: 15px;
> background-image:
url(/images/backgrounds/background1.gif);
> padding-top: 15px;
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
>
> #body {
> margin: 0 auto;
> text-align:left;
> width: 760px;
> padding-right: 20px;
> padding-bottom: 20px;
> padding-left: 20px;
> background-color: #FFFFCC;
> padding-top: 20px;
> font-family: Georgia, "Times New Roman", Times, serif;
> font-size: 1em;
> color: #003366;
>
> }
>
>
http://www.japanesetemari.com
>
> The page is on the left size of the screen and the
yellow box does not expand
>out. Not exactly what I'd wanted. I like to take
advantage of larger screens
>and have the page expand out but not so far out so the
lines of text are real
>long.
> Barb
It's this in the body style that is limiting the width -
change that
to 100%
>>>> width: 70%;
<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
> }
~Malcolm N....
~

CSS layout problems in Explorer (fine in Firefox and Safari)

Firstly apologies to the mods, I had mistakenly posted this
in the dynamic section also...
My problem - I am working on a CSS site (my first!) here
http://www.benfrain.com
It appears fine in Firefox (PC and Mac) and Safari (mac) but
when I view it in Explorer for Mac (5.2.3) I get a over long page
and I get no auto margin on the left.
Another small curiosity - I have noticed that my background
image on my div id "header" seems to start off again on the right.
Again, Explorer 5.2 for mac only...
My html and css both validate.
Anybody know why this is happening?

quote:
Originally posted by:
bregent
>It appears fine in Firefox (PC and Mac)
Have you tried increasing the text size?
Do you mean in the browser? I just tried it in Firefox and
after two increases the layout/style of the page kind of 'falls
apart' - how would this be rectified?

CSS Layout Problem in DW2004

Hi--
I have been using DW2004 to publish my own website, and
lately I have just started to learn CSS using one of the Macromedia
modules which is now hosted by Adobe.
The current lesson I'm working on is Designing with CSS in
Dreamweaver MX 2004 Part 3: Creating Your First Design Without
Tables . The page I'm on is page 8.
Here is my question:
Although I followed the instructions for creating a nav list
using CSS, it does not render correctly in Firefox. Instead of
looking like Fig. 13 at the bottom of page 8, I only have a
container with the three links for Home, About Us and Search listed
vertically with left justification and preceding dot to mark the
list. There is no background color.
What am I doing wrong?
To facilitate debugging, I'm going to paste in the code from
my CSS file and the HTML file. Here is the code from the CSS file:
/* CSS Document */
body{
background-color: #666666;
color: #666666;
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
text-align: left;
#wrapper {
width: 770px;
background-color: #FFFFFF;
margin: 10px auto;
border: 1px, solid, #000000;
#banner {
height: 110px;
background-image: url(/images/CarBanner.jpg);
background-repeat: no-repeat;
#nav {
border-bottom: 1px solid #000000;
#nav ul{
padding: 0;
margin: 0;
background-color: #00FF99;
#nav ul li{
display: inline;
padding: 0;
margin: 0;
#nav ul li a{
font-size:80%;
color: #FFFFFF;
background-color:#3333CC;
text-decoration:none;
padding:0 25px 0 25px;
border-right: 1px solid #000000;
text-align: center;
width: 9em;
#nav ul li a:hover, #nav ul li a:focus {
background-color:#990000;
Here is the code from the XHTML file:
<!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=iso-8859-1" />
<title>Untitled Document</title>
<link href="/CssFiles/basiclayout.css" rel="stylesheet"
type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav"></div>
<ul>
<li><a href="#">Home</a></li
><li><a href="#">About Us</a></li
><li><a href="#">Search</a></li
>
</ul>
</div>
</body>
</html>
Thanks in advance!
Paul Denlinger
undefined
page
8

You just simply haven't got the ul tag inside the 'nav'
<div> in your code.
I've put this right in the code below. Copy and paste it over
your
existing code. Also get into a habit of commenting where your
<divs> end
ie . This will help you identify
your containers
easier as the page gets more complex.
<body>
<div id="wrapper">
<div id="banner"></div>
<div id="nav">
<ul>
<li><a href="#">Home</a></li
<li><a href="#">About Us</a></li
<li><a href="#">Search</a></li
</ul>
</div>
</div>
</body>
pdenlinger wrote:
> Hi--
>
> I have been using DW2004 to publish my own website, and
lately I have just
> started to learn CSS using one of the Macromedia modules
which is now hosted by
> Adobe.
>
> The current lesson I'm working on is Designing with CSS
in Dreamweaver MX 2004
> Part 3: Creating Your First Design Without Tables . The
page I'm on is page 8.
>
> Here is my question:
>
> Although I followed the instructions for creating a nav
list using CSS, it
> does not render correctly in Firefox. Instead of looking
like Fig. 13 at the
> bottom of page 8, I only have a container with the three
links for Home, About
> Us and Search listed vertically with left justification
and preceding dot to
> mark the list. There is no background color.
>
> What am I doing wrong?
>
> To facilitate debugging, I'm going to paste in the code
from my CSS file and
> the HTML file. Here is the code from the CSS file:
>
> /* CSS Document */
>
> body{
> background-color: #666666;
> color: #666666;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> margin: 0;
> padding: 0;
> text-align: left;
>
> }
> #wrapper {
> width: 770px;
> background-color: #FFFFFF;
> margin: 10px auto;
> border: 1px, solid, #000000;
> }
> #banner {
> height: 110px;
> background-image: url(/images/CarBanner.jpg);
> background-repeat: no-repeat;
> }
> #nav {
> border-bottom: 1px solid #000000;
> }
>
> #nav ul{
> padding: 0;
> margin: 0;
> background-color: #00FF99;
> }
> #nav ul li{
> display: inline;
> padding: 0;
> margin: 0;
> }
> #nav ul li a{
> font-size:80%;
> color: #FFFFFF;
> background-color:#3333CC;
> text-decoration:none;
> padding:0 25px 0 25px;
> border-right: 1px solid #000000;
> text-align: center;
> width: 9em;
> }
> #nav ul li a:hover, #nav ul li a:focus {
> background-color:#990000;
> }
>
> Here is the code from the XHTML file:
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <link href="/CssFiles/basiclayout.css"
rel="stylesheet" type="text/css" />
> </head>
>
> <body>
> <div id="wrapper">
> <div id="banner"></div>
> <div id="nav"></div>
>
>
<a href="#">Home</a></li
> >
<a href="#">About Us</a></li
> >
<a href="#">Search</a></li
> >
>
> </div>
> </body>
> </html>
>
> Thanks in advance!
>
> Paul
> Denlinger
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_mx200
> 4_08.html
http://www.adobe.com/devnet/dreamweaver/articles/css_concepts_pt3_mx200
> 4_08.html
>
> /* CSS Document */
>
> body{
> background-color: #666666;
> color: #666666;
> font-family: Verdana, Arial, Helvetica, sans-serif;
> margin: 0;
> padding: 0;
> text-align: left;
>
> }
> #wrapper {
> width: 770px;
> background-color: #FFFFFF;
> margin: 10px auto;
> border: 1px, solid, #000000;
> }
> #banner {
> height: 110px;
> background-image: url(/images/CarBanner.jpg);
> background-repeat: no-repeat;
> }
> #nav {
> border-bottom: 1px solid #000000;
> }
>
> #nav ul{
> padding: 0;
> margin: 0;
> background-color: #00FF99;
> }
> #nav ul li{
> display: inline;
> padding: 0;
> margin: 0;
> }
> #nav ul li a{
> font-size:80%;
> color: #FFFFFF;
> background-color:#3333CC;
> text-decoration:none;
> padding:0 25px 0 25px;
> border-right: 1px solid #000000;
> text-align: center;
> width: 9em;
> }
> #nav ul li a:hover, #nav ul li a:focus {
> background-color:#990000;
> }
>
> Here is the code from the XHTML file:
>
> <!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=iso-8859-1" />
> <title>Untitled Document</title>
> <link href="/CssFiles/basiclayout.css"
rel="stylesheet" type="text/css" />
> </head>
>
> <body>
> <div id="wrapper">
> <div id="banner"></div>
> <div id="nav"></div>
> <ul>
> <li><a href="#">Home</a></li
> ><li><a href="#">About
Us</a></li
> ><li><a href="#">Search</a></li
> >
> </ul>
> </div>
> </body>
> </html>
>

CSS layout problems in IE

DW8
In IE, this web page looks "squished." In FF and NS, it looks
wonderful. This is the work of a student of mine and I would like
to give a semi-intelligent answer as to why it's behaving as it
does in IE. I am teaching a beginner's level of DW and am working
through two books now on CSS, but am not at a comfortable level yet
in browser differences and figuring out hacks for one and not the
other. This guy has a graphics background and always turns in
excellent work.
I realize from searching and reading other posts that IE
doesn't support CSS as much as the other browsers. Is there
anything any of you can spot for this result? (The exercise was to
use a DW template to create three pages.)
His page:
http://www.geeks2b.com/WEB140011/Tillman/thanksgiving/html/history.html
His CSS file:
http://www.geeks2b.com/WEB140011/Tillman/thanksgiving/css/global.css
His template:
http://www.geeks2b.com/WEB140011/Tillman/thanksgiving/templates/main.dwt
I appreciate any guidance on this.
kpchop

DW8
In IE, this web page looks "squished." In FF and NS, it looks
wonderful. This is the work of a student of mine and I would like
to give a semi-intelligent answer as to why it's behaving as it
does in IE. I am teaching a beginner's level of DW and am working
through two books now on CSS, but am not at a comfortable level yet
in browser differences and figuring out hacks for one and not the
other. This guy has a graphics background and always turns in
excellent work.
I realize from searching and reading other posts that IE
doesn't support CSS as much as the other browsers. Is there
anything any of you can spot for this result? (The exercise was to
use a DW template to create three pages.)
His page:
http://www.geeks2b.com/WEB140011/Tillman/thanksgiving/html/history.html
His CSS file:
http://www.geeks2b.com/WEB140011/Tillman/thanksgiving/css/global.css
His template:
http://www.geeks2b.com/WEB140011/Tillman/thanksgiving/templates/main.dwt
I appreciate any guidance on this.
kpchop

CSS website layout problems

Hi guys,
I am new to CSS, I have considerable knowledge HTML and several programing languages, very much outdated. I have a informational website that is several years old.
www.woodgas.net
I used frontpage to do my website and to do the updates over the years. It is time for a face lift.
I have dreamweaver CS5 installed and am having one heck of a time getting my page to do what I want. I am trying to style it similar to a frame set of a top banner and 3 columns. And a flydown menu at the top of the center column. The right and left columns need to be 160X600 and the center column to be centered between the right and left.
I want the banner to center on the page top. And the right and left columns to move as far as possible to the screen edge away from my center column. This will keep my ads as far away from my content as possible. My website has been completely supported out of my pocket and I am hoping to generate a little income to keep the site updated.
I don't want to use frames, as this would keep new ads from loading as a person navigates to a new page on my site.
Any help would be appreciated I am sure that if you check out my current site, you will find two things it is about a pretty cool subject and it could use a face lift!
Thanks
Jonathan

Gary is right. APDivs as a primary layout method seldom works well. Here is why:
http://apptools.com/examples/pagelayout101.php
Learn CSS positioning in 10 Steps
http://www.barelyfitz.com/screencast/html-training/css/positioning/
While you learn the finer points of CSS positioning, it's very helpful to start a project with a pre-built CSS layout. You can learn a lot from looking at the code.
PVII CSS Templates or Page Pack - Rock solid. Thoroughly tested to perform well in all browsers.
http://www.projectseven.com/products/index.htm
Dreamweaver CSS Templates for beginners
http://www.adobe.com/devnet/dreamweaver/articles/dreamweaver_custom_templates.html
New DW Starter Pages --
http://www.adobe.com/devnet/dreamweaver/articles/introducing_new_css_layouts.html
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb

Design view of CSS layout is innacurate

Hello all -
I'm beginning to redraft my company's hompage using a full
CSS layout instead of our current nested table layout. Since I need
to ensure that other staff members can edit pages freely - and I'm
the only person comfortable doing straight code - it's important
that the design view is as accurate as possible.
When editing in Dreamweaver 8, my three column layout (a left
table of contents, a center content column, and an additional
content right column) breaks so that the table of contents
dissapears. Some people have spoken with have suggested that my
problem might be the negative margins I'm using to position the
floated columns that form the meat of the page.
You can view the page here:
http://www.southernenvironment.org/test/home_redraft.html
The CSS is here:
http://www.southernenvironment.org/test/style_redraft.css
In addition, the header navbar also appears strangely. In
Design View, two word titles (ie. "Our Programs") break on to two
separate lines, instead of staying in one line as they do in
browsers I've tested.
The frustrating thing about this is that my design seems to
work in most browsers - but without a somewhat accurate
representation in Dreamweaver, I won't be able to sell the idea of
a standards-based revamp to other staff here.
Any ideas?
Matt

Your CSS is not tight enough to get accurate columns. You
shouldn't try to
define the columns with the body tag. For a purely CSS site,
you really find
out why the code is called 'cascading' styles. They cascade
all right. We've
just finished wrestling with a similar re-design with CSS and
the order of
how tags and files come into play is very important.
We have defined the body tag with background color, 0 margins
and font
family, color and size only. Header/footer and columns are
defined by ID.
The three "content" columns are within a page container,
header and footer
outside the page container. How these elements are placed is
important, as
they cascade.
We use 3 linked main css files, 1) Page Layout (3 or 4
different options) 2)
Page presentation (all text styles) 3) Page menu styles (only
menu styles).
They are in that order, as the only body tag is in Page
Layout.
If a page has a watermarked background we import the code
just for the
watermark.
This is not true for the home page, but all other pages in
the site.
http://www.nic.bc.ca/index.asp
I hope this helps.
Marianne
"homestar79" <[email protected]> wrote in
message
news:[email protected]...
> Hello all -
>
> I'm beginning to redraft my company's hompage using a
full CSS layout
> instead
> of our current nested table layout. Since I need to
ensure that other
> staff
> members can edit pages freely - and I'm the only person
comfortable doing
> straight code - it's important that the design view is
as accurate as
> possible.
>
> When editing in Dreamweaver 8, my three column layout (a
left table of
> contents, a center content column, and an additional
content right column)
> breaks so that the table of contents dissapears. Some
people have spoken
> with
> have suggested that my problem might be the negative
margins I'm using to
> position the floated columns that form the meat of the
page.
>
> You can view the page here:
>
>
http://www.southernenvironment.org/test/home_redraft.html
>
> The CSS is here:
>
>
http://www.southernenvironment.org/test/style_redraft.css
>
> In addition, the header navbar also appears strangely.
In Design View,
> two
> word titles (ie. "Our Programs") break on to two
separate lines, instead
> of
> staying in one line as they do in browsers I've tested.
>
> The frustrating thing about this is that my design seems
to work in most
> browsers - but without a somewhat accurate
representation in Dreamweaver,
> I
> won't be able to sell the idea of a standards-based
revamp to other staff
> here.
>
> Any ideas?
>
> Matt
>

CSS Layout Nightmare!

OK, I've recently decided to convert from table based layout to div layouts using CSS. I'm pretty proud of the outcome and found it a nice approach to designing. HOWEVER, when i click to edit pages in contribute, it strips out all of the css outline visual aids (like you see in wysiwig editors like Dreamweaver). This is going to be a major problem for my client and wysiwig style editing. Does anybody know how i can get contribute to display this in edit mode and also the best option for my client to select divs in order to copy and paste content. This would be pretty easy in table based layout as contribute lets you select a table and copy and paste it. Ideal way for my client to copy and paste additional news items same format. Any help would be gratefully appreciated. Thanks in advance.

Not.
Walt
"SamDesign.be" <[email protected]> wrote in
message
news:ets71o$ark$[email protected]..
> Hallo Brandon,
> Make de "<div id="divContent">" smaller
> Sheers
> www.SamDesign.be
>
>
> "Brandon" <[email protected]>
a écrit dans le message
> de news: ets5tg$9fo$[email protected]..
>> Working on CSS Layout for the first time (always
have used Tables) . . .
>> can you look at the page below (in initial stages)
and tell me how I can
>> move everything UP? It's driving me crazy. The
picture in the center
>> needs to come up, the main nav buttons need to move
up, and the "boxes"
>> in the left column all need to move up under each
other.
>>
>>
http://www.presentationsdirect.com/2007/
>>
>> --
>> Brandon
>>
>>
>
>

CSS layout

Hi
A couple of embarrassingly basic questions but would
appreciate help:
1. I'm using a CSS layout template and need to alter the
position of a div border (to coincide with another border). How do
you physically do this? Can't seem to "drag and drop" the border
2. I've aligned a Heading to the "left" but when I display it
on the browser it either stays to the left or moves to the center
of the div. depending on the size of my window. How do you prevent
this?
3. Currently my html and css codes are in 2 different
(linked) documents. When I publish to the web do I simply load both
files or do I need to copy and paste the css coding into my html
document?
Thanks once again

Posting our code would be helpful
> 1. I'm using a CSS layout template and need to alter the
position of a div
> border (to coincide with another border). How do you
physically do this?
> Can't
> seem to "drag and drop" the border
I'm not sure what you're asking here ... positioning a
border? the div
border is always, well, on the perimeter of the div. Do you
want to move one
edge of the div over 10 px? If so (and assuming its the left
border...) ,
try subtracting 10 px from the div width and giving the div a
margin-left of
10px. As for "drag and drop," what are we dragging? What are
we dropping?
> 2. I've aligned a Heading to the "left" but when I
display it on the
> browser
> it either stays to the left or moves to the center of
the div. depending
> on the
> size of my window. How do you prevent this?
can we see the code here? It sounds to me like you're running
into problems
with an element being set to 500px wide and then a browser
window that is
400px wide. A wide img maybe? I'm only guessing at things
without seeing th
ecode though
> 3. Currently my html and css codes are in 2 different
(linked) documents.
> When
> I publish to the web do I simply load both files or do I
need to copy and
> paste
> the css coding into my html document?
Yep. Just make sure they stay relative to each other in the
same way. In
other words, if both your htm file and css file are in the
same folder on
your local machinge then they must remain in the same folder
on your server.
If your css is in a subfolder called "css" then you need to
make sure your
css file is in a similar subfolder on the server
Alex

CSS Layout issue!! Help Urgent!!

I am having a problem with creating a css layout, in the past i used tables and am trying to convert my sites for my customers. I have layed out the website using divs and css and it looks great until i put in the cosing of the menu bar. when i put in the coding for the menu bar suddenly the bar has a padding around it but i cannot find a padding that would change this in the css coding. I need this done asap! so please help. ill show my coding below:
this is the div coding:
<div id=Nav>
   <ul class="dropdown" id="Bar"; width: 879px" name="Bar">
         <li class="style16" style="width: 161px; height: 22px">
   <a href="default.html" style="width: 146px">Home</a></li>
         <li class="style10" style="width: 169px; height: 23px">
   <a href="about.html" style="width: 153px">About</a></li>
     <li class="" style="height: 31px; width: 175px; left: 0px; top: 0px">
   <a href="Equipment.html" class="style18">
   <div class="style10" style="width: 156px; height: 20px;">
    Equipment</div>
   </a> <ul class="sub_menu">
            <li><a href="compressor.html">Air Compressors</a></li>
            <li><a href="compactions.html">Compaction</a></li>
            <li><a href="concrete.html">Concrete Equipment</a></li>
            <li><a href="forklifts.html">Fork Lifts</a></li>
            <li><a href="generators.html">Generators</a></li>
            <li><a href="groundthawing.html">Ground Thawing</a></li>
            <li><a href="heaters.html">Heaters</a></li>
            <li><a href="scissorlifts.html">Scissor Lifts</a></li>
            <li><a href="boomlifts.html">Boom Lifts</a></li>
            <li><a href="lighttowes.html">Light Towers</a></li>
            <li><a href="misc.html">Misc.</a></li>
            <li><a href="dirtequipment.html">Dirt Equipment</a></li>
            <li><a href="powertools.html">Power Tools</a></li>
            <li><a href="pumps.html">Pumps | Saws | Welders</a></li>
                 </ul>
         </li>
         <li style="width: 165px"><a href="locations.html">
   <div class="style10" style="width: 154px">
    Locations</div>
   </a>
           </li>
             <li style="width: 180px"><a href="contact.html">
   <div class="style16" style="height: 24px">
    Contact Us</div>
   </a>         </li>
        </ul>
</div>
This is the css coding:
#wrapper {
width: 880px;
margin-right: auto;
margin-left: auto;
background-color: #f4f4f4;
#Navigation {
background-image: url(Images/NAvigation%20BAr.jpg);
background-repeat: no-repeat;
width: 880px;
visibility: visible;
height: 3-px;
vertical-align: top;
Nav {
vertical-align: top;
margin: 0px;
padding: 0px;
clear: both;
height: 20px !important;
#wrapper1 {
width: 876px;
margin-right: auto;
margin-left: auto;
color: #F4F4F4;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#Bar {
background-repeat: no-repeat;
width: 880px;
height: 28pt;
overflow: visible;
background-image: url(Images/NAvigation%20BAr.jpg);
position: relative;
vertical-align: top;
#container {
width: 880px;
color: #000;
background-color: #EDEDED;
dominant-baseline: 578px;
/* IE10 Consumer Preview */
background-image: -ms-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Mozilla Firefox */
background-image: -moz-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Opera */
background-image: -o-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* Webkit (Safari/Chrome 10) */
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #716375), color-stop(1, #E8E8E8));
/* Webkit (Chrome 11+) */
background-image: -webkit-linear-gradient(left, #716375 0%, #E8E8E8 100%);
/* W3C Markup, IE10 Release Preview */
background-image: linear-gradient(to right, #716375 0%, #E8E8E8 100%);
margin-bottom: auto;
#content {
float: left;
color: #090;
width: 580px;
padding-right: 6px;
background-color: #033;
margin-top: 20px;
.container {
color: #000;
background-color: #ff6;
width: 876px;
#expect {
height: 164px;
width: 294px;
float: right;
position: relative;
background-color: #C90;
margin-left: 582px;
padding-top: 10px;
#hours {
float: left;
height: 55px;
width: 294px;
line-height: 4px;
word-spacing: normal;
white-space: normal;
display: inline;
letter-spacing: normal;
padding-top: 10px;
font-size: 13pt;
color: #000;
margin-left: 586px;
background-color: #F99;
#footer {
height: 76px;
width: 880px;
background-color: #CC0;
clear: both;
#cards {
float: right;
height: 31px;
width: 294px;
margin-left: 582px;
padding-top: 10px;
background-color: #F36;
#contact {
float: left;
height: 328px;
width: 293px;
word-spacing: normal;
white-space: normal;
line-height: 1px;
color: #000;
display: inline;
font-size: 14pt;
background-color: #FFF;
padding-top: 10px;
margin-top: 20px;
#header {
background-image: url(Images/Proquip%20Logo/Proquip%20logo2.jpg);
background-repeat: no-repeat;
background-position: center center;
width: 885px;
height: 126px;
background-color: #000;
margin-right: 2.5px;
margin-left: 0px;
#wrapper #container #contact p strong {
color: #800000;
font-size: 14pt;
#wrapper #container #contact blockquote p a {
color: #000;
#wrapper #container #expect div {
color: #900;
font-size: 14pt;
font-weight: bold;
#wrapper #container #hours div {
color: #900;
font-size: 14pt;
font-weight: bold;
#box2 {
background-image: url(Images/Option%201/Services/whitebox2.jpg);
#box3 {
background-image:url(Images/Option%201/Services/redbox2.jpg);
background-repeat:no-repeat;
background-position: center center;
#gold {
background-image:url(Images/Option%201/Logos/gold.gif);
background-repeat:no-repeat;
#white {
background-image:url(Images/Option%201/ProQuip-Pics/box1.gif);
background-repeat:no repeat;
#forklift {
background-image:url(Images/Option%201/ProQuip-Pics/34-01-4380.jpg);
background-repeat:no-repeat;
#scissorlift {
background-image:url(Images/Option%201/ProQuip-Pics/jlg-scissor-lifts-21.jpg);
background-repeat:no-repeat;
/* Navigation Menu- Level one */
ul {
list-style: none
ul.dropdown {
font-size: 13pt;
color: #000000;
height: 25px;
text-decoration: none !important;
width: 860px;
position: relative;
vertical-align: top;
ul#Bar.dropdown {
width: 878px;
position: relative;
vertical-align: top;
ul.dropdown li {
font-weight: 600;
float: left;
zoom: 1;
font-family: Arial, Helvetica, sans-serif;
font-size: 13pt;
display: block;
width: 175px;
color: #000000;
top: 25px;
text-decoration: none !important;
text-align: center;
ul.dropdown a:hover {
color:#cc0000;
ul.dropdown a:active {
color: #000000;
ul.dropdown li a {
display: block;
border-right: 1px solid#333;
color: #000000;
border-right-width: 1px;
text-decoration: none !important;
text-align: center;
ul.dropdown li:last-child a {
border-right:none; /* does not wotk in IE */
text-decoration:none !important; }
ul.dropdown li.hover,
ul.dropdown li.hover {
color: #000000;
position: relative;
height: 28px;
top: 0px;
ul.dropdown li.hover a {
color:#800000;
/* Level Two Navigation */
ul.dropdown ul {
width: 180px;
visibility: hidden;
position: absolute;
top: 100%;
left: 36%;
display: block;
float: left;
color: #000000;
text-decoration: none !important;
height: 25px;
ul.dropdown ul li {
font-weight: normal;
color: #000000;
border-bottom: 1px solid #ccc;
float: left;
border-bottom-color: #c0c0c0;
border-bottom-style: groove;
display: block;
background-color: #dbdbdb;
text-decoration:none !important;
/* IE 6&7 needs inline block */
ul.dropdown ul li a {
border-right: none;
display: inline-block;
height: 18px;
line-height: 16px;
color: #000000;
width: 100%;
text-decoration: none !important;
/* Level Three Navigation */
ul.dropdown ul ul {
top: 100%;
color: #000000;
text-decoration: none !important;
ul.dropdown li:hover>ul {
visibility: visible;
color: #000000;
top: 30px;
text-decoration: none !important;

I have the site using tables up and running, this is a website for a client so I cant make a test site using that domain would it be ok if I screen shot'ed the problem?
Date: Thu, 24 Apr 2014 12:19:44 -0700
From: [email protected]
To: [email protected]
Subject: CSS Layout issue!! Help Urgent!!
    Re: CSS Layout issue!! Help Urgent!!
    created by Jon Fritz II in Dreamweaver support forum - View the full discussion
Well, you're not using position:absolute, so you've got a big thumbs up from a bunch of us for that.
Is there any chance you could post a link to this page on your server? It's much easier to troubleshoot from a browser than it is to rebuild the page from code fragments.
If you haven't gone live with the page yet, create a folder called TEST in your site and save copies of the page and css there. Upload TEST and post a link to it here. Once the problem is found/fixed, delete TEST from the server.
You can also attempt to use Firefox or Chrome to find your issue by right clicking > Inspect Element. All CSS that affects a given element will be displayed with file name and line numbers there.
     Please note that the Adobe Forums do not accept email attachments. If you want to embed a screen image in your message please visit the thread in the forum to embed the image at http://forums.adobe.com/message/6327947#6327947
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/6327947#6327947
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/6327947#6327947. In the Actions box on the right, click the Stop Email Notifications link.
           Start a new discussion in Dreamweaver support forum at Adobe Community
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/thread/416458?tstart=0.

DW CS3 CSS template problems in EI6

I'm new to CSS and DW, so I tried starting with DW's new CSS
layouts. After working on this off and on for about a year, I
finally got the design to look okay in both FF 2 and IE 7. Wouldn't
you know my client has IE 6 and the layout breaks in 6. In 6 the
middle section, including the banner image, float drop down to the
bottom. If I make the width on #container2 to be 956 pixels instead
of 950, then 6 lets the middle section float up, but all browsers
have a background colored gap between the banner images and one or
more of the sidebar images. I'm ready to pull my hair out!
Here's the link to the page set to work for IE 7 and FF and
to break in 6. The entire site, of course, has many more pages but
this just has the index because I'm experimenting.
http://www.montanahorsesales.com/shf2/
and here's the style sheet that has the problem.
http://www.montanahorsesales.com/shf2/styles/thrColFix.css
The reason I added the #container2 is to get the cream
colored background to show in both IE7 and FF. One or the other was
giving me the dark green background in the main content and the
other was giving me the cream colored main content background like
it was supposed to.
Any suggestions? Is there a quick and easy way to fix this so
it works in all browsers? Or a hack to fix it for IE 6? I can live
without it working in any IE before 6, but I need 6 to work.
In general, it is a mistake to start with DW's included CSS
layouts? I thought it would be such a smart thing to do but now I'm
not so sure!

Cleo3 wrote:
> Any suggestions? Is there a quick and easy way to fix
this so it works in all
> browsers? Or a hack to fix it for IE 6? I can live
without it working in any
> IE before 6, but I need 6 to work.
Hi,
you could try replacing yours for mine...
.leftMargin198 {
margin: 0px;
padding: 0px;
height: 175px;
width: 554px;
float: left;
HTH
chin chin
Sinclair

Css layout or style sheet not showing table layout

When I was working on my website I noticed that my tables don't show up in the browser of my site, they do however, show up in the dreamweaver design so I am wondering if when I was making changes somehow to the site if something in the css layout or style sheet got deleted. Could someone please take a look at it and please tell me what needs to be fixed, I am not at all familiar with css so I need all the help I can get on this here is the link. Thank you! http://angelcoilbartlett.com/index.html

In your HTML document in Code View, remove the following embedded CSS code. This is competing with external style sheet code and causing your site havoc. In the future, don't create any more new styles. You don't need them. Stick with the established styles set up by the original designer and you will have way fewer problems.
DELETE ALL OF THIS NONSENSE:
<style type="text/CSS>

</style>
If you want to continue working with web pages, you owe it to yourself and your employer to learn basic HTML and CSS so you can get yourself out of jam when things go wrong.
Start learning here: HTML & CSS Tutorials - http://w3schools.com/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/
www.twitter.com/altweb
www.alt-web.blogspot.com

Trouble Understanding CSS Layout and Padding

Hi,
I'm having some serious problems understanding CSS layout techniques and the impact of padding and was hoping I could get some help.
Here are a couple of pages that show examples of what I don't "get". The first has padding that causes the layout to look right. The second doesn't have padding but doesn't lay out as I would expect. Also, the amount of text affects the "bottom" div as well. I'm an old hand at HTML and could do this layout in my sleep using tables. Css is a different, frustrating story.
http://www.libertywebmarketing.com/test/1.html
http://www.libertywebmarketing.com/test/2.html
Thanks.
Fitz21

Thank you for the help.There's a lot of valuable info in these answers that I'm going to have to study. I never thought of applying classes to Div tags, but I guess I have to start learning somewhere. I'm not sure how to use the technique, but I'll definately look into it. If I could wake up tomorrow and know what you all know simply by wishing it, I would.
I see that there are many things I have to learn about using CSS and I'd really like to see some real world examples that don't look like typical cheesy CSS designs with columns. If I were going to design this page using HTML, I would probably do something like this: http://www.libertywebmarketing.com/test/3.html
(The last two tables show the table structure and use of a spacer. I know this a seriously antiquated way of doing it, but it's to illustrate what I'm trying to accomplish: Namely, staggered, left/right alternating boxes that will expand properly depending on the amount of copy or the vertical height of the photo in them.)
Dreamweaver 101,
I have "Dreamweaver 8 The Missing Manual" by David Sawyer McFarland, but I find it really concentrates on "typical CSS designs" that look like Content mangement templates. While I agree it's a valuable book, there's nothing in there I have found that addresses anything like what I'm trying to do. Is the Dummies book better for atypical layouts?
Again, thank you all.
Fitz21

Add AP Div to CSS Layout...

Hey,
I really need to add an AP Div to my CSS- Layout (3 column
absolutely positioned) ! No problem BUT i need it to shrink and
grow with the other parts of the page (sidebar1/2, main content,
header, footer etc..) In other words, I need a third sidebar in
this "CSS-Set"... How can I "attach" the apDiv's to the other Divs
such as main content, header... ?!
Thx for help !

On Mon, 12 Jan 2009 15:47:54 +0000 (UTC), "hendrik.r."
<[email protected]> wrote:
> I really need to add an AP Div to my CSS- Layout (3
column absolutely
>positioned) ! No problem BUT i need it to shrink and grow
with the other parts
>of the page (sidebar1/2, main content, header, footer
etc..) In other words, I
>need a third sidebar in this "CSS-Set"... How can I
"attach" the apDiv's to the
>other Divs such as main content, header... ?!
The short answer is, you cannot. Absolutely positioned page
elements
cannot interact with other page elements because they are
removed from the
normal flow of the document. That's what makes absolute
positioning a bad
way to do most things.
Gary

CSS Layout problems

Similar Messages

Maybe you are looking for