8 replies [Last post]
sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 19 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Hi again! I've got a programmer working on the main nav, but I'm having some issues with the header. I have assigned an absolute position to the logo tag, but it is not viewing correctly once posted. Surprisingly enough, it views correctly in Dreamweaver's "code view." "Live view" actually does replicate the problem online. Go figure! Also, there is a problem with the top nav. Again, it views correctly in "code view" but once posted the links on the left aren't viewing correctly.

The site can be viewed at: http://www.kathydana.com/proof/

Any and all help is greatly appreciated.

CSS:
[@charset "UTF-8";
/* CSS Document */

/* -------------- generic styles ----------------*/

div,h1,h2,h3,h4,h5,h6,p,address,blockquote,span,ul,ol,li,di,dd,dt,img {
margin: 0px;
padding: 0px;
border: none;
}

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100.01%;
text-align: center;
background-repeat: repeat-x;
background-image: url(../_images/background.jpg);
margin: 0 auto;
}

a {
border: none;
text-decoration: none;
}

p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.9em;
color: #666;
margin-bottom: 0.7em;
line-height: 1.6em;
}

#wrapper {
width: 1000px;
min-height: 784px;
margin: 0 auto;
}

#header {
position: relative;
}

#logo {
position: absolute;
margin-left: 25px;
margin-top: 41px;
float:left;
}

/*--------topNav styles ------------*/

#topNav ul {
margin-top: 38px;
margin-right: 30px;
}

#topNav li {
list-style: none;
display: block;
float: right;
padding-left: 20px;
}

#topNav li a:link, topNav li a:visited {
color: #cccc33;
font-size: 0.7em;
font-weight: bold;
line-height: 16px;
}

#topNav li a:hover {
color: #ffffff;
}

/*--------Content styles------------*/

#wrapper #content {
clear: both;
width: 1000px;
padding-top: 68px;
padding-bottom: 30px;
margin: 0 auto;
}
#wrapper #content #mainNav {
margin-top:50px;
display: block;
}

/*--------------footer--------------*/

#footer {
clear: both;
margin-right: 30px;
}

#footer p {
font-size: 0.5em;
line-height: 2em;
color: #666;
text-align: right;
}

]

Source code:
[

Kathy Dana, Inc.

Marketing communications that make sense.

We put companies in a position to market with power and
certainty — to grow and fully succeed. Do you have the fundamentals in place to build a strong brand?

]

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

you position absolutely

you position absolutely positioned elements with left or right and top or bottom, not with margins.

#logo {
  position: absolute;
  left: 200px;
  top: 100px;
}

Never trust anything DW shows you in design view.

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 19 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

I made the change to the CSS,

I made the change to the CSS, but it did not resolve the issue. Any other suggestions? Also, any ideas about the top navigation?

Here's a link to the site: http://www.kathydana.com/proof/

Here's the new CSS:
[@charset "UTF-8";
/* CSS Document */

/* -------------- generic styles ----------------*/

div,h1,h2,h3,h4,h5,h6,p,address,blockquote,span,ul,ol,li,di,dd,dt,img {
margin: 0px;
padding: 0px;
border: none;
}

body {
font-family: Verdana, Geneva, sans-serif;
font-size: 100.01%;
text-align: center;
background-repeat: repeat-x;
background-image: url(../_images/background.jpg);
margin: 0 auto;
}

a {
border: none;
text-decoration: none;
}

p {
font-family: Verdana, Geneva, sans-serif;
font-size: 0.9em;
color: #666;
margin-bottom: 0.7em;
line-height: 1.6em;
}

#wrapper {
width: 1000px;
min-height: 784px;
margin: 0 auto;
}

#header {
position: relative;
}

#logo {
position: absolute;
left: 25px;
top: 41px;
float:left;
}

/*--------topNav styles ------------*/

#topNav ul {
margin-top: 38px;
margin-right: 30px;
}

#topNav li {
list-style: none;
display: block;
float: right;
padding-left: 20px;
}

#topNav li a:link, topNav li a:visited {
color: #cccc33;
font-size: 0.7em;
font-weight: bold;
line-height: 16px;
}

#topNav li a:hover {
color: #ffffff;
}

/*--------Content styles------------*/

#wrapper #content {
clear: both;
width: 1000px;
padding-top: 68px;
padding-bottom: 30px;
margin: 0 auto;
}
#wrapper #content #mainNav {
margin-top:50px;
display: block;
}

/*--------------footer--------------*/

#footer {
clear: both;
margin-right: 30px;
}

#footer p {
font-size: 0.5em;
line-height: 2em;
color: #666;
text-align: right;
}

]

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

you never really told us what

you never really told us what was wrong with the logo stuff, just that it wasnt displaying correctly. what exactly do you want it to do? You also said you have somebody working on the menu for you, you never said what was wrong with it and needed help.

*** edit = sorry, i see your comment about the nav. But you dont have left nav links. You have some that are aligned to the right. you want these right aligned links to be left instead of right? ***

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 19 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

Here's a link to how the logo

Here's a link to how the logo is supposed to appear: http://www.kathydana.com/preview/

As far as the top nav goes, there are five links on the right. Depending on the browser, the first two links--Home and About us-- are not displaying correctly.

And my problem with the main nav was basically, I was in over my head. It required more advanced coding, skills I don't currently possess. I'll get there...someday! Still just a basic CSS/XHTML kinda gal!

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

try this with logo.. #logo {

try this with logo..

#logo { 
  position:absolute;
  left:25px;  
  top:3px;
}

Now about the nav, you need to be clear on what you need. simply saying they are not appearing correctly isnt telling us how they are supposed to appear or what you need. They look almost the same as the mock-up you just provided. plz explain in more detail what the issue is with the nav.

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 19 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

I changed the top to 3px and

I changed the top to 3px and it worked! But, why? I thought it was based on the relative position of the header, in which the original values should have worked...

As far as the top nav goes, the first two links appear dark purple/blue, you can hardly see them. The font, weight and color are not correct. They should match the other links. When you view it on your browser does all five links appear the same? I viewed it on FireFox and Safari and the problem appeared in both.

CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 7 years 3 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

ok, i see whats going on with

ok, i see whats going on with your links. You need to style the links that have been visited.

a:visited {
 
}

sandyhon
sandyhon's picture
Offline
Regular
Cool, CA
Last seen: 10 years 19 weeks ago
Cool, CA
Timezone: GMT-7
Joined: 2007-09-04
Posts: 45
Points: 41

We're in kahoots! I just

We're in kahoots! I just figured it out! I was missing the # mark in front of topNav a:visited !!! Stare at something long enough...

Thanks again for all your help! I GREATLY APPRECIATE IT! Any thoughts on why the original values for the absolute positioning didn't work?