#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep Power
    0

    CSS Navigation Bar Question


    I've spent a couple hours trying to tackle this problem, I will admit. I am very new to CSS + HTML. I have an equivilent of a beginer course in java and C++ at my college, but my html and css is limited to the series taught by codeacademy.

    Anyways here is my html file
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
    		<title>High Jacked - "Classic Rock From Yesterday, Today, and Tommarow"</title>
    	</head>
    	<body>
    		<div id="header">
    			<h1>High Jacked</h1>
    			<h3>"Classic Rock From Yesterday, Today, and Tommarow"</h3>
    		</div>
    		<div id="navbar">
    			<div id="navbutton">
    				<ul>
    					<li>Home</li>
    					<li>Events</li>
    					<li>Song List</li>
    					<li>Meet the Band</li>
    					<li>Contact</li>
    				</ul>
    			</div>
    		</div>
    	</body>
    </html>
    Here is the css
    Code:
    body{
    	background-color:#000000;
    }
    #header{
    	border-top:8px solid #708090;
    	border-left:8px solid #708090;
    	border-right:8px solid #708090;
    	border-bottom:8px solid #708090;
    	border-bottom-left-radius:75px;
    	border-bottom-right-radius:75px;
    	background-color:#5A6673;
    	margin-bottom:0px;
    }
    #header h1{
    	font-family:Comic Sans MS;
    	color:#FFFFFF;
    	font-size:45px;
    	text-align:right;
    	padding-right:15px;
    }
    #header h3{
    	font-family:Verdana;
    	color:#FFFFFF;
    	font-size:25px;
    	text-align:right;
    	padding-right:15px;
    }
    #navbar{
    border-left:8px solid #708090;
    border-right:8px solid #708090;
    border-bottom:8px solid #708090;
    border-bottom-left-radius:75px;
    border-bottom-right-radius:75px;
    background-color:#A9B3BC;
    margin:auto;
    width:90%;
    padding-bottom:25px;
    clear:both;
    position:relative;
    margin-top:-18px;
    }
    #navbutton ul li{
    list-style-type:none;
    border:2px solid #708090;
    border-radius:25px;
    color:#FFFFFF;
    font-size:15px;
    font-family:"Lucida Console";
    padding-left:75px;
    padding-right:75px;
    padding-top:8px;
    padding-bottom:8px;
    display:inline;
    margin-top:50px;
    }
    When you run these two files, I have my navigation buttons created the size I would like them, but for the life of me I can't figure out what I'm doing wrong. I want an extra 10-15px or so margin on the button from the bottom "bar", so that it centers inside of that element. Any guidence or suggestions would be awesome.

    Things I remember trying last night:
    padding/margin adjustment;
    adjusting the css id's to narrow it down further(as far as my limited guidence can tell;
    I think it has something to do with the position:inline line in the #navbar ul li. If I remove the position I can get it to move, but I lose the inline apperence. So new to the journey of css, just trying to get on the right track. Thanks for any help you can offer!
  2. #2
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2013
    Posts
    3
    Rep Power
    0
    Took me a few hours(for something so silly), but I figured it out, in case anyone was wondering. I had to change
    Code:
    display:inline
    and change it into
    Code:
    display:inline-block
    I could then move it as necessary. Thanks for those who viewed and pondered over it! Always a better feeling when you figure it out for yourself. XD

IMN logo majestic logo threadwatch logo seochat tools logo