Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

New Layout

Status
Not open for further replies.
Cullen411

Cullen411

Programmer
Aug 17, 2005
89
GB
Hi this is the new layout that I have been working on, it validates. I would like to know your thoughts on how it has been constructed, anything that stands out that might need changed or could be done better.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="keywords" content="Keywords to go here">
<meta name="description" content="Description to go here">
<style type="text/css">
body {
margin: 1px 0 0 0;
padding:0;
background-color: #fff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
}

#topnavigation
{
padding: 0;
margin: 4px 0 14px 0;
background-image:url("/images/navbar.jpg");
border-color: #8CA5CE;
text-align:center;
height:22px;
}

#container
{
width: 100%;
margin: 0;
background-color: #fff;
position:absolute; top:90px;
}

#leftnav
{
float: left;
width: 140px;
margin: 0;
padding: 0.3em;
background:#EEF3FB;
border:2px solid #8CA5CE;
}

#rightnav
{
float: right;
width: 140px;
margin: 0;
padding: .3em;
background:#EEF3FB;
border:2px solid #8CA5CE;
}

#content
{
margin-left: 200px;
margin-right: 200px;
}

#searches p
{
color:navy;
}

.sidenav
{
padding: 1px;
margin-left:0;
padding-left:0;
list-style-image: url(/images/Button.gif);
list-style-position: inside;
}

#footer
{
clear: both;
margin: 0;
padding: .5em;
text-align:center;
}

#leftnav p, #rightnav p { margin: 0 0 1em 0; }
#content h1 { margin:0; padding:0;font-size:13px;}
#content h2 { margin:0; padding:0;font-size:13px;}
#content h3 { margin:0; padding:0;font-size:13px;}
#content p { margin:5px 0 25px 0; padding:0;}
#content p { margin:5px 0 25px 0; padding:0;}
#content p { margin:5px 0 25px 0; padding:0;}

img { border:0;}

#leftnav a:link { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none;font-size: 11px;color: #000099}
#leftnav a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none}
#leftnav a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000099; text-decoration: none; font-size: 11px}
#leftnav a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none;}

#rightnav a:link { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none;font-size: 11px;color: #000099}
#rightnav a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none}
#rightnav a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000099; text-decoration: none; font-size: 11px}
#rightnav a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none;}

#topnavigation a:link { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none;font-size: 11px;color: #000099}
#topnavigation a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none}
#topnavigation a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000099; text-decoration: none; font-size: 11px}
#topnavigation a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none;}

a:link { font-family: Verdana, Arial, Helvetica, sans-serif; text-decoration: none;font-size: 11px;color: #000099}
a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none}
a:hover { font-family: Verdana, Arial, Helvetica, sans-serif; color: #000099; text-decoration: none; font-size: 11px}
a:active { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; color: #000099; text-decoration: none;}

.submit
{
font-size:11px;
font-weight: bold;
background: #eef3fb;
border: 2px solid #8ca5ce;
color:#8ca5ce;
height:22px;
}
* html #slider
{
position:relative;
left:-3px;
}

.input
{
font-size:11px;
background: #ffffff;
border: 1px solid #8ca5ce;
color:#000000;
height:19px;
width:180px;
}
</style>
</head>

<body>
<div style="margin:2px;">
<div style="position:absolute; left:10px; top:5px; width:216px; height:81px;">
<a href="/index.asp"><img src="/images/logo.gif" alt="logo" width="216" height="81" /></a>
</div>
<div style="position:absolute; right:10px; top:5px; width:468px; height:60px;"><a href="/index.asp">
<img src="/images/468x60.gif" alt="Banner" width="468" height="60" /></a>
</div>
</div>

<div id="container">

<div id="topnavigation">
<a href="index.asp"><img src="1.jpg" alt="1" width="102" height="22" /></a><a href="index2.asp"><img src="2.jpg" alt="2" height="22" /></a>
</div>

<div id="leftnav">
<ul class="sidenav">
<li><a href="test.asp">Search</a></li>
<li><a href="test.asp">Contact</a></li>
<li><a href="test.asp">Send to Friend</a></li>
<li><a href="test.asp">Add URL</a></li>
<li><a href="test.asp">Advertise</a></li>
</ul>

<img src="/images/Logo.gif" alt="Logo" />
<img src="/images/125x125.gif" alt="Match" />
</div>

<div id="rightnav">
<!--#include virtual="/ads_inc2.asp" -->
</div>

<div id="content">

<div><img src="/images/slider.jpg" id="slider" alt="Slider" /></div>
<div style="background:#EEF3FB;border:2px solid #8CA5CE;padding:5px;margin:0;">

<div style="margin:5px auto; text-align:center;">
<form action="" method="get" style="margin:0;">
Search <input name="qry" type="text" class="input" value="">
<input name="submit" type="submit" value="search" class="submit"></form>
</div>

<div id="searches">
<h2>Searches</h2>
<p>
Searches here
</p>
</div>

</div>
</div>

<div id="footer">
<img src="/images/betfair/468X60allsports2.gif" width="468" height="60" border="0" alt="Betfair"></a> <br />
<br /> Copyright
</div>

</div>

</body>
</html>
 
Sort by date Sort by votes
it validates
Click to expand...

No it doesn't! You have a close anchor when no open anchor exists - try validating it again.

I would like to know your thoughts on how it has been constructed, anything that stands out that might need changed or could be done better.
Click to expand...

Indenting your code would be the first thing I would advise. You've done a good job of not using tables, but the effect of the site is lost as we can't see it with images. How about posting a URL?

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch
[/tt]
 
Upvote 0 Downvote
I will second Dan's opinion about indenting. Also, don't use inline styles when not needed. You seem to be using way to many divs, especially in the top part of the page -- why do you need special div containers to hold your pictures when they are not needed? Your css has way too many declarations that you don't need, especially with link states -- use inheritance. I second Dan's plea to see the URL as well.
 
Upvote 0 Downvote
ok guys I guess I should make better use of indenting.

Vragabond can I just pick you up on 2 of your points
when am I using inline style which aren't needed?
and would you suggest getting round using too many div's especially at the top?

thank you for your help, much appreciated.
 
Upvote 0 Downvote
Remove all inline styles and move them all to your style block (or ideally into an extrenal linked style sheet if you have multiple pages).

You could add classes to elements you needed to target explicitly. It'll reduce your HTML massively -- making it a lot easier to read an maintain.

Seperation of content (html) and style (css) is a very good thing.

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]

What is Javascript? faq216-6094
 
Upvote 0 Downvote
sorry apologies, just ignore one of the questions in my last post "when am I using inline style which aren't needed?".

Not sure though how I can reduce the amount of div's especially at the top

thanks
 
Upvote 0 Downvote
Well, for instance

Code: 
<div><img src="/images/slider.jpg" id="slider" alt="Slider" /></div>

Why wrap that image in a div?
If it's simply to make it a block level element then why not target the image with CSS and make it a block level element?

You can make an inline element into a block level element by using:
Code: 
<img src="/images/slider.jpg" id="slider" alt="Slider" />

Code: 
#slider { display:block; }

Another example:

Code: 
<div style="position:absolute; left:10px; top:5px; width:216px; height:81px;">
<a href="/index.asp"><img src="/images/logo.gif" alt="logo" width="216" height="81" /></a>
</div>

The image is wrapped in an a tag. Why not give the a an ID and target THAT with CSS (or even use the inline styles on it if you really want to).



Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Achieving this grid layout in css
Replies
1
Views
213
tyutghf
tyutghf
pendle666
  • Locked
  • Question
new website renders fine in IE/Edge but not in Chrome - test site was fine
Replies
2
Views
175
pendle666
pendle666
dvannoy
  • Locked
  • Question
Simple Layout
Replies
3
Views
157
vacunita
vacunita
Carlvic
  • Locked
  • Question
How can i make layout 2 columns 2
Replies
3
Views
160
Carlvic
Carlvic
Katerine
  • Locked
  • Question
CSS question: Displaying 2-level unordered lists in a table layout? 1
Replies
7
Views
219
Katerine
Katerine

Part and Inventory Search

Sponsor

Back
Top