...

View Full Version : CSS: Having a Bit of Trouble



Psionicsin
04-21-2011, 12:11 PM
This is kind of embarrassing as I should know this, but I can't think of it for the life of me. Two things:

1) I have a navigation menu where I've applied a left margin of "30px" to the anchors. However I'm unable to remove the margin form the first "li". I've tried classes, and it's not working for some reason. What am i doing wrong?




<ul id="navmain">
<li><a class=menufirst href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Contact</a></li>
</ul><!-- END NAVMAIN -->


#navmain {
float: left;
width: 100%;
height: 30px;
font-weight: bold;
background-color: #000000;
list-style: none;
margin: 0;
padding: 0;
}

#navmain a {
float: left;
display: block;
width: 70px;
color: #c1c1c1;
line-height: 30px;
text-decoration: none;
margin: 0 0 0 30px;
padding: 0;
}

.menufirst {
margin-left: 0;
}


2) How do I create rollovers for images that are rendered inline in the html? Here are the image links that I want to create rollovers for, but haven't a clue as to how to go about it.



<div id="content">
<a href="services.html" title="Services"><img src="./images/img1.jpg" alt="" title="Services" /></a>
<a href="portfolio.html" title="Portfolio"><img src="./images/img2.jpg" alt="" title="Portfolio" /></a>
<a href="tutorials.hmtl" title="Tutorials"><img src="./images/img3.jpg" alt="" title="Tutorials" /></a>
<a href="contact.html" title="Contact"><img src="./images/img4.jpg" alt="" title="Contact" /></a>
</div><!-- END CONTENT -->

BulletTimeBill
04-21-2011, 12:26 PM
#navmain li{
margin:0;
}

Yes?

Psionicsin
04-21-2011, 12:34 PM
#navmain li{
margin:0;
}

Yes?

No. That does not work.

artus.systems
04-21-2011, 12:46 PM
Hope this works

#navmain a.menufirst { magin-left:0;}

for #2 you need to use javascript

Psionicsin
04-21-2011, 01:00 PM
Hope this works

#navmain a.menufirst { magin-left:0;}

for #2 you need to use javascript

Had to tinker, but yes this worked. Can you direct me to the JavaScript you're talking about? I wouldn't know what it's called.

BulletTimeBill
04-21-2011, 01:12 PM
Ah I didn't even realise there was a second question, but you don't need javascript for that. CSS will do and is better. http://www.w3schools.com/css/css_image_sprites.asp <- best examples of hover pseudo class.
Also #navmain a.menufirst { magin-left:0;} would remove the margin from your anchor element, and has nothing to do with your list element. I would find it baffling if that did anything that .menufirst{margin:0;} didn't do O.o ...but what ever.

artus.systems
04-21-2011, 01:31 PM
quickly searched google for javascript image rollover
http://www.webdevelopersnotes.com/tips/html/javascript_image_mouse_rollover.php3

yeah and as bullettime suggested CSS based rollover will be more effective

Psionicsin
04-21-2011, 04:18 PM
Thanks very much for you guys help. I ended up the jQuery route and found a simple solution for the rollover...even more simple than CSS. As not to get away from the CSS of this post, I do have one last question. Currently my CSS for the main background look of the site is as follows:



html {
background-color: #c1c1c1;
background-image: url(../images/bg-tile.gif);
margin: 0;
padding: 0;
}

body {
width: 100%;
font-family: "Helvetica", Arial, sans-serif;
font-size: 75%;
background-image: url(../images/bg-menu.png);
margin: 0;
padding: 0;
}

#page-wrap {
width: 940px;
margin: 0 auto 0 auto;
padding: 0;
}


However the background image that's being called on in "Body", isn't showing. I can't figure out what I'm doing wrong here either as it worked with another site I was working on before. I know this is probably all simple for you guys lol.

Here's a screenshot of what I'm talking about:

http://i385.photobucket.com/albums/oo298/Bmoner85/fault.jpg

The black that is behind the main menu SHOULD be extending infinitely to the left and right.

Apostropartheid
04-21-2011, 09:59 PM
#page-wrap {
width: 940px;
margin: 0 auto 0 auto;
padding: 0;
}


Take a look at this again and see if you can figure it out.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum