Tycoon Talk
Become a Big fish!
The number 1 forum for online business!
Post topics, ask questions, share your knowledge.
Tycoon Talk is part of Freelancer.com - find skilled workers online at a fraction of the cost.

CSS Forum


You are currently viewing our CSS Forum as a guest. Please register to participate.
Login



Reply
Tables to DIVS and CSS
Old 10-09-2006, 05:15 PM Tables to DIVS and CSS
Skilled Talker

Posts: 65
Trades: 0
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

Last edited by The Hick Man; 11-18-2006 at 11:08 AM..
The Hick Man is offline
Reply With Quote
View Public Profile
 
 
Register now for full access!
Old 10-09-2006, 08:58 PM Re: Tables to DIVS and CSS
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-10-2006, 01:11 AM Re: Tables to DIVS and CSS
ADAM Web Design's Avatar
Canadastaninianite

Posts: 5,938
Name: Adam for web page design, not program
Location: Toronto, Ontario, Canada
Trades: 0
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 />
.....
__________________

Please login or register to view this content. Registration is FREE
|
Please login or register to view this content. Registration is FREE
(my blog)


Please login or register to view this content. Registration is FREE
(with proof)
ADAM Web Design is offline
Reply With Quote
View Public Profile Visit ADAM Web Design's homepage!
 
Old 10-10-2006, 05:01 AM Re: Tables to DIVS and CSS
Skilled Talker

Posts: 65
Trades: 0
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

Last edited by The Hick Man; 11-18-2006 at 11:09 AM..
The Hick Man is offline
Reply With Quote
View Public Profile
 
Old 10-10-2006, 11:40 AM Re: Tables to DIVS and CSS
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
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

Quote:
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 !

Quote:
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-10-2006, 02:19 PM Re: Tables to DIVS and CSS
Skilled Talker

Posts: 65
Trades: 0
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,

Last edited by The Hick Man; 11-18-2006 at 11:09 AM..
The Hick Man is offline
Reply With Quote
View Public Profile
 
Old 10-10-2006, 05:19 PM Re: Tables to DIVS and CSS
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-10-2006, 06:02 PM Re: Tables to DIVS and CSS
Skilled Talker

Posts: 65
Trades: 0
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

Last edited by The Hick Man; 11-18-2006 at 11:09 AM..
The Hick Man is offline
Reply With Quote
View Public Profile
 
Old 10-10-2006, 07:00 PM Re: Tables to DIVS and CSS
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
Quote:
<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;}

__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE

LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-11-2006, 02:38 PM Re: Tables to DIVS and CSS
Skilled Talker

Posts: 65
Trades: 0
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!!

Last edited by The Hick Man; 11-02-2006 at 11:12 AM..
The Hick Man is offline
Reply With Quote
View Public Profile
 
Old 10-11-2006, 04:22 PM Re: Tables to DIVS and CSS
LadynRed's Avatar
Defies a Status

Posts: 10,016
Location: Tennessee
Trades: 0
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.
Quote:
.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:

Quote:
<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".
__________________
Web Goddess & Web Standards Evangelist :) - Tables Be Gone !!

Please login or register to view this content. Registration is FREE


Please login or register to view this content. Registration is FREE


Last edited by LadynRed; 10-11-2006 at 04:25 PM..
LadynRed is offline
Reply With Quote
View Public Profile
 
Old 10-11-2006, 05:04 PM Re: Tables to DIVS and CSS
Skilled Talker

Posts: 65
Trades: 0
That worked brilliant thank you!

Last edited by The Hick Man; 11-02-2006 at 11:00 AM..
The Hick Man is offline
Reply With Quote
View Public Profile
 
Reply     « Reply to Tables to DIVS and CSS
 

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off





   
RSS Feed  Feeds: RSS   JS   XML
RSS Feed  Feeds for this forum: RSS   JS   XML



Page generated in 1.42303 seconds with 12 queries