SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS List Styling Problem.

    Hi guys,

    Im having a problem with styling a list ( Which i have been trying to work out for ages...), Its been driving me insane lol

    I have the following Page

    HTML Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type = "text/css">
    body{
    	background-color:#000;
    	margin:0px;
    	padding:0px;
    }
    
    
    #navholder{
    	
    	width:98%;
    	height:86px;
    	margin-left:1%;
    	margin-top:5px;
    	margin-right:1%;
    	border:1px solid #2B6869;
    	background-image:url(images/navnorm.jpg);
    	background-repeat:repeat-x;
    	
    }
    <!-- The Menu Holder --!>
    #nav{
    	margin:0px;
    	width:100%;
    	height:69px;
    	padding:0px;
    	background-color:#3F3;
    }
    ul{
    	
    	margin:0px;
    	padding:0px;
    	
    }
    li{
    
    	height:86px;
    	width:147px;
    	float:left;
    	line-height:86px;
    	list-style-type:none;
    	font-family:Verdana, Geneva, sans-serif;
    	font-size:12px;
    	text-align:center;
    	
    	
    	
    }
    a:link{
    	text-decoration:none;
    	color:white;
    	
    
    }
    li a:hover{
    	margin:0px;
    	background-image:url(images/over.jpg);
    	padding:40px;
    }
    </style>
    </head>
    
    <body>
    	
    		
            	<div id = "navholder">
                	<div id = "nav">
           	  <ul>
                    	<li>Link 1</li>
                        <li >Link 2</li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                   </div>
                </div>
            
       
    
    </body>
    </html>
    Now what i am trying to achieve is a rollover effect which will replace a repeated background image with a fixed size image.

    Now as you can see from the image im trying to replace the repeated background for the nav with the "glowed" part of the image , I have included my sliced images below.

    If you look at the shownav image ( See Attached ) you will see its almost right but i cant seem to fix it its been driving me mad for almost 2 days now

    PS I had to remove the a tags from my links in my HTML code above so if you can imagine those there it would be good.

    Many thanks to all who reply

    Regards Shab
    Attached Images Attached Images

  2. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, couldyou direct us to a live site because without so, we won't ahve access to the images you do thus we can't see the problem

    Also you don't have a doctype which means your pages are not behaving standardly, add one in. Add thi before <html>
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    ]
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I will upload to a live page so you can see it , Boy thats a damned quickest reply ever ty

    The live link is here :

    shabalaka.com/navmenu/testnav.php

    PS add The www please it said i couldnt post links because i dont have 5 or more posts

    I did have the doctype tag but had to remove all links in the HTML because of the post limit of 5

    Many thanks for your reply


    Regards Shab

  4. #4
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recreated the menu that im trying to create but i made it in flash Just to show you exactly the thing im trying to recreate in CSS , I,ll look into the fade "effect" via Javascript or some other form because i dont want to use it in Flash.

    Many Thanks Shab

  5. #5
    SitePoint Member
    Join Date
    Aug 2009
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i dont see what is the problem,why use repeated background image in menu then changing it for fixed...there is simple solution Sprites...
    tutorial
    ww w.tutorial9. net/wp-content/uploads/2009/08/css-sprites/css_sprites_demo_home. html
    i used it here for testing
    colosseum-gym. com/TEST/ in the menu...same as yours,even yours is even more simple then mine,u need only one image for whole menu...

  6. #6
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply the reason behind me using a repeated background is because i want the links to be textual links instead of graphical ones and each link must be 147px wide to accomodate the link hovered image.

    I will attempt to use Sprites though.

    Thanks again Shab

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Here you go with rollover image preloaded.
    Code:
    <!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>Untitled Document</title>
    <style type="text/css">
    body {
        background-color:#000;
        margin:0px;
        padding:0px;
    }
    #navholder {
        width:98&#37;;
        height:86px;
        margin-left:1%;
        margin-top:5px;
        margin-right:1%;
        border:1px solid #2B6869;
        background:url(http://shabalaka.com/navmenu/images/navnorm.jpg) repeat-x;
    }
    #nav {
        margin:0;
        width:100%;
        height:86px;
        padding:0;
    }
    #nav ul {
        margin:0;
        padding:0;
        list-style-type:none;
        font-family:Verdana, Geneva, sans-serif;
        font-size:12px;
    }
    #nav li,#nav li a {
        height:86px;
        width:147px;
        float:left;
        line-height:86px;
        text-align:center;
        text-decoration:none;
        color:white;
    }
    #nav li{background:url(http://shabalaka.com/navmenu/images/over.jpg) repeat-x}
    #nav li a {background:url(http://shabalaka.com/navmenu/images/navnorm.jpg) repeat-x;}
    #nav li a:hover {background:transparent}
    p {
        font-family:Verdana, Geneva, sans-serif;
        color:white;
        font-size:12px;
    }
    </style>
    </head>
    <body>
    <div id="navholder">
        <div id="nav">
            <ul>
                <li><a href="#">Hello</a></li>
                <li><a href="#">Hello</a></li>
                <li><a href="#">Hello</a></li>
                <li><a href="#">Hello</a></li>
                <li><a href="#">Hello</a></li>
            </ul>
        </div>
    </div>
    <p>The menu im trying to recreate in CSS is below.</p>
    </body>
    </html>

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    Thanks!!!!!!

    Thats exactly what i was trying to achieve

    I have copied and pasted your code so i can compare the differences and see where i was going wrong with my CSS.

    After all we dont learn anything if we dont examine things

    Muchly Appreciated

    Kind Regards Shab

    PS My next step is to look at JS for the fading in effect on rollover

  9. #9
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  10. #10
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the response i,ll take a look at jQuery and see if i can work it out

    After dealing with PHP ,MYSQL and avoiding all forms of JS it seems i now need to look into it...

    Any links for good novice jQuery or Javascript tutorials would be appreciated

    Do you know of any good sites which lists all the functions/methods of Javascript but in similarity to php.net

    Such as can search all string functions on it and see all of them and view the propertys of said method.?

    Regards Shab

  11. #11
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,595
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Well ajax is javascript, but you can access serverside stuff like databases..though don't use ajax because it looks cool-it is JS and can be disabled, so don't purely use it as your base.
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2009
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply i think i will just use the plain CSS solution because as you said JS can be disabled..

    Kind Regards Shab


Bookmarks

Posting Permissions

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