Hi everyone,

I am slowly converting my site from a table based layout into a css one that uses DIVs and I am trying to replace my links table with a div...

I wasn't sure how to cretae ths gaps/padding between the links (like tables can) and so I just created a separate DIV for each link and I wanted to check with u pro's that this is the best way to go about this? I want to get my coding right and efficient...

<div class="links1"; div style="position: absolute; left: 150px; top: 200px;
height: 400px; width: 100px; padding: 1em;">
<div align="right">
<div style="height: 20px; width: 100px;">
<a href="page1.html">HOME</a><br>
</div>
<div style="height: 20px; width: 100px;">
<a href="page2.html">NEWS</a><br>
</div>
<div style="height: 20px; width: 100px;">
<a href="page3.html">LAST MATCH</a><br>
</div>
<div style="height: 20px; width: 100px;">
<a href="page4.html">LAST</a><br>
</div>
<div style="height: 20px; width: 100px;">
<a href="page5.html">LAST</a><br>
</div>
<div style="height: 20px; width: 100px;">
<a href="page6.html">LAST</a>
</div>
</div>
</div>

I a slowly weening myself off using Dreamweaver and I am a bit concerned that the pages which include all my css etc look a complete mess when previewed in Deamweaver but are perfect on-line - is this something to be worried about or is this normal for css layouts?

Thanks very mcuh in advance

First of all, do NOT do this as a bunch of <div>s. It is better to use an unordered list for a menu or... LIST.. of links
<div id="list">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="news.html">News</a></li>
<li><a href="lastmatch.htm">Last</a></li>
etc....
</ul>
</div>

It is not necessary to use position absolute either, it is better to use the normal document flow or floats than positioning eveything. A common mistake of newbies.

That could be a drop-down submenu, in which case absolute positioning could be acceptable (since submenus pull out of the normal document flow anyway).

Anyway, you could also get away with this:

.links1 a {
display: block;
height: 20px;
width: 100px;
}
<a href="(your site root)">Home</a><br />
<a href="news.html">News</a><br />
.....

Thanks for you responses...

I am using absolute position to make sure the link are in the correct place in my navigation bar div on each page and also align it to the right - not sure how I am supposed to achieve this otherwise?

Also LadynRed that code snippet doesn't look like it will create space between each link - stretch them out a bit...

ADAM that looks like it might so I will try this - thank you...

Do you know if Dreamweaver not previewing my site as I would expect and how it is online in design mode is commonplace or not for css?

Cheers

I am using absolute position to make sure the link are in the correct place in my navigation bar div on each page and also align it to the right - not sure how I am supposed to achieve this otherwise?

Absolute positioning is not necessary for that at all. You DO need to structure your site correctly first though.

http://www.barelyfitz.com/screencast...s/positioning/
http://css-discuss.incutio.com/?page=CssLayouts

Also LadynRed that code snippet doesn't look like it will create space between each link - stretch them out a bit...

That's what margins and padding are used for !

Do you know if Dreamweaver not previewing my site as I would expect and how it is online in design mode is commonplace or not for css?

Dreamweaver's internal 'design view' is still based on IE 5.5.. seriously out of date and messy. You're going to have to set up your external preview to use MODERN browsers in order to get an ACCURATE view of what's going on.

Thanks for links they're really helpful...

I am including the links file with this code in as an inckude in my leftnavigation div...

I am now using relative positioning but is it better to define this in my css file or my links.php page where links are?

Also float doesn't seem to separate the links like I want e.g.

NEWS

FORUM

LINKS

A line break is too big and I need to define this...

Thanks for all your help with this,

I told you, if you want to space out the links you need to use margin or padding on the element that is wrapping your links. If you're just using the <a href>, then you need to put padding or margins in the link element in your CSS.

You clearly don't understand enough if you think Floats are for spacing content. You do not need to use position on everything. There is likely NO reason to use position:relative on a navigation list.

Sorry I didn't mean to put float I meant padding it makes my links like so...

and if I'm not supposed to use position:relative for position how would you suggest I get my list of links to display in the correct place over my column graphic in my left layout div as it is included like so...

<div id="leftcolumn">
<?php
include('links.php');
?>
</div>

Then on links page...

<div class="links1" align="right"; div style="position:relative; top:20px; left:-10px;">
<a class"<?php getCSS("")?>" href="index.php" alt="Home" title="Home">HOME</a><br>
<a class"<?php getCSS("news")?>" href="index.php?section=news" alt="News" title="News">NEWS</a><br>
<a class"<?php getCSS("next match")?>" href="index.php?section=next%match" alt="Next Match" title="Next Match">NEXT MATCH</a><br>
<a class"<?php getCSS("club info")?>" href="index.php?section=club%info" alt="Club Info" title="Club Info">CLUB INFO</a><br>
<a class"<?php getCSS("about")?>" href="index.php?section=about" alt="About Us" title="About Us">ABOUT US</a><br>
<a class"<?php getCSS("directions")?>" href="index.php?section=directions" alt="Directions" title="Directions">GROUND DIRECTIONS</a><br>
<a class"<?php getCSS("fixtures results")?>" href="index.php?section=fixtures%results" alt="Fixtures and Results" title="Fixtures and Results">FIXTURES &amp; RESULTS</a><br>
<a class"<?php getCSS("tables")?>" href="index.php?section=tables" alt="Tables" title="Tables">TABLES</a><br>
<a class"<?php getCSS("players")?>" href="index.php?section=players" alt="Players" title="Players">PLAYER PROFILES</a><br>
<a class"<?php getCSS("lookalikes")?>"href="index.php?section=loo kalikes" alt="Look-a-likes" title="Look-a-likes">LOOK-A-LIKES</a><br>
<a class"<?php getCSS("stats")?>"href="index.php?section=stats" alt="Stats" title="Stats">STATS</a><br>
<a class"<?php getCSS("events")?>"href="index.php?section=events" alt="Events" title="Events">EVENTS</a><br>
<a class"<?php getCSS("message board")?>"href="javascriptoptastic('MessageBoard ');" alt="Message Board" title="Message Board">MESSAGE BOARD</a><br>
<a class"<?php getCSS("guestbook")?>"href="index.php?section=gues tbook" alt="Guestbook" title="Guestbook">GUESTBOOK</a>
</div>

Thanks again

<div id="leftcolumn">
<div class="links1" align="right"; div style="position:relative; top:20px; left:-10px;>
<a class"links1 A:link" href="index.php" alt="Home" title="Home">HOME</a><br>
<a class"links1 A:link" href="index.php?section=news" alt="News" title="News">NEWS</a><br>
<a class"links1 A:link" href="index.php?section=next%match" alt="Next Match" title="Next Match">NEXT MATCH</a><br>
<a class"links1 A:link" href="index.php?section=club%info" alt="Club Info" title="Club Info">CLUB INFO</a><br>
<a class"links1 A:link" href="index.php?section=about" alt="About Us" title="About Us">ABOUT US</a><br>
<a class"links1 A:link" href="index.php?section=directions" alt="Directions" title="Directions">GROUND DIRECTIONS</a><br>
<a class"links1 A:link" href="index.php?section=fixtures%results" alt="Fixtures and Results" title="Fixtures and Results">FIXTURES &amp; RESULTS</a><br>
<a class"links1 A:link" href="index.php?section=tables" alt="Tables" title="Tables">TABLES</a><br>
<a class"links1 A:active" href="index.php?section=players" alt="Players" title="Players">PLAYER PROFILES</a><br>
<a class"links1 A:link"href="index.php?section=lookalikes" alt="Look-a-likes" title="Look-a-likes">LOOK-A-LIKES</a><br>
<a class"links1 A:link"href="index.php?section=stats" alt="Stats" title="Stats">STATS</a><br>
<a class"links1 A:link"href="index.php?section=events" alt="Events" title="Events">EVENTS</a><br>
<a class"links1 A:link"href="javascriptoptastic('MessageBoard'); " alt="Message Board" title="Message Board">MESSAGE BOARD</a><br>
<a class"links1 A:link"href="index.php?section=guestbook" alt="Guestbook" title="Guestbook">GUESTBOOK</a>
</div>

Ok, you're doing it all wrong on the links, sorry.
It needs to be <a class="links1" href="blah blah blah">Next Match</a>
Then your CSS needs to be as like this:


.links1 a:link {
font: 11px bold Arial, sans-serif;
color: white;
text-decoration: none;
margin: 0;
padding: 50px; /* this will add 50px padding ALL AROUND !*/
padding: 5px 3px; /* Top/Bottom and Left/Right values
}

You also need some rules on the div holding the links:
.links1{text-align: right; width: 130px; margin-left: 30px;}

Reall sorry to harp on about this!! ....

BUT it just wont move each indivisual link out even tho it extends the area around it...

why wont it spread the text out!?

I have put a border around them so you cna see what's goin on


Thank you!!

I told you to use an unordered list.. because that's what it IS - but you didn't like that idea. You also need to stop making up your own HTML and CSS rules "div style...." inside a set of rules for links is NOT VALID, there is no such thing.

Do it this way and you'll get your spacing.

.links1 {
color: #0000FF;
font-weight: bold;
text-align: right;
/*div style: position:relative;*/
width: 130px;
margin-left: 10px;
margin-top: 40px;
}
/*add this rule */
.links1 a{
line-height: 2.0em;
}

.links1 a:link {
font: Arial;
font-size: 11px;
font-weight: bold;
color: white;
margin: 0;
/*border: 1px solid white;*/
padding: 0px;
}
.links1 a:visited {
font: Arial;
font-size: 11px;
font-weight: bold;
color: white;
margin: 0;
padding: 0px;
}
.links1 a:hover {
font: Arial;
font-size: 11px;
font-weight: bold;
color: white;
margin: 0;
border: 1px solid red;
padding: 0px;
}
.links1 a:active {
font: Arial;
font-size: 11px;
font-weight: bold;
color: white;
margin: 0;
padding: 0px;
}

Your LINK section in your HTML should be:

<div class="links1">
<a href="index.php" alt="Home" title="Home">HOME</a><br />
<a href="index.php?section=news" alt="News" title="News">NEWS</a><br />

<a href="index.php?section=next%match" alt="Next Match" title="Next Match">NEXT MATCH</a><br>
<a href="index.php?section=club%info" alt="Club Info" title="Club Info">CLUB INFO</a><br>
<a href="index.php?section=about" alt="About Us" title="About Us">ABOUT US</a><br>
<a href="index.php?section=directions" alt="Directions" title="Directions">GROUND DIRECTIONS</a><br>
<a href="index.php?section=fixtures%results" alt="Fixtures and Results" title="Fixtures and Results">FIXTURES &amp; RESULTS</a><br>

<a href="index.php?section=tables" alt="Tables" title="Tables">TABLES</a><br>
<a href="index.php?section=players" alt="Players" title="Players">PLAYER PROFILES</a><br>
<a href="index.php?section=lookalikes" alt="Look-a-likes" title="Look-a-likes">LOOK-A-LIKES</a><br>
<a href="index.php?section=stats" alt="Stats" title="Stats">STATS</a><br>
<a href="index.php?section=events" alt="Events" title="Events">EVENTS</a><br>
<a href="javascriptoptastic('MessageBoard');" alt="Message Board" title="Message Board">MESSAGE BOARD</a><br>
<a href="index.php?section=guestbook" alt="Guestbook" title="Guestbook">GUESTBOOK</a>

There is NO reason to add the CLASS="LINKS1" on every tag, that is what the stylesheet is for ".links1" for the div with a class "links1" and .links1 a:hover will cover all links INSIDE the div with the calls "links1".

That worked brilliant thank you!