...

View Full Version : CSS Link/Structure Issues



sykesy69
12-18-2010, 11:24 PM
Hi,

I'm pretty new to this coding stuff and have been pulling my hair out for a couple of days now.

What I'm trying to achieve is a Menu bar, using the CSS List attribute. All looks well when viewing in DW, but as soon as I view in a browser, not only does my CSS List not work, but my whole structure seems to crumble...

If any body could help me out, or at least point me in the right direction I'd truly appreciative...

And now for the Code:

Index.php:

<!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=utf-8" />
<title>Kool Kidd - Home</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/menu.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/logo.gif" width="250" height="125" /></div>
<div id="member">Content for id "members" Goes Here</div>
<div id="menu">
<ul class="cssmenu_shop">
<li class="shop"><a href="http://localhost/koolkidd/shop.php" title="Shop" class="shop"><span class="displace">Shop</span></a></li>
</ul>
<ul class="cssmenu_blog">
<li class="blog"><a href="http://localhost/koolkidd/blog.php" title="Blog" class="blog"><span class="displace">Blog</span></a></li>
</ul>
<ul class="cssmenu_submit">
<li class="submit"><a href="http://localhost/koolkidd/submit.php" title="Submit" class="submit"><span class="displace">Submit</span></a></li>
</ul>
<ul class="cssmenu_faq">
<li class="faq"><a href="http://localhost/koolkidd/faq.php" title="FAQ" class="faq"><span class="displace">FAQ</span></a></li>
</ul>
<ul class="cssmenu_about">
<li class="about"><a href="http://localhost/koolkidd/about.php" title="About" class="about"><span class="displace">About</span></a></li>
</ul>
<ul class="cssmenu_contact">
<li class="contact"><a href="http://localhost/koolkidd/contact.php" title="Contact" class="contact"><span class="displace">Contact</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="page"><h3>Home</h3></div>
<div id="CL">
<div class="featured">Featured content</div>
<div class="news">Last 5 blog posts</div>
</div>
<div id="CR">
<div class="network">Network Section</div>

</div>
</div>
<div id="footer">Content for id "footer" Goes Here</div>
</div>
</body>
</html>

MAINCSS:

@charset "utf-8";
/* CSS Document */

* {
background-position: center top;
margin: 0px;
color: #000000;
}
body {
background-repeat: no-repeat;
}

#wrapper {
height: auto;
width: 900px;
position: relative;
z-index: 1;
margin-right: auto;
margin-left: auto;
}
#header {
height: 125px;
width: 900px;
}
#logo {
height: 125px;
width: 250px;
left: 0px;
top: 0px;
float: left;
}
#member {
font-family: Arial, Helvetica, sans-serif;
text-transform: capitalize;
text-align: right;
height: 25px;
width: 650px;
left: 250px;
top: 0px;
float: left;
}
#menu {
height: 40px;
width: 650px;
position: absolute;
left: 250px;
top: 85px;
float: left;
}
#content {
width: 900px;
top: 125px;
float: left;
height: auto;
}
#page {
height: 20px;
width: 110px;
position: relative;
z-index: 1;
left: 0px;
top: 0px;
padding-left: 10px;
padding-top: 10px;
}
#CL {
float: left;
height: auto;
width: 620px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
position: relative;
}
#CR {
float: left;
height: auto;
width: 240px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
position: relative;
left: 0px;
}
#footer {
float: left;
height: 15px;
width: 890px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}


MENUCSS:

@charset "utf-8";
.displace {
position: absolute;
left: -5000px;
}
/* CSS Document */
/*
*
Home Setup
*/

ul.cssmenu_home {
list-style:none;
padding:0px;
float:left;
margin:0px;
}
ul.cssmenu_home li {
float: left;
}
ul.cssmenu_home li a {
display: block;
width: 108px;
height: 40px;
background: url(../images/home.gif)
}
/*
*
Normal Links
*/

ul.cssmenu_home li.home a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu_home li.home a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu_home li.home a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
*
Shop Setup
*/

ul.cssmenu_shop {
list-style: none;
padding: 0px;
float: left;
margin: 0px;
}
ul.cssmenu_shop li {
float: left;
}
ul.cssmenu_shop li a {
display: block;
width: 108px;
height: 40px;
background: url(../images/shop.gif)
}
/*
*
Normal Links
*/

ul.cssmenu li.shop a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu li.shop a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu li.shop a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
*
Blog Setup
*/

ul.cssmenu_blog {
list-style: none;
padding: 0px;
float: left;
margin: 0px;
}
ul.cssmenu_blog li {
float: left;
}
ul.cssmenu_blog li a {
display: block;
width: 108px;
height: 40px;
background: url(../images/blog.gif)
}
/*
*
Normal Links
*/

ul.cssmenu li.blog a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu li.blog a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu li.blog a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
*
Submit Setup
*/

ul.cssmenu_submit {
list-style: none;
padding: 0px;
float: left;
margin: 0px;
}
ul.cssmenu_submit li {
float: left;
}
ul.cssmenu_submit li a {
display: block;
width: 108px;
height: 40px;
background: url(../images/submit.gif)
}
/*
*
Normal Links
*/

ul.cssmenu li.submit a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu li.submit a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu li.submit a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
*
FAQ Setup
*/

ul.cssmenu_faq {
list-style: none;
padding: 0px;
float: left;
margin: 0px;
}
ul.cssmenu_faq li {
float: left;
}
ul.cssmenu_faq li a {
display: block;
width: 108px;
height: 40px;
background: url(../images/faq.gif)
}
/*
*
Normal Links
*/

ul.cssmenu li.faq a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu li.faq a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu li.faq a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
*
About Setup
*/

ul.cssmenu_about {
list-style: none;
padding: 0px;
float: left;
margin: 0px;
}
ul.cssmenu_about li {
float: left;
}
ul.cssmenu_about li a {
display: block;
width: 109px;
height: 40px;
background: url(../images/about.gif)
}
/*
*
Normal Links
*/

ul.cssmenu li.about a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu li.about a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu li.about a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}
/*
*
Contact Setup
*/

ul.cssmenu_contact {
list-style: none;
padding: 0px;
float: left;
margin: 0px;
}
ul.cssmenu_contact li {
float: left;
}
ul.cssmenu_contact li a {
display: block;
width: 109px;
height: 40px;
background: url(../images/contact.gif)
}
/*
*
Normal Links
*/

ul.cssmenu li.contact a {
background-position: 0 0;
}
/*
*
Hover Links
*/

ul.cssmenu li.contact a:hover {
background-position: 0 -40px;
}
/*
*
Selected/Active Links
*/

ul.cssmenu li.contact a.selected {
background-position: 0 -80px;
}
.displace {
position: absolute;
left: -5000px;
}

Excavator
12-19-2010, 01:07 AM
Hello sykesy69,
Can I ask where you got that menu from? I keep seeing people using multiple ul's with one li in them just like that. I have no idea the reasoning behind that or where it started. If you think about what a list is, one li is not that.
That should really be one ul with an li for each menu item.
Have a look at menu examples here (http://nopeople.com/CSS%20tips/index.html). Lots of ul menus there to copy from.

Other than that...
I see you are floating full width elements. There is no need to float an element that is not going to have something beside it.
You don't seem to know about clearing floats yet. Adding overflow:auto; to a container that has floats in it can change how it looks and acts a lot. Have a look at how using overflow:auto; can clear floats for you (http://www.quirksmode.org/css/clearing.html).
Also see the links in my signature line about validation. They can really help you a lot.


And last, don't trust DW's design view for anything. It does not render code like any browser. Instead, test your code in a modern browser like FireFox... just set up the F12 button to go straight to FF.


Hope that helps a little...

sykesy69
12-19-2010, 01:18 AM
Hey Excavator,

Thanks for getting back to me, I will test in the morning and let you know how I get on.

I copied the code from a friends site that I knew had sprites, but I've just read an article explaining how to do it the exact way you've explained it, so I guess I'll simplify and change that.

I also vaguely remember reading something about clearing something and I was meaning to implement it, I'm now guessing that is the overflow tag you are referring to.

Hopefully when I test tomorrow it works, as I feel as though I've wasted a whole day chasing my tail :(

sykesy69
12-19-2010, 02:34 PM
Well after a few hours of tinkering, I've managed to get the structure looking pretty good. But the images in the CSS don't seem to be showing up, any suggestions???

MainCSS:

@charset "utf-8";
/* CSS Document */

* {
background-position: center top;
margin: 0px;
color: #000000;
}
body {
background-repeat: no-repeat;
}

#wrapper {
height: auto;
width: 900px;
position: relative;
margin-right: auto;
margin-left: auto;
}
#header {
height: 100px;
width: 900px;
}
#logo {
height: 100px;
width: 250px;
left: 0px;
top: 0px;
float:left;
background: url("/images/logo.gif")
}
#logo span {
display: none;
}
#member {
font-family: Arial, Helvetica, sans-serif;
text-transform: capitalize;
text-align: right;
height: 25px;
width: 650px;
top: 0px;
float: left;
}
#menu {
height: 40px;
width: 650px;
top: 60px;
position: absolute;
left: 250px;
float:left;
}
#content {
width: 900px;
top: 125px;
float: left;
height: auto;
overflow:auto;
}
#page {
height: 40px;
width: auto;
position: relative;
z-index: 1;
left: 0px;
top: 0px;
padding-left: 10px;
}
#CL {
float: left;
height: auto;
width: 620px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
position: relative;
overflow:auto;
}
#CR {
float: left;
height: auto;
width: 240px;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
position: relative;
left: 0px;
overflow:auto;
}
#footer {
float: left;
height: 15px;
width: 890px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
}


MenuCSS:

@charset "utf-8";
.displace {
position: absolute;
left: -5000px;
}
/* CSS Document */
#menu_home {
background:url("/images/menu_home.gif") no-repeat;
width:650px;
height:40px;
margin:0;
padding:0;
list-style:none;
}

#menu_home span {
display: none;
}

#menu_home li, #menu_home a {
height:40px;
display:block;
}

#menu_home li {
float:left;
list-style:none;
display:inline;
}

#menu_home-01 {width: 108px;}
#menu_home-02 {width: 108px;}
#menu_home-03 {width: 108px;}
#menu_home-04 {width: 108px;}
#menu_home-04 {width: 109px;}
#menu_home-04 {width: 109px;}

#menu_home-01 a:hover {background:url("/images/menu_home.gif") 0px -40px no-repeat;}
#menu_home-02 a:hover {background:url("/images/menu_home.gif") -108px -40px no-repeat; }
#menu_home-03 a:hover {background:url("/images/menu_home.gif") -216px -40px no-repeat; }
#menu_home-04 a:hover {background:url("/images/menu_home.gif") -324px -40px no-repeat; }
#menu_home-05 a:hover {background:url("/images/menu_home.gif") -432px -40px no-repeat; }
#menu_home-06 a:hover {background:url("/images/menu_home.gif") -541px -40px no-repeat; }

Excavator
12-19-2010, 02:45 PM
In your markup, the path to your images is like this - images/logo.gif

In your CSS you have the path to your images like this - /images/logo.gif

sykesy69
12-19-2010, 03:15 PM
I'd changed the markup since last night and there is no longer any image referencing in the markup just in the css.

I guess what I've assumed is if the index.php is in the root and the images are in the images folder on the root, then I could reference them by using /images/image.gif.

Is that not the case?

I've tried both ways and still nothing...

abduraooft
12-19-2010, 03:49 PM
I guess what I've assumed is if the index.php is in the root and the images are in the images folder on the root, then I could reference them by using /images/image.gif.

Is that not the case? Absolute path reference, starting with / should work irrespective of the relative paths among files.

<a href="http://localhost/koolkidd/blog.php" title="Blog" class="blog"><span class="displace">Blog</span></a> If that's your code, your root folder won't be koolkidd. It would be the folder pointed by localhost. Thus if you need to refer the files using absolute path, you's need to start the path like /koolkidd/... Or you could make a virtual server, say yoursite.com, pointing to the folder /koolkidd in your machine and simplify the situation.

sykesy69
12-19-2010, 04:09 PM
OK, so here's the latest markup:


<!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=utf-8" />
<title>Kool Kidd - Home</title>
<link href="/css/main.css" rel="stylesheet" type="text/css" />
<link href="/css/menu.css" rel="stylesheet" type="text/css" />
</head>


<body>
<div id="wrapper">
<div id="header">
<div id="logo"><a href="index.php" title="Home"> <span>Kool Kidd Home</span></a></div>
<div id="member">Content for id &quot;members&quot; Goes Here</div>
<div id="menu">
<ul id="menu_home">
<li id="menu_home-01"><a href="shop.php"><span>Shop</span></a></li>
<li id="menu_home-02"><a href="blog.php"><span>Blog</span></a></li>
<li id="menu_home-03"><a href="submit.php"><span>Submit</span></a></li>
<li id="menu_home-04"><a href="faq.php"><span>FAQ</span></a></li>
<li id="menu_home-05"><a href="about.php"><span>About</span></a></li>
<li id="menu_home-06"><a href="contact.php"><span>Contact</span></a></li>
</ul>
</div>
</div>
<div id="content">
<div id="page"><h3>Home</h3></div>
<div id="CL">
<div class="featured">Featured content</div>
<div class="news">Last 5 blog posts</div>
</div>
<div id="CR">
<div class="network">Network Section</div>

</div>
</div>
<div id="footer">Content for id &quot;footer&quot; Goes Here</div>
</div>
</body>
</html>

I had been trying to use WAMP to live view what I had been doing. But it seems to be giving me different results now that I've uploading them to my host.

Excavator
12-19-2010, 04:12 PM
See this page about relative paths (http://www.geeksengine.com/article/absolute-relative-path.html).

Do you have this online yet? You will need to test it online sometime or other... might as well give us a link to the test site.

sykesy69
12-19-2010, 04:21 PM
I think I understand the shorthand absolute paths, was a minor slip...

I have the files online here (http://www.koolkiddclothing.com/Test/)...

abduraooft
12-19-2010, 04:43 PM
The images referred by your css are missing. Eg: http://www.koolkiddclothing.com/images/logo.gif

Excavator
12-19-2010, 04:46 PM
This seems to work on my end -

#logo {
height: 100px;
width: 250px;
left: 0px;
top: 0px;
float:left;
z-index:1;
background: url("/Test/images/logo.gif")
}

sykesy69
12-19-2010, 04:55 PM
:o ooopps...

OK, they're there now... I guess I was thinking they needed to in the folder up a level from the index.

But for some reason the hover sprite isn't working???

Excavator
12-19-2010, 05:01 PM
You have #wrapper covering everything. Have a look at how z-index works (http://www.w3schools.com/css/pr_pos_z-index.asp) like stacking transparent layers.

Fix your sprites by removing this bit in red -

#wrapper {
height: auto;
width: 900px;
position: relative;
z-index: -1;
margin-right: auto;
margin-left: auto;
}

sykesy69
12-19-2010, 05:36 PM
Thanks so so much, I feel as though I'm getting somewhere now...

sykesy69
12-20-2010, 12:58 PM
Now that I have the spite working, I've noticed a little problem with it.

When you click on any of the menu buttons, for some reason a horizontal scrollbar pops up. Anybody know what that's all about???

abduraooft
12-20-2010, 03:00 PM
Remove overflow from #menu

sykesy69
12-20-2010, 04:37 PM
Genius :D

sykesy69
01-03-2011, 07:09 PM
After a week off relaxing over Xmas, I'm back on my mission to get this site done.

I've gotten a little further now but again in need of a little help.

2 things

1. I would like to use section headers via a ribbon image (see attached). What would be the best way around this as the colour of the ribbons will change depending on which page you are on. Also I've tried with no success to add these as background images with a negative left position to start them before the div, but they just don't want to show up.

2. Probably need to put this in the wordpress section, but I've been trying to change the spacing of the excerpts to look like the attachment, but alas I just can't seem to do it.

Any help is good help guys, thanks in advance.

Test site here (http://www.koolkiddclothing.com/Test/)

Excavator
01-03-2011, 07:25 PM
1. I would like to use section headers via a ribbon image (see attached). What would be the best way around this as the colour of the ribbons will change depending on which page you are on. Also I've tried with no success to add these as background images with a negative left position to start them before the div, but they just don't want to show up.

Try something like this -


.ribbon {
line-height: 30px;
padding: 0 20px;
background: #0f0;
position: absolute;
top: 50px;
left: -20px;
z-index: 999;
}
.ap {
position: absolute;
top: 50px;
left: -20px;
z-index: 999;
}



<div id="CL">

<div style="position: relative; height: 300px; background: url(&quot;/images/Slide2.png&quot;) no-repeat scroll 0% 0% transparent;" id="slider" class="nivoSlider">
<div class="ribbon" id="ap">text here</div>
<img style="display: none;" src="/images/Slide1.png" alt="">
<img style="display: none;" src="/images/Slide2.png" alt="">
<img style="display: none;" src="/images/Slide3.png" alt="">
<div style="left: 0px

You would need to add an id to each .ribbon that needed different positioning. You could add another class to that with some negative margin on .ribbon's that did not need absolute positioning, that way you could keep re-using it.

Make sense?

Excavator
01-03-2011, 07:28 PM
2. Probably need to put this in the wordpress section, but I've been trying to change the spacing of the excerpts to look like the attachment, but alas I just can't seem to do it.

Like this?


.news p {
margin: 0 10px;
}

sykesy69
01-03-2011, 08:50 PM
Try something like this -


.ribbon {
line-height: 30px;
padding: 0 20px;
background: #0f0;
position: absolute;
top: 50px;
left: -20px;
z-index: 999;
}
.ap {
position: absolute;
top: 50px;
left: -20px;
z-index: 999;
}



<div id="CL">

<div style="position: relative; height: 300px; background: url(&quot;/images/Slide2.png&quot;) no-repeat scroll 0% 0% transparent;" id="slider" class="nivoSlider">
<div class="ribbon" id="ap">text here</div>
<img style="display: none;" src="/images/Slide1.png" alt="">
<img style="display: none;" src="/images/Slide2.png" alt="">
<img style="display: none;" src="/images/Slide3.png" alt="">
<div style="left: 0px

You would need to add an id to each .ribbon that needed different positioning. You could add another class to that with some negative margin on .ribbon's that did not need absolute positioning, that way you could keep re-using it.

Make sense?

Thanks, this worked to an extent. But is there a reason it would now stop my slideshow from showing up???

Also the ".new p" margin fix didn't work, I'm thinking I might need to and it in the wordpress stylesheet. I'll give it a go and let you know...

Excavator
01-03-2011, 09:08 PM
Thanks, this worked to an extent. But is there a reason it would now stop my slideshow from showing up???

Also the ".new p" margin fix didn't work, I'm thinking I might need to and it in the wordpress stylesheet. I'll give it a go and let you know...

Not a clue about your slider but .news p entry in your main.css is putting a 10px left/right margin on your text like it is supposed to.

sykesy69
01-13-2011, 01:40 PM
Thanks Excavator, you're right the margin did actually work but I think I also was looking for the spacing between each post and between the date stamp and entry which I've now been able to figure out...

But I couple things once again on my mind:

1. I seem to be having spacing issues when using <small> with linked items. If you look at the footer, the last line with Private Policy and Terms of Use are linked and also giving some type of margin or padding to the top???

2. In IE8 and Firefox the margins for my sidebar are displaying correctly, but when viewed in IE7 they are pushed to the left...

Once again any insight is more than helpful.

Apostropartheid
01-13-2011, 01:54 PM
Thanks Excavator, you're right the margin did actually work but I think I also was looking for the spacing between each post and between the date stamp and entry which I've now been able to figure out...

But I couple things once again on my mind:

1. I seem to be having spacing issues when using <small> with linked items. If you look at the footer, the last line with Private Policy and Terms of Use are linked and also giving some type of margin or padding to the top???

2. In IE8 and Firefox the margins for my sidebar are displaying correctly, but when viewed in IE7 they are pushed to the left...

Once again any insight is more than helpful.

1) Removing the line break fixes this for me. To be honest, you shouldn't be using the small element. And if you are, not as many as you're using.

2) In your universal declaration, you forgot to zero the padding. Firefox uses padding by default to add an indent to a list; IE uses margins. As you used a negative 44 pixel margin to counteract the effects in Firefox, in IE you just caused a negative indent. Removing the negative margin from your ULs and adding padding: 0 to your universal selector will solve the issue.

sykesy69
01-13-2011, 02:32 PM
1) Removing the line break fixes this for me. To be honest, you shouldn't be using the small element. And if you are, not as many as you're using.

2) In your universal declaration, you forgot to zero the padding. Firefox uses padding by default to add an indent to a list; IE uses margins. As you used a negative 44 pixel margin to counteract the effects in Firefox, in IE you just caused a negative indent. Removing the negative margin from your ULs and adding padding: 0 to your universal selector will solve the issue.

1) If you lose the breaks how do i get the seperated lines?? Also what can I use instead of small and how would I get around not using it as much without altering the styling?

2) :D [scratching head] my universal declaration??? Forgive my ignorance, but would that be included in the sidebar css id or in the class which it belongs??? Edit:I found the Universal Declaration and thanks you as this is now fixed

Thanks for both enlighting me as well as slightly baffling me ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum