CSS Help
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
User Name:
Password:
Remember me
Go Back   Dev Shed ForumsWeb DesignCSS Help

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
Thread Tools Search this Thread Rate Thread Display Modes
 
Unread Dev Shed Forums Sponsor:
  #1  
Old June 14th, 2004, 01:14 PM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
How am i getting on?

Can you look at http://www.trowbridge-wiltshire.co.uk/document.php and tell me how I am getting on.
How would I create the side bar without using A Table?
How do I create the Title bars I have on http://www.trowbridge-wiltshire.co.uk such as the "Introduction area.

Im quite confused by this and any help would be great. I mean, we only jus learn tables at uni and know it has changed, it is hard to learn, and think different.

Thank you

Reply With Quote
  #2  
Old June 14th, 2004, 01:15 PM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Im trying to make it like www.trowbridge-wiltshire.co.uk and so as u see i have not had much luck!

Reply With Quote
  #3  
Old June 14th, 2004, 05:09 PM
kk5st's Avatar
kk5st kk5st is offline
Thanks Johnny Hart (BC) R.I.P.
Dev Shed Demi-God (4500 - 4999 posts)
 
Join Date: May 2003
Location: Dallas
Posts: 4,674 kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level)kk5st User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 1 Month 3 Days 15 h 15 m 50 sec
Reputation Power: 687
First, let's talk about the layout paradigm. CSS positioning acknowledges the liquid flow of html. Positioning centers around static and relative position, which are in the flow, and absolute, fixed, and float which are not. It is important that you understand what each is and how each works. Big John (one of the CSS 'names') and Holly Bergevin have a great site that really lays open the guts of CSS positioning. http://www.positioniseverything.net/ . Everyone using CSS would benefit from reading/studying every article.

Your page is basically a banner plus two or three columns. This is a common base layout. Examples may be found at glish.com CSS layout techniques and other tutorial sites.

XHTML which descends from xml, not html, requires that all elements and attributes be lower case. XML also suggests that the markup be semantic. For example, the list of links in the left column should be just that, a list of links—not a table.

There are a number of things I could carp on, but I think if you get the major things (CSS positioning and semantic markup), the rest will fall into place.

cheers,

gary
__________________
There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

My html and css workshop, demos and tutorials.
Ask a better question, get a better answer.

Reply With Quote
  #4  
Old June 15th, 2004, 06:08 AM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
So am i doing ok? Being I only jus started and worked on it for about 20 mins?

Reply With Quote
  #5  
Old June 15th, 2004, 06:19 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Cunning Linguist
Dev Shed God 10th Plane (9500 - 9999 posts)
 
Join Date: Jul 2003
Location: I used to live at home, now I stay at the house
Posts: 9,920 ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)  Folding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner Folder
Time spent in forums: 3 Months 2 Weeks 6 Days 7 h 15 m 40 sec
Reputation Power: 873
Facebook
Well I think it safe to say you are only coding/testing for MSIE...

Seeing as you're just starting, now is the perfect time to sort that out. Run along to mozilla.org, and get yerself a free copy of FireFox0.9. It is hands down the best browser available, and it's free.

Ok, now if you make a site work in IE just cos like 80% of surfers use it, then firstly you need a beating[!], and secondly, when you come round from your beating, you're gonna spend ages [read:weeks!] trying to fix the dodgy proprietary code to allow for proper browsers...

Whereas if you start off coding/testing in FireFox, you're site will undoubtedly work in all major browsers, and only require a few minor[!] hacks to get it working in IE too...

So do yourself a favour...
__________________
Support requests via PM will be ignored!
Sites: Route of Queue | Sinthetic - Alternative UK Hiphop
Read These: The General Rules Thread | The General FAQ Thread | NEW USERS - How to post a question

Sign up with Matched.co.uk and earn up to £15 per website every month!


Reply With Quote
  #6  
Old June 15th, 2004, 06:35 AM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
But i got the general idea?

Reply With Quote
  #7  
Old June 15th, 2004, 07:07 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Cunning Linguist
Dev Shed God 10th Plane (9500 - 9999 posts)
 
Join Date: Jul 2003
Location: I used to live at home, now I stay at the house
Posts: 9,920 ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)  Folding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner Folder
Time spent in forums: 3 Months 2 Weeks 6 Days 7 h 15 m 40 sec
Reputation Power: 873
Facebook
Of what?

Reply With Quote
  #8  
Old June 15th, 2004, 07:41 AM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
The general idea of css!

Im stuck, as in firefox my page displays fine however in Ie its going off the screen! What is causing this. Im not worried about the side panel yet as Im unsure how to do that.

Reply With Quote
  #9  
Old June 15th, 2004, 07:47 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Cunning Linguist
Dev Shed God 10th Plane (9500 - 9999 posts)
 
Join Date: Jul 2003
Location: I used to live at home, now I stay at the house
Posts: 9,920 ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)  Folding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner Folder
Time spent in forums: 3 Months 2 Weeks 6 Days 7 h 15 m 40 sec
Reputation Power: 873
Facebook
Err, no, not really then...

You've hardly used css, and when you have it's done awkwardly. You're menu is still in a huge table. In every td you have STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" as inline styles. Whereas you should create a .td class and put the styles in the <head>...

Reply With Quote
  #10  
Old June 15th, 2004, 07:49 AM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
Is it supposed to be in a list, rather than a table is css?

Reply With Quote
  #11  
Old June 15th, 2004, 07:55 AM
ChiefWigs1982's Avatar
ChiefWigs1982 ChiefWigs1982 is offline
Cunning Linguist
Dev Shed God 10th Plane (9500 - 9999 posts)
 
Join Date: Jul 2003
Location: I used to live at home, now I stay at the house
Posts: 9,920 ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)ChiefWigs1982 User rank is Lieutenant General (80000 - 90000 Reputation Level)  Folding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner FolderFolding Points: 50746 Folding Title: Beginner Folder
Time spent in forums: 3 Months 2 Weeks 6 Days 7 h 15 m 40 sec
Reputation Power: 873
Facebook
yup.

Reply With Quote
  #12  
Old June 15th, 2004, 07:58 AM
Akh's Avatar
Akh Akh is offline
|<.+#f@#+.&.|
Dev Shed Frequenter (2500 - 2999 posts)
 
Join Date: Mar 2002
Location: norway
Posts: 2,715 Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level)Akh User rank is Brigadier General (60000 - 70000 Reputation Level) 
Time spent in forums: 4 Weeks 17 h 42 m 44 sec
Reputation Power: 642
that the menu should be a list rather than a table has nothing to do with css, it has with semantics and structual markup.

http://www.camaban.co.uk/semanticwhat.php
http://www.webaim.org/techniques/structure/

and you should validate your pages, you got some errors you ought to remove.
http://validator.w3.org/

Reply With Quote
  #13  
Old June 15th, 2004, 08:04 AM
adiwood adiwood is offline
Contributing User
Dev Shed Newbie (0 - 499 posts)
 
Join Date: Jan 2004
Location: bournemouth
Posts: 165 adiwood User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 5
So how do i convert this:

Code:
<TABLE Width="100%" >

	<TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='index.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white;" HREF="http://www.trowbridge-wiltshire.co.uk/index.php">Homepage</a></TD>
    </TR>

    <TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='history.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white;" HREF="http://www.trowbridge-wiltshire.co.uk/history.php">History</a></TD>
    </TR>

 	<TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='wildlife.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white; " HREF="http://www.trowbridge-wiltshire.co.uk/wildlife.php">Wildlife</a></TD>
    </TR>

    <TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='future.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white; " HREF="http://www.trowbridge-wiltshire.co.uk/future.php">The Future</a></TD>
    </TR>

	<TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='uncomplete.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white; " HREF="http://www.trowbridge-wiltshire.co.uk/uncomplete.php">Your Stories</a></TD>
    </TR>

    <TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='leisure.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white;" HREF="http://www.trowbridge-wiltshire.co.uk/leisure.php">Leisure</a></TD>
    </TR>

	<TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='pub.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white" HREF="http://www.trowbridge-wiltshire.co.uk/pub.php">Pub Guide</a></TD>
    </TR>

    <TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='clubbing.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white;" HREF="http://www.trowbridge-wiltshire.co.uk/clubbing.php">Nightclub Guide</a></TD>
    </TR>

    <TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='eating.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white;" HREF="http://www.trowbridge-wiltshire.co.uk/eating.php">Eating Out</a></TD>
    </TR>

    <TR>
		<TD ALIGN="CENTER" STYLE="cursor:hand; border: 1px; border-style: solid; border-color: #4B7BD3; background-color:#87B4EB" ONCLICK="window.location='takeaways.php'" ONMOUSEOVER="this.style.backgroundColor='#4B7BD3'" ONMOUSEOUT="this.style.backgroundColor='#87B4EB'"><A style="text-decoration:none; color:white;" HREF="http://www.trowbridge-wiltshire.co.uk/takeaways.