Dreamweaver not showing me exactly what's on my site

[astronaut]

I am a complete newb to web design, so please bear with me. This is also my first time using both Dreamweaver and CSS. I am trying to put together a site using just xhtml and css - nothing fancy. But the problem I'm having is that Dreamweaver won't show me what my site REALLY looks like in the design view. It's CS4 and all I've been reading about is how great the live view is, but it doesn't help if the display says my left navigation column is in one place, but it is really three inches further to the left. I am pretty sure it has to do with my completely screwed up understanding of CSS & working with floats, positioning, and everything in between. I feel like I can get some stuff to work right, but then I'll just crush it all without knowing what was working in the first place.


GAAAHHHHH!!!!!!!


Okay, sorry about that. I'm just frustrated from going around in circles. Could someone please explain to me what I can do? And yes, if I need to looking something up in a book, I can do that. I have EVERY book on CSS checked out from the library.

Thanks

 

[bugeyesweb]

Go to lynda.com and get yourself a tutorial.

 

[astronaut]

That's what I've been watching. I have the Dreamweaver CS4 series, plus the CSS Site Design and the CSS for Designers. I'm much more of a hands-on kind of person. If I can just fill in a few gaps, I can figure the rest out myself. I feel like I'm missing something when I'm comparing the four different types of position, as well as when to use float instead of position.

So, I guess the bottom line is that I just need a clearer definition of terms and then a little wisdom on how & when to apply them. Any input?

 

[bugeyesweb]

here's your problem. You need to attach the style sheet from within dreamweaver. While in the properties tab editing text, go into -style- and select attach style sheet. Once the code which looks like this
<link href="style.css" rel="stylesheet" type="text/css" />
is implemented, your set.

 

[astronaut]

here's your problem. You need to attach the style sheet from within dreamweaver. While in the properties tab editing text, go into -style- and select attach style sheet. Once the code which looks like this
<link href="style.css" rel="stylesheet" type="text/css" />
is implemented, your set.

i've got the syle sheet attached and it's working just fine. i'm just not sure how to do certain things. Here's a good example of something that's messing me up:
My horizontal nav bar is set up like this:

<div id="nav_main">
<ul id= "nav_main_list">
<li>Products</li>
<li>Services</li>
<li>Departments</li>
<li>Contact Us</li>
</ul>
</div>

The CSS is:

#nav_main {
position: absolute;
left: 140px;
width: 900px;
}
#nav_main #nav_main_list li {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
font-weight: bold;
color: #FFF;
background-color: #900;
text-align: center;
border: 1px solid #000;
list-style-type: none;
float: left;
position: relative;
height: 18px;
width: 100px;
padding-right: 5px;
padding-left: 5px;
}
}
#nav_main #nav_main_list {
background-color: #900;
width: 900px;
position: absolute;
}

I just want to move the menu so it is flush with the site banner which is just above it. I thought I could just position the div tag the way I wanted it, but that won't work.

Oh, and how do I get rid of the gap between one object above another? I know there are several ways, but I get this gap everytime I have a new div tag. Do I have to manually give each object corrected top/bottom values or is there a simple trick to getting rid of it?

Also, what's the difference between the width/height values found in box and the ones found in position?

 

[astronaut]

And another thing that's been adding to my problems is the fact that Dreamweaver's design view is screwing me up big time. I mean, it looks like a Picasso painting! I make the position changes, load in browser, go back and make estimated changes, reload, and repeat again. WTF??? Why can't it just show me what it looks like? Other than remaking my entire site soley with AP Div's, is there any other way I can just drag stuff around? I've been Googling as much as I can, but there's so much I'm just not quite tapping into yet.

 

[PixelPusher]

I hear your frustration astronaut, this should help:

I thought I could just position the div tag the way I wanted it, but that won't work.

Typically you should not have to put the UL inside a DIV to position it because a UL is a block level element itself. (has same properties as a DIV)

Float were originally designed to allow text to wrap around an image in a paragraph, like a text wrap in Illustrator. Before floats you would have to place an IMG tag in the middle of a body of text to try and create the same effect. That being said, a floated element sits above normal (base-level) content, so a div with floated items only will not adjust in height because the content is well floating lol, there is no base level content forcing the height to expand. To remedy this you need to use Float Clearing.

Oh, and how do I get rid of the gap between one object above another?

Certain elements (DIV, P, UL) have inherit margins. If you don't define them, a browser will assign the default setting. To eliminate the gap, set your margin-top (or all) to zero. {margin:0;} or {margin-top:0;}

FYI top, bottom, left, and right values only apply to position and position has to be set for them to be effective.

Also, what's the difference between the width/height values found in box and the ones found in position?

Not sure what you mean here?


I will take a look at the code below and post up any changes.

 

[PixelPusher]

K here is the code cleaned up:

CSS

#nav_main_list {
position: absolute;
left: 140px;
width: 900px;
}
#nav_main_list li {
background-color: #900;
border: 1px solid #000;
list-style-type: none;
float: left;
height: 18px;
width: 100px;
margin:0;
padding: 0 5px;
font: bold 14pt Tahoma, Geneva, sans-serif;
color: #FFF;
text-align: center;
}

HTML

<ul id= "nav_main_list">
<li>Products</li>
<li>Services</li>
<li>Departments</li>
<li>Contact Us</li>
</ul>

NOTES:

Like I said below, there isn't really a need to wrap the UL in a DIV because the UL can handle the same properties, hence making your code shorter and cleaner

When writing CSS:

IDs (#): There isnt really a need to write [#nav_main #nav_main_list {}] because the "id" is unique in itself. The time you would write something lik ethis would be if you were using a general class and you wanted to specify one instance of it. Like this:

general class: ul.floatList { }
specific element: div#main_nav {}
Targeting the general class in the specific element: div#main_nav .floatList {} (Any styles here will only apply to the .floatList located inside of #main_nav.)

You might want to use short hand code where ever you can. I did this for you padding and font styles.

Example:

padding:0px; >> padding:0; (dont need to use "px" when writing zeros)

padding: top right bottom left; >> padding: 0 5px 10px 9px; (order for different padding)

padding: 5px; (applies padding to all four sides)

padding: 0 6px; (applies 0 padding to top/bottom, and 6 to left/right)

Look into short hand for other tags, it helps reduce the file size of your stylesheets

 

[PixelPusher]

And another thing that's been adding to my problems is the fact that Dreamweaver's design view is screwing me up big time. I mean, it looks like a Picasso painting! I make the position changes, load in browser, go back and make estimated changes, reload, and repeat again. WTF??? Why can't it just show me what it looks like? Other than remaking my entire site soley with AP Div's, is there any other way I can just drag stuff around? I've been Googling as much as I can, but there's so much I'm just not quite tapping into yet.

I use DW but I never rely on the designer window. I also use Code view all the time. Best suggestion is to just preview(F12) in browser when you have made a change, this way you know for sure that items are placed where you want them.

 

[LouTheDesigner]

Anytime I make a change in code while in dreamweaver and it doesn't display properly in the Design View, I simple resize the window slightly causing the design view to refresh. Very helpful.

 

[bugeyesweb]

I hope that helped him pixelpusher. Good answer.

 

[PixelPusher]

I hope that helped him pixelpusher. Good answer.

Thanks bugeyesweb.