Id like to create a site similar looking to this : apaul .com

 

But with html.

 

But instead of flash image i will have a logo jpeg above links and centred.

 

I want to add links across the way like on this site but with html, how do i get these links spaced, and centred like it is on this site? but all html or css?

Id like to create a site similar looking to this : apaul .com

 

But with html.

 

But instead of flash image i will have a logo jpeg above links and centred.

 

I want to add links across the way like on this site but with html, how do i get these links spaced, and centred like it is on this site? but all html or css?

 

 

I Would have the links in DIV containers and define left and right padding in css.

Something like this:

 

 

CSS:

 

.navbar {

width:1000px
padding:5px;
margin:auto;

}


.navbox {

width:50px;
padding-left:5px;
padding-right:5px;

}

 

 

html:

<div class="navbar">


<div class="navbox"><a href="link.html">link name</a></div>
<div class="navbox"><a href="link.html">link name</a></div>
<div class="navbox"><a href="link.html">link name</a></div>
<div class="navbox"><a href="link.html">link name</a></div>
<div class="navbox"><a href="link.html">link name</a></div>
<div class="navbox"><a href="link.html">link name</a></div>
<div class="navbox"><a href="link.html">link name</a></div>

</div>

Edited February 11, 201115 yr by unknownmale

Go with the list method.

 

HTML

<ul>
     <li><a href="#">Item 1</a></li>
     <li><a href="#">Item 2</a></li>
     <li><a href="#">Item 3</a></li>
     <li><a href="#">Item 4</a></li>
</ul>

 

CSS

ul {
list-style-type: none;
}
li {
float: left;
padding-right: 10px; /* Or what ever you want */
padding-left: 10px; /* Or whatever you want */
}

Edited February 11, 201115 yr by MikeChipshop

Ok thank you,

 

and how do you position the image and links in the centre of screen.

from top to bottom centred.

 

i used CENTER TAGS each side of the UL but it did not center also.

Edited February 11, 201115 yr by hunty

Don't use <center> tag as it's depreciated.

Instead wrap it in a...

<div id="wrapper">
<img src="blah.jpg" />
</div>

 

with the CSS of...

#wrapper {
width: ??? /* same width as image */
margin-right: auto;
margin-left: auto;
}

Edited February 11, 201115 yr by MikeChipshop

...or use

#wrapper {
text-align: center;
}

Strangely enough that's what I put before and then change it for some reason :s

thanks, il give it a go and get back to you. thanks.