|
|
|
| |||||||||
![]() |
|
|
«
Previous Thread
|
Next Thread
»
|
Thread Tools | Search this Thread | Rate Thread | Display Modes |
|
#1
|
|||
|
|||
|
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 |
|
#2
|
|||
|
|||
|
Im trying to make it like www.trowbridge-wiltshire.co.uk and so as u see i have not had much luck!
|
|
#3
|
||||
|
||||
|
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. |
|
#4
|
|||
|
|||
|
So am i doing ok? Being I only jus started and worked on it for about 20 mins?
|
|
#5
|
||||
|
||||
|
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! |
|
#6
|
|||
|
|||
|
But i got the general idea?
|
|
#7
|
||||
|
||||
|
Of what?
|
|
#8
|
|||
|
|||
|
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. |
|
#9
|
||||
|
||||
|
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>... |
|
#10
|
|||
|
|||
|
Is it supposed to be in a list, rather than a table is css?
|
|
#11
|
||||
|
||||
|
yup.
|
|
#12
|
||||
|
||||
|
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/ |
|
#13
|
|||
|
|||
|
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. |