Poblems - CSS-Tricks

This topic is empty.

Viewing 13 posts - 1 through 13 (of 13 total)

Author

Posts
February 7, 2009 at 4:38 pm #24131

hal8
Member

Hi can anyone please help

Ive been copying the online video with the converting a mock up to css. And i am on part two where the nav changes colour when you hover over it but for some reason when i try it my nav seems to be stuck in the middle of the page and not on top of the content bg like it is on the vid.

Can anyone help me out. I have done exactly as Chris has done on the vid regarding script…so im very puzzled !!

I have attached an image.

Thanks

February 8, 2009 at 10:05 am #54197

hal8
Member

Ok so i managed to sort that problem out i think. But for some reason my last nav tab wont come up in the browser. I dont know what ive done wrong becuase it’s exactly the same as the other tabs but with diff url name ? It should come up next to The PFA !!

Any ideas ?

I have attached a pic again

February 8, 2009 at 10:33 am #54198

ikthius
Member

can you post a link to the page on the net?

that way we can view it and look at the code

ik

February 8, 2009 at 10:44 am #54199

hal8
Member

Umm not at the moment

Here is the css

/* CSS Document */

*/

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html {overflow-y: scroll; }
body {
font: 62.5 Helvetica, sans-serif;
background: url(images/body-bg.jpg) top left repeat;
}

ul { list-style: none inside; }
p { font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em; }
a {outline: none; }
a img {border: none; }
/* END RESET*/

/* TOOLBOX */
.floatleft { float: left; }
.floatright { float: right; }
.clear { clear: both; }
/* END TOOLBOX */

/* STRUCTURE AND STUFF */
#page-wrap {
width: 980px;
margin: 0 auto;
background: url(images/content-bg.jpg) repeat-y;
}

#main-content {
padding: 40px 60px 40px 60px;
}
ul#nav {
}
ul#nav li {
display: inline;
}
ul#nav li a {
display: block;
height: 87px;
text-indent: -9999px;
float: left;
}
ul#nav li.home a {
width: 193px;
background: url(images/nav-home.jpg) bottom center no-repeat;
}

ul#nav li.forum a {
width: 118px;
background: url(images/nav-forum.jpg) bottom center no-repeat;
}

ul#nav li.playing-abroad a {
width: 175px;
background: url(images/nav-abroad.jpg) bottom center no-repeat;
}

ul#nav li.education a {
width: 131px;
background: url(images/nav-education.jpg) bottom center no-repeat;
}

ul#nav li.PFA a {
width: 119px;
background: url(images/nav-pfa.jpg) bottom center no-repeat;
}

ul#nav li.contact a {
width: 244;
background: url(images/nav-contact.jpg) bottom center no-repeat;
}
ul#nav li a:hover {
background-position: top;
}

#footer {
min-height: 94px;
background: url(images/footer.jpg) no-repeat;
}

AND HERE IS THE HTML

<!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="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="page-wrap">

<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="forum"><a href="#">Forum</a></li>
<li class="playing-abroad"><a href="#">Playing Abroad</a></li>
<li class="education"><a href="#">Education</a></li>
<li class="PFA"><a href="#">The PFA</a></li>
<li class="contact"><a href="#">Contact Us</a></li>

</ul>

<div id="main-content">

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using ‘Content here, content here’, making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for ‘lorem ipsum’ will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>

</div>

<div id="footer">
</div>

</body>
</html>

February 8, 2009 at 11:00 am #54200

ikthius
Member

thanks for the code, but as there are no images I cant see anything that will happen……

thats why having your page on the net can help us help you

[img]http://www.honeycomb-web.co.uk/phpTesting/grass.jpg[/img]

February 8, 2009 at 11:35 am #54202

hal8
Member

Righ ok i understand i think.

Try

http://www.footballsmylife.com

February 8, 2009 at 11:52 am #54203

ikthius
Member

"hal8" wrote:

Righ ok i understand i think.

Try

http://www.footballsmylife.com

ok looks like your ul has indented try bringing it back to the right abit, change this:
ul#nav {
}

to this:
ul#nav {
margin-left:-40px;
}

-40px is bang on for me in FF on a 1024x768px 17" monitor

February 8, 2009 at 12:05 pm #54204

hal8
Member

Hey thanks for the tip. It works fine in my FF too but not in my ie or opera. Do you know if there is a fix or something for it ?

Thanks again anyway

February 8, 2009 at 12:16 pm #54205

ikthius
Member

"hal8" wrote:

Hey thanks for the tip. It works fine in my FF too but not in my ie or opera. Do you know if there is a fix or something for it ?

Thanks again anyway

works the same on FF3, IE7&8, Opera, chrome & safari here
IE6 however is a problem

I changed the

Code:

ul#nav li.contact a {
width: 241px; //changed this number
background: url(http://www.footballsmylife.com/images/nav-contact.jpg) bottom center no-repeat;
}

it is as close as I can get it to perfection:

February 8, 2009 at 12:33 pm #54206

hal8
Member

Thanks…..but it does still seem to be the same in my opera. I still have ie 6 on the pc so its also messed up on that one !!

February 8, 2009 at 2:30 pm #54208

ikthius
Member

"hal8" wrote:

Thanks…..but it does still seem to be the same in my opera. I still have ie 6 on the pc so its also messed up on that one !!

what about the other browsers?

you may have to do an overhaul with some different sizes for IE6

February 9, 2009 at 7:36 am #54147

hal8
Member

In the other browsers its not in coreect place too. I downloaded ie 8 and its wrong place in there too. So only in right place in FF !!

I dont understand why it wont just fit in where it should be if the page wrap is correct !! :(

February 10, 2009 at 7:10 pm #54109

Rob MacKay
Participant

hey dude – not looked at the code… my eyes are hurtin, but just tryin to catch up on the forums lol So if what I say is rubbish, just dont listen :D

Make sure you position everything with "position:relative/absolute; left:XXpx; top:XXpx;" If you use margin or padding to position its going to be out, cross browser, and will cause you problems.

Thats all… if its no help, move along please :)
Author

Posts

Viewing 13 posts - 1 through 13 (of 13 total)

The forum ‘CSS’ is closed to new topics and replies.