1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Need CSS help getting a navigation menu aligned

Discussion in 'CSS' started by netpox, Jan 5, 2011.

  1. #1
    Here is the page: http://www.survilla.com/test.php
    The navigation menu is to the left but I want it to be centered (actually have it starting right below the logo). I want to have the navigation menu to go across the whole screen like it does right now just want to move the navigation links to the center.

    This is the code displaying the navigation:

    
    <style media="all" type="text/css">@import "/menu/menu_style.css";</style>
    <div class="menu">
    <ul>
    <li><a id="current" href="http://www.survilla.com/index.php" target="_self" >Home</a>
    </li>
    <li><a href="http://www.survilla.com/new.php" target="_self" >New Surveys</a>
    </li>
    <li><a href="http://www.survilla.com/popular.php" target="_self" >Popular Surveys</a>
    </li>
    </ul>
    </div>
    
    HTML:
    and this is the css file where i'm guessing it needs to be modified:

    
    .menu{
    	border:none;
    	border:0px;
    	margin:0px;
    	padding:0px;
    	font-family:verdana,geneva,arial,helvetica,sans-serif;
    	font-size:14px;
    	font-weight:bold;
    	color:8e8e8e;
    	}
    .menu ul{
    	background:url(images/menu-bg.gif) top left repeat-x;
    	height:43px;
    	list-style:none;
    	margin:0;
    	padding:0;
    	}
    	.menu li{
    		float:left;
    		padding:0px 8px 0px 8px;
    		}
    	.menu li a{
    		color:#666666;
    		display:block;
    		font-weight:bold;
    		line-height:43px;
    		padding:0px 25px;
    		text-align:center;
    		text-decoration:none;
    		}
    		.menu li a:hover{
    			color:#000000;
    			text-decoration:none;
    			}
    	.menu li ul{
    		background:#e0e0e0;
    		border-left:2px solid #0079b2;
    		border-right:2px solid #0079b2;
    		border-bottom:2px solid #0079b2;
    		display:none;
    		height:auto;
    		filter:alpha(opacity=95);
    		opacity:0.95;
    		position:absolute;
    		width:225px;
    		z-index:200;
    		/*top:1em;
    		/*left:0;*/
    		}
    	.menu li:hover ul{
    		display:block;
    		}
    	.menu li li {
    		display:block;
    		float:none;
    		padding:0px;
    		width:225px;
    		}
    	.menu li ul a{
    		display:block;
    		font-size:12px;
    		font-style:normal;
    		padding:0px 10px 0px 15px;
    		text-align:left;
    		}
    		.menu li ul a:hover{
    			background:#949494;
    			color:#000000;
    			opacity:1.0;
    			filter:alpha(opacity=100);
    			}
    	.menu p{
    		clear:left;
    		}	
    	.menu #current{
    		background:url(images/current-bg.gif) top left repeat-x;
    		color:#ffffff;
    		}
    		
    
    HTML:
    Please let me know what i need to modify to have the navigation buttons moved towards the center but still keeping the bar going across the page.
     
    netpox, Jan 5, 2011 IP
  2. netpox

    netpox Active Member

    Messages:
    1,623
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    90
    #2
    If you think this is a quick fix I can send you $5 paypal right now for the first person that helps me get this resolved. Thanks
     
    netpox, Jan 5, 2011 IP
  3. CSM

    CSM Active Member

    Messages:
    1,047
    Likes Received:
    24
    Best Answers:
    0
    Trophy Points:
    55
    #3
    I hope the line

    
    <style media="all" type="text/css">@import "/menu/menu_style.css";</style>
    
    Code (markup):
    is in the head section, anyway I would not recommend using @import... just apped your CSS to your existing CSS file, if you have any.

    The code from your site is ... very bad -> http://validator.w3.org/check?uri=http://www.survilla.com/test.php

    I don't know why you use XHTML 1.0 Strict if you have no clue of HTML at all.

    2 <head> sections (one of them in the <body>) are not the way to work.

    First fix your errors (I would say you go XHTML 1.0 Transitional instead of Strict).

    Oh by the way, visit w3schools.com to learn HTML/CSS!
     
    CSM, Jan 5, 2011 IP
  4. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,945
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    110
    #4
    You need to change a lot for this page to work like you want it.

    This :

    <style media="all" type="text/css">@import "/menu/menu_style.css";</style>
    Code (markup):
    Needs to be in between the
    <head>
    Code (markup):
    and
    </head>
    Code (markup):
    tags.


    Upon my first look you have all the "table data" styled the same. Change that. Give yourself some room for variation. I would do as one person said earlier, and learn a bit more about HTML and CSS and come back later and work on it.

    Keep up the learning, you will eventually do well. :)
     
    Blue Star Ent., Jan 5, 2011 IP
  5. netpox

    netpox Active Member

    Messages:
    1,623
    Likes Received:
    27
    Best Answers:
    0
    Trophy Points:
    90
    #5
    k thanks yea still learning, i got someone that PM me and we're going to work together getting it fixed.
     
    netpox, Jan 5, 2011 IP
  6. Blue Star Ent.

    Blue Star Ent. Well-Known Member

    Messages:
    1,945
    Likes Received:
    28
    Best Answers:
    0
    Trophy Points:
    110
    #6
    Awesome... good luck to you.
     
    Blue Star Ent., Jan 5, 2011 IP
  7. websitestudios

    websitestudios Peon

    Messages:
    46
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    Also, you can create a div that is parent to all the id's that has the attribute

    margin: 0 auto;
     
    websitestudios, Jan 5, 2011 IP