Jump to content
Please Use CODE Tags

CSS Nav bar help

MemeMaster
By MemeMaster
in Programming
 Share
Posted

Hi,

 

My nav bar is a bit messed up on my website and I dont know how to fix it.

 

Here is the HTML Code:

<!DOCTYPE html><html>	<head>		<link type="text/css" rel="stylesheet" href="stylesheet.css" />		<title>Home page</title>	</head>	<body>		<h1 class="h1">Welcome to my website!</h1>		<!-- Div classes for other pages -->		<div class="home_button"></div>		<div class="about_button"></div>		<div class="contact_button"></div>		<!-- Links to other pages -->		<ul>  			<li><a href="index.html">Home</a></li>  			<li><a href="about.html">About</a></li>  			<li><a href="contract.html">Contact</a></li>		</ul>	</body></html>

And here is the CSS Code:

/* Styles unordered lists */ul {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;}/* Styles all lists */li {    float: left;}/* Styles links */a:link, a:visited {    display: block;    width: 120px;    font-weight: bold;    color: #FFFFFF;    background-color: #58D3F7;    text-align: center;    padding: 4px;    text-decoration: none;    text-transform: uppercase;}/* Styles links */a:hover, a:active {    background-color: #2E9AFE;}

I want my nav bar to spread across the whole screen, not just be on the left.

 

Thanks to anyone that can help :)

 

- Meme

post-221867-0-44141400-1432592236_thumb.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I remember having fussed with those.

Put the 3 buttons in a div of class center.

<div class="center">    <div class="home_button"></div>    <div class="about_button"></div>    <div class="contact_button"></div></div>
# CSScenter {    margin: 0 auto    width : <width of your 3 buttons combined>}

That time I saved Linus' WiFi pass from appearing on YouTube: 

A sudden Linus re-appears : http://linustechtips.com/main/topic/390793-important-dailymotion-account-still-active/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

 

I remember having fussed with those.

Put the 3 buttons in a div of class center.

 center {    margin: 0 auto    width : <width of your 3 buttons combined>}

Still doens't work :(

 

I updated the HTML to:

<!-- Links to other pages --><div class="center">	<ul>  		<li><a href="index.html">Home</a></li>  		<li><a href="about.html">About</a></li>  		<li><a href="contract.html">Contact</a></li>	</ul></div>

And the CSS to:

center {    margin: 0 auto;    width : 360px;}
Link to comment
Share on other sites
Link to post
Share on other sites
Posted

 

Still doens't work :(

 

I updated the HTML to:

<!-- Links to other pages --><div class="center">	<ul>  		<li><a href="index.html">Home</a></li>  		<li><a href="about.html">About</a></li>  		<li><a href="contract.html">Contact</a></li>	</ul></div>

And the CSS to:

center {    margin: 0 auto;    width : 360px;}

 

Then i'm sorry. I'm not a HTML / CSS Connaiseur by any change :/

That time I saved Linus' WiFi pass from appearing on YouTube: 

A sudden Linus re-appears : http://linustechtips.com/main/topic/390793-important-dailymotion-account-still-active/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Then i'm sorry. I'm not a HTML / CSS Connaiseur by any change :/

It's okay, but thanks anyway :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

link code

<!-- Links to other pages --><div class="links">	<ul>  		<li><a href="index.html">Home</a></li>  		<li><a href="about.html">About</a></li>  		<li><a href="contract.html">Contact</a></li>	</ul></div>

css

/* Styles unordered lists */ul {    list-style-type: none;    margin: 0;    padding: 0;    overflow: hidden;}/* Styles all lists */ul li {    float: left;/*Add this to make each LI 1/3 of the screen width (as you have 3 buttons) */    width: 33%;}/* Styles links */a:link, a:visited {    display: block;/* changed the width to 100% to fill the whole of the width I changed above */    width: 100%;    font-weight: bold;    color: #FFFFFF;    background-color: #58D3F7;    text-align: center;    padding: 4px;    text-decoration: none;    text-transform: uppercase;}/* Styles links */a:hover, a:active {    background-color: #2E9AFE;}

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×