Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts

    CSS: Having a Bit of Trouble

    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?

    Code:
    <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.

    Code:
    <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 -->

  • #2
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    Code:
    #navmain li{
         margin:0;
    }
    Yes?
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #3
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by BulletTimeBill View Post
    Code:
    #navmain li{
         margin:0;
    }
    Yes?
    No. That does not work.

  • #4
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    Hope this works
    Code:
    #navmain a.menufirst { magin-left:0;}
    for #2 you need to use javascript

  • #5
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by artus.systems View Post
    Hope this works
    Code:
    #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.

  • #6
    Regular Coder
    Join Date
    May 2010
    Location
    Bathurst, Australia
    Posts
    180
    Thanks
    1
    Thanked 22 Times in 22 Posts
    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.
    Disclaimer: I'm hungover 70% of the time i'm on here, any information given may not be correct, or even legible.

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    5
    Thanks
    0
    Thanked 1 Time in 1 Post
    quickly searched google for javascript image rollover
    http://www.webdevelopersnotes.com/ti..._rollover.php3

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

  • #8
    Regular Coder Psionicsin's Avatar
    Join Date
    Aug 2010
    Location
    Detroit, Michigan
    Posts
    348
    Thanks
    54
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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:



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

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Quote Originally Posted by Psionicsin View Post
    Code:
    #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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •