PDA

View Full Version : Text shifted to right in sidebar using Dw template


elainehightower
12-30-2008, 12:51 AM
Hi,

I am new at this.

I am trying to build a vertical navigation bar in the left column based on a Dw template (2 column fixed, left sidebar, header and footer).

The text within the sidebar is centered, but shifting to the right a little as if it is being pushed by something invisible on the left-hand side of the div. I can't see anything in the div for the sidebar or the container that I can figure out that would make it behave that way.

Here's what the code looks like... email me if you want a screen shot of what it looks like in Dw.

<div id="sidebar1">
<ul>
<li>about</li>
<li>beach condos</li>
<li>lake house</li>
<li>reservations</li>
<li>links</li>
</ul>
<!-- end #sidebar1 --></div>

Thanks for any help with this! I really appreciate it!

Elaine

edbr
12-30-2008, 01:49 AM
not sure but check padding for the sidebar

Corrosive
12-30-2008, 07:17 AM
not sure but check padding for the sidebar

Some elements in web design have automatic padding and margins. Unordered lists is one of them. Have you tried adding ul {margin: 0; padding: 0;} to your CSS?

elainehightower
12-30-2008, 10:29 AM
thanks! 0 padding, 0 margins did it. after I went to bed I started thinking that I should have sent the css along as well as the code, thank you so much. I am taking classes on lynda.com (as well as real classes when I can afford them) and lynda.com is great but I get stuck sometimes and really need to be able to ask questions. I am so glad I found this forum!

Corrosive
12-30-2008, 10:55 AM
thanks! 0 padding, 0 margins did it. after I went to bed I started thinking that I should have sent the css along as well as the code, thank you so much. I am taking classes on lynda.com (as well as real classes when I can afford them) and lynda.com is great but I get stuck sometimes and really need to be able to ask questions. I am so glad I found this forum!

Hey, no problem. It does help if you post your code but your question gets asked here quite a bit so I had a guess.

Try Googling 'Eric Mayer's Browser Reset'. It's quite interesting as he has written some CSS which is supposed to clear all the defaults in CSS (like the margins and padding in lists). You can add it and start from nothing. It helps you to learn what the subtle differences are between browsers as well.

elainehightower
12-30-2008, 11:39 AM
thanks, I looked into that (Eric M) but am not sure what to do with it. I am definitely at the "know just enough to be dangerous" stage. Ugh. I am really surprised how hard this is to really "get." Is my mind going? Gee. Like I wonder if, at 49, it is hard to learn something new. I am a designer very comfortable in other software and I didn't think this would be so hard to injest. Ok, here's my next question:

I have the list fixed as far as that goes and then I linked the individual li's to their pages. Here's what that looks like in code view:

<div id="sidebar1">
<ul>
<li><a href="../about.html">about</a></li>
<li><a href="../condos.html">beach condos</a></li>
<li><a href="../lake.html">lake house</a></li>
<li><a href="../reservations.html">reservations</a></li>
<li><a href="../links.html">links</a></li>
</ul>

Then I made this style in the css document:

.twoColLiqLtHdr #sidebar1 ul a {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */ (this comment from the template designer)
margin-right: 10px;
text-decoration: none;
display-block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: F9DF75;
list-style-type: none;
line-height: 150%;
font-weight: bold;
}

which made the text look right on the Dw template but when previewed the color is back to that electric blue, except for the last one (links) which is a grey color I initially assigned to my a tag.

Here is another very basic thing I am having trouble with. Say I create a new css rule for a tag that is not yet in my document. How do I assign that tag to existing text? I mean if it doesn't show up in the property inspector under "format" where paragraph and all the headings are, how do you do that? Really you wouldn't believe how I am studying and have my books out and notes and lynda.com running in the background and some of these things I just can't seem to pinpoint, I have been playing around with stuff for 3 days... thank you again.

Corrosive
12-30-2008, 11:56 AM
thanks, I looked into that (Eric M) but am not sure what to do with it. I am definitely at the "know just enough to be dangerous" stage. Ugh. I am really surprised how hard this is to really "get." Is my mind going? Gee. Like I wonder if, at 49, it is hard to learn something new. I am a designer very comfortable in other software and I didn't think this would be so hard to injest.

Eric M was just a 'point of interest' really. I wasn't suggesting you use it at this stage but it is useful for picking out what might be affecting your design when you build. Also, don't worry, when it 'clicks' it really gets a lot easier :wink:

I have the list fixed as far as that goes and then I linked the individual li's to their pages. Here's what that looks like in code view:

<div id="sidebar1">
<ul>
<li><a href="../about.html">about</a></li>
<li><a href="../condos.html">beach condos</a></li>
<li><a href="../lake.html">lake house</a></li>
<li><a href="../reservations.html">reservations</a></li>
<li><a href="../links.html">links</a></li>
</ul>

Then I made this style in the css document:

.twoColLiqLtHdr #sidebar1 ul a {
margin-left: 10px; /* the left and right margin should be given to every element that will be placed in the side columns */ (this comment from the template designer)
margin-right: 10px;
text-decoration: none;
display-block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
color: F9DF75;
list-style-type: none;
line-height: 150%;
font-weight: bold;
}

which made the text look right on the Dw template but when previewed the color is back to that electric blue, except for the last one (links) which is a grey color I initially assigned to my a tag.


Have you set your link styles 'a:link, a:visited' etc? Links are another element of web design that have styles 'pre-set' unless you tell them otherwise. Have a look at the 'page properties' on DW and also read Colo's tutorial on link styles...

http://www.dreamweaverclub.com/css-multiple-link-styles.php

Here is another very basic thing I am having trouble with. Say I create a new css rule for a tag that is not yet in my document. How do I assign that tag to existing text? I mean if it doesn't show up in the property inspector under "format" where paragraph and all the headings are, how do you do that? Really you wouldn't believe how I am studying and have my books out and notes and lynda.com running in the background and some of these things I just can't seem to pinpoint, I have been playing around with stuff for 3 days... thank you again.

I think you can highlight the text and then right click and choose to 'wrap' text in a tag, say h1 (heading 1) or p (paragraph). You also might want to start to use the code view as well and try and understand what is going on there. :)