PDA

View Full Version : Div tag layout


Paulsparks
09-08-2011, 09:29 PM
Hi,
I am new to web design and i am trying to create a DIV layout. I am almost there however i do have some layout issues i.e.
Divs floating incorrectly
Defined wrappers width sizes that display incorrectly
I have read the books and watched the tutorials and have tried to fix the problem.
Could anyone help as I cannot see what I am doing wrong?
Thanks
Paul



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<!-- TemplateBeginEditable name="doctitle"
-->
<title>footballclub.com</title>
<!--
TemplateEndEditable -->
<meta name="author" content="buy football gear"
/>



<meta name="description" content="" />


<meta name="Revisit-After" content=30 Days"/>


<link href="" rel="stylesheet" type="text/css" />
<style
type="text/css">


body {
background-image: none;
background-repeat:
repeat-x;
background-color: #000000;
}
.style1 {font-family:
Mistral}


</style>
<!-- TemplateBeginEditable name="head" --><!--
TemplateEndEditable -->
<link href="../css/footballclub.css"
rel="stylesheet" type="text/css" />
</head>


<body>
<!--the wrapper has the following structure

wrapper header with 3 divs inside it picutres left, centre and right
the
navigation bar with links and a side bar with links -->
<div id
="wrapper">
<div id
="header">
<div id = "banner_picture_left"><img
src="" alt="playing footie" width="113" height="150"
/>

</div>
<!-- end div
banner_picture_left -->

<div id
= "banner_picture_centre"><img src="" alt="main banner "width="647"
height="160" border="0" /></div>
<!-- end div
banner_picture_centre-->
<div id =
"banner_picture_right">
<img src="" alt="kicking the
ball" width="113" height="150"
/>
</div>
<!--
end div banner_picture_right
-->

<div id
="navigation">
<ul><a
href="../footballclub/index.html">Homepage</a></ul>
<ul><a
href="../footballclub/contact_me.html">Contact
</a></ul>
<ul><a
href="../footballclub/buy_footballs.html">Buy
footballs</a></ul>
<ul><a
href="../footballclub/place_order.html">Place
Order</a></ul>
<ul><a
href="../footballclub/club_photos.html">Club
Photos</a></ul>
</div>
<!--
end div navigation -->
</div>
<!-- end
div header -->
<div id
="content">
<div
id="primary">
<div id
="side_bar">
<ul><a
href="../footballclub/links.html">Links</a></ul>
<ul><a
href="../footballclub/up_coming_program.html">Up Coming
Program</a></ul>
<ul><a
href="../footballclub/team_events.html">Team
events</a></ul>
<ul><a
href="../footballclub/place_order.html">Place
Order</a></ul>
<ul><a
href="../footballclub/specials.html">Specials</a></ul>
<ul><a
href="../footballclub/match_days.html">Match
Days</a></ul>
<ul><a
href="../footballclub/club_clothing.html">Club
clothing</a></ul>
</div>
<!--
end div side
bar-->

<div
id ="side_bar_picture">
<a href="../test link page for picture.html"><img src="" alt="" width="138" height="104" border="0" /></a> </div>
<!-- end
div side_bar_picture-->
</div><!-- end
div primary-->
<!-- TemplateBeginEditable
name="main_body" -->
<div
id="secondary">

<div id="secondary_main_picture"><img src="" alt="" width="660"
height="150" /></div>
<!--
end div
secondary_main_picture-->




</div>
<!--
TemplateEndEditable -->
<!-- end div secondary
-->

<div id =
"footer">
<p class="style1"> Copyright
footballclub.com 2011</p>
<ul><a
href="footballclub/compliance.html">Compliance</a></ul>

<ul><a
href="footballclub/webmasters.html">Webmasters</a></ul>

<ul><a href="footballclub/site_map.html">Site
Map</a></ul>

</div>
<!-- end div footer
-->

</div>
<!-- end
div content-->
</div>
<!-- end div wrapper-->



</body>
</html>

domedia
09-09-2011, 02:25 PM
Put the page somewhere temporarily online, and then specify exactly where the issue is.

Welcome to the forum btw!