Please check my site

MNuTz · #1 (**permalink**) Nov 2nd, 2007, 10:40

Hi there,

I have decided to get back into web development and I am very rusty and CSS is all new to me.

I have been asked to knock up a basic site for the company where my g/f works.

http://framemill.000webhost.info

I have only spent a couple of hours on it, I did not create the CSS file myself, instead I took my brother in laws and modified it to get what I wanted.

I would be very grateful if someone could have a look over it and suggest anything I should redo or go off and read up on

I am fully prepared to be called stupid

so don't hold back.

I was unsure how to separate the 5 links so i created 5 div's and put one link in each. It looks how i want it to look but i need to know whether its working correctly underneath.

The site is still being worked on btw.

Phixon · #2 (**permalink**) Nov 2nd, 2007, 12:15

What I would consider the correct way to do the links is in the form of an unordered list, styled with css, its neat, easily updateable and plenty of style options. Here is a tutorial http://www.456bereastreet.com/archiv...avigation_bar/

MNuTz · #3 (**permalink**) Nov 4th, 2007, 05:08

Thanks for link, i have used the example to create a test page on my PC. It looks good but i have one problem:

All the links sit to the left of the bar, i would prefer them to each be spaced equally across the menu bar as in the link on the first post.

I have tried changing "float:left;" but that just messes it up. I really dont want to have to start minutely adjusting margins to get the effect i am after.

Code: Select all

#nav {
    margin:0;
    padding:0;
    background:#324d9e;
    width:100%;
    float:left;
    border:1px solid #22356a;
    border-width:1px 0;
}
#nav li {
    display:inline;
    margin:0;    
    padding:0;
}
#nav {
    margin:0;
    padding:0;
}
#nav li {
    display:inline;
    margin:0;    
    padding:0;
}
#nav a:link,
#nav a:visited {
    color:white;
    background:#324d9e;
    padding:5px 20px 4px 20px;
    float:left;
    width:auto;
    border-right:1px solid #22356a;
    text-decoration:none;
    font:bold 1em/1em Arial, Helvetica, sans-serif;
    text-transformed:uppercase;
    text-shadow:2px 2px 2px #555;
}
#nav li:first-child a {
    border-left:1px solid #22356a;
}
#nav a:hover {
    colour:#fff;
    background:#a0a0a0;
}

thats the CSS the tuorial uses, having a play with it but i just can not figure it out.

AdRock · #4 (**permalink**) Nov 4th, 2007, 20:13

Could you not have some margin and padding for each of the list items as well as floating them left?

Also you have duplicated some of your code.

Try changing this

Code: Select all

#nav li {
    display:inline;
    margin:0;    
    padding:0;
}

to

Code: Select all

#nav li {
   float: left;
   margin-left:80px;
}

Monie · #5 (**permalink**) Nov 5th, 2007, 04:46

Here is a complete example I got from my website:

Code: Select all

<style type="text/css">
#navlinks {
    margin: 0 auto; /*center your menu div*/
    padding: 0.5em 0em;
    width: 700px; /*set your menu div width*/
    border: 1px solid red;
    text-align: center; /*Center your links in the center of the div*/
}
#navlinks li {
    display: inline;
    margin-right: 0.4em;
    padding-left: 0.75em;
    border-left: 1px solid #99C;
    font-weight: bold; 
    color: #99C;
}
#navlinks li.last {
    border-right: 0;
}
#navlinks li.first {
    border-left: 0;
}
}
</style>

and in your body:

Code: Select all

<div class="links"> /*just put this "navlink" in your existing "links "div*/
    <ol id="navlinks">
        <li class="first"><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
        <li><a href="#">Link 4</a></li>
        <li><a href="#">Link 5</a></li>
        <li><a href="#">Link 6</a></li>
        <li><a href="#">Link 7</a></li>
        <li class="last"><a href="#">Link 8</a></li>
    </ol>
</div>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Please check out my site	prevail	Free Web Site Critique	3	Jun 10th, 2008 00:34
Check out my site	coldy	Free Web Site Critique	2	Apr 24th, 2008 11:39
Check out this Web site, please!	phoon	Free Web Site Critique	4	Apr 10th, 2008 14:03
Check Site	csa	Web Page Design	4	Jun 30th, 2006 08:46
Please check site	csa	Web Page Design	3	Mar 23rd, 2006 09:27

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Please check my site