16 replies [Last post]
willy.r
Offline
newbie
Last seen: 12 years 45 weeks ago
Timezone: GMT-4
Joined: 2007-09-27
Posts: 7
Points: 0

Folks, I really am a newbie, so I apologize for what may be a dumb question.

On my fledgling site, I've created a nav bar that, according to what I've read, should appear under the header, and left of the content box, level with the top of the content box. It images correctly in Safari for Windows and Mozilla, but when I view it in IE7, that's when the nav bar repositions itself over the main text.

Here's the CSS:

body { margin: 0px; font: 14px arial, "sans serif"; background-color: #FFFFFF; /*#BEDFC4;*/ }

#header
{
position: absolute;
margin-left: 0px;
margin-top: 0px;
background-color: #FFFFFF;
}

#content
{
position: relative;
width: 700px;
padding: 10px;
}

#navbar {

position: absolute;
margin-left: 0px;
width: 120px;
margin-top: 0px;
font-weight: bold;
background-color: #DC9000; /*#FFFFFF;*/
padding: 0px;
text-align: left;
}

#navbar ul li {
list-style-type: none;
}
#navbar ul li a:link, #navbar ul li a:visited {
display: block;
}
#navbar ul li a:hover {
}

#main-text
{
background-color: #FFFFFF;
padding: 8px;
margin-left: 125px;
border: solid #DC9000 4px; /*#395F0B*/
}

#footer
{
margin-left: 120px;

}


h1, h2, h3 {
text-align: center;
font-family: "Arial-Black, sans-serif";
color: #DC9000;
}
h6 {
color: #000000;
text-align: left;
}

/* The following is supposed to set up colors for the links*/
a:link {
color: #666666;
background-color: 0; /*#95b7cd;*/
}

a:visited {
color: #666666;
background-color: 0; /*#95b7cd;*/
}

a:hover {
background-color: 0; /*#666666;*/
}

a:active {
background-color: 0;
}


And here's the html:



Solid-Gold-Compressors.com C














Thank you for .....

We will quickly .........




FASTER


HIGHER


SOPHISTICATED IN OPERATION





For more information...








Any help would be much appreciated.

Thanks,

Willy.R

AttachmentSize
question.gif16.18 KB
Jeff.tet
Offline
Regular
Last seen: 12 years 23 weeks ago
Timezone: GMT-5
Joined: 2007-09-21
Posts: 25
Points: 0

Try looking into the

Try looking into the appropriate syntax to absolute position. I think that is where you r problem is.

willy.r
Offline
newbie
Last seen: 12 years 45 weeks ago
Timezone: GMT-4
Joined: 2007-09-27
Posts: 7
Points: 0

Thanks Jeff.

Thanks...I've beat that one to death already, but will go back over it again.

'Preciate the comeback.

Willy.R

sticks464
Offline
Enthusiast
Topeka, KS.
Last seen: 8 years 37 weeks ago
Topeka, KS.
Timezone: GMT-6
Joined: 2006-10-18
Posts: 116
Points: 71

I've made the appropiate

I've made the appropiate correction. Take a look

Solid-Gold-Compressors.com C

* {
margin:0;
padding:0;
}
body
{
font: 14px arial, "sans serif";
background-color: #FFFFFF; /*#BEDFC4;*/
}
#wrapper {
width:820px;
margin:10px;
background:#DC9000;
}
#header
{
height:100px; /* Must be same as image height */
background: #FFF url('images/question.gif');
background-repeat:no-repeat;
}
#navbar {
float:left;
width: 120px;
height:100%;
}
#navbar ul li {
list-style-type: none;
}
#navbar ul li a:link, #navbar ul li a:visited {
display: block;
}
#navbar ul li a:hover {
}
#main-text {
float:left;
width:692px;
background-color: #FFFFFF;
border: solid #DC9000 4px; /*#395F0B*/
}
#footer
{
clear:both;
background:#fff;
}
h1, h2, h3 {
text-align: center;
font-family: "Arial-Black, sans-serif";
color: #DC9000;
}
h6 {
color: #000000;
text-align: left;
}
#navbar ul {
margin: 20px 0 0 5px;
list-style: none;
}
#navbar a {
display: block;
padding: 5px;
width: 105px;
border-bottom: 1px solid #eee;
font-weight:bold;
}
#navbar a:link, .menu a:visited {
color: #000;
text-decoration: none;
}
#navbar a:hover {
color: #fff;
border-bottom: 1px solid #333;
}

Thank you for .....
We will quickly .........

FASTER

HIGHER

SOPHISTICATED IN OPERATION



For more information...


Jeff.tet
Offline
Regular
Last seen: 12 years 23 weeks ago
Timezone: GMT-5
Joined: 2007-09-21
Posts: 25
Points: 0

When you use absolute

When you use absolute positions you need to specify the top or left or right positions.

#nav {
postion: absolute;
top: 20px;
etc...
}

I don't like to use absolute positions in my layouts. They can be restrictive and don't necessarily flow good when the browser window is adjusted. Look into floats.

willy.r
Offline
newbie
Last seen: 12 years 45 weeks ago
Timezone: GMT-4
Joined: 2007-09-27
Posts: 7
Points: 0

Thanks All.

Sticks, thanks, I'll load your code to see what's what.

Jeff, I thought I had the top and left code in there already.

Once again, thanks much for the assistance.

Willy.R

willy.r
Offline
newbie
Last seen: 12 years 45 weeks ago
Timezone: GMT-4
Joined: 2007-09-27
Posts: 7
Points: 0

Sticks...about your code:

Thanks, it works well.

Just wondering if you always embed your CSS?

As you can see from my very simplistic efforts, I was trying to have the CSS style sheet external to the html, and linked in, so consistency could be more easily maintained throughout all the pages on the site.

Willy.R

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 14 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

It makes it easier for us to

It makes it easier for us to help here to embed CSS in the HTML we put into code tags, but I for one would always recommend external stylesheets.

LokiLoks

willy.r
Offline
newbie
Last seen: 12 years 45 weeks ago
Timezone: GMT-4
Joined: 2007-09-27
Posts: 7
Points: 0

Lokiloks

Obliged for your response, too.

If you have a moment to look at my very amateurish code, I'm still not able to see what's wrong with it in the sense that the Navbar, only in IE, ends up over the main text, aligned with the left side of the main text box.

And to all other contributors, I thank you as well.

willy.r

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

lokiloks wrote:It makes it

lokiloks wrote:
It makes it easier for us to help here to embed CSS in the HTML we put into code tags

I disagree. Anyone with Firefox and the Web Developer add on can view the CSS with just a couple of mouse clicks, and that's less effort than having to scroll down past all the embedded CSS to see the actual html, which is where the problems usually lie.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

lokiloks
lokiloks's picture
Offline
Enthusiast
Albuquerque, NM
Last seen: 10 years 14 weeks ago
Albuquerque, NM
Timezone: GMT-6
Joined: 2007-05-16
Posts: 145
Points: 24

willy: It appears that

willy:

It appears that sticks 464's reply works just fine.

Re: Ed

By having the CSS in the file I can select the contents of the code box and paste it into my html editor (I use dreamweaver). It's 2x the work for me otherwise. Also I can reply by posting 1 set of code instead of two.

Considering that you'd have to have two seperate "open" actions to do seperate files, I'd say there's no way possible that it's easier for us to have the files seperate. As far as scrolling down, um, a ctrl+f body would be pretty fast.

As far as editing the file(Drunk it's a lot easier in dreamweaver if the css is embedded. First, I don't have to have two seperate files open and saved. Second, I don't have to put the files in a site definition. Third, I don't have to save both files each time I make changes etc.

Anyway, back to the question at hand

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Editing the code locally,

Editing the code locally, yes. I think embedded is best. However if the site in question is online anywhere, it's beneficial for the CSS to be external.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

thepineapplehead

thepineapplehead wrote:
Editing the code locally, yes. I think embedded is best. However if the site in question is online anywhere, it's beneficial for the CSS to be external.

I use Dreamweaver to edit code myself and I find it a lot easier to have the CSS in a separate file. Since you can have several files open at once I only have to click on a tab to go to either file anyway. Much easier than scrolling to the top of my local file to edit the CSS.

Since the position context stays the same betwen tabs when I switch I can keep each file at the appropriate spot for convenience.

Occasionally I will put CSS into the local file, but not for convenience of editing. I do it when I have a style that will only apply to one page and isn't such that it need be available globally.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

willy.r
Offline
newbie
Last seen: 12 years 45 weeks ago
Timezone: GMT-4
Joined: 2007-09-27
Posts: 7
Points: 0

Interesting thread

Hi all....

I've gone back over the CSS and made some mods, as suggested.

Got it working. Thanks.

willy.r

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

sorry, we went a bit

sorry, we went a bit off-topic there Tongue

@Ed, fair enough, I suppose it's a personal thing; you know me though, I work in notepad, so it's easier to have it all open for me in the one window.

Verschwindende wrote:
  • CSS doesn't make pies

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 33 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

thepineapplehead wrote:@Ed,

thepineapplehead wrote:
@Ed, fair enough, I suppose it's a personal thing; you know me though, I work in notepad, so it's easier to have it all open for me in the one window.

So why not run two instances in two windows and use {alt}{tab} to switch between them?

Ah well, we all have different work styles. No more off topic replies here, I promise.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 20 weeks 5 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

I like minimalism. I can't

I like minimalism. I can't deal with having twenty thousand windows on my screen at once!

Verschwindende wrote:
  • CSS doesn't make pies