|
-
div page not sure if this is correct
hi there...
i made my first dummy page, which will be the template for the rest of the pages to come. before i can continue i want to know if its structure is correct.
http://www.api-bvba.be/EMEL/barca/index.html
one thing: i am designing in dreamweaver, but mostly the code-view is what i am using (as a change)... with the normal notepad, a tab is easily made (to structure the divs), but in dreamweaver, i dont know how to make a decent tab to identify the next div level.....anybody?
regards
emel.
-
Explain please
in dreamweaver, i dont know how to make a decent tab to identify the next div level
-
If I were to code this page I would do it like this.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<META NAME="description" CONTENT="Independent (buyers) guide for the Barcelona chair, orginally designed by Mies van der Roehe">
<META NAME="keywords" CONTENT="Barcelona chair, M90, Design">
<title>M90 Barcelona Chair Independent Buyers Guide</title>
<script type = "text/javascript">
var myImages = new Array (
"images/navi_02.jpg",
"images/navi_03.jpg",
"images/navi_04.jpg",
"images/navi_05.jpg",
"images/navi_06.jpg",
"images/navi_07.jpg",
"images/navi_02-over.jpg",
"images/navi_03-over.jpg",
"images/navi_04-over.jpg",
"images/navi_05-over.jpg",
"images/navi_06-over.jpg"
);
var myPreload = new Array ();
for (var i = 0; i < myImages.length; i++ )
{
myPreload[ i ]= new Image();
myPreload[ i ].src = myImages[ i ];
}
function mySwap(s)
{
if ( s == 0 )document.images.Home.src = "images/navi_02.jpg";
if ( s == 1 )document.images.Home.src = "images/navi_02-over.jpg";
if ( s == 2 )document.images.Fact.src = "images/navi_03.jpg";
if ( s == 3 )document.images.Fact.src = "images/navi_03-over.jpg";
if ( s == 4 )document.images.Manu.src = "images/navi_04.jpg";
if ( s == 5 )document.images.Manu.src = "images/navi_04-over.jpg";
if ( s == 6 )document.images.Med.src = "images/navi_05.jpg";
if ( s == 7 )document.images.Med.src = "images/navi_05-over.jpg";
if ( s == 8 )document.images.Con.src = "images/navi_06.jpg";
if ( s == 9 )document.images.Con.src = "images/navi_06-over.jpg";
}
</script>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
SCROLLBAR-ARROW-COLOR: #ffffff;
SCROLLBAR-BASE-COLOR: #4353a4;
SCROLLBAR-3DLIGHT-COLOR: #4353a4;
SCROLLBAR-TRACK-COLOR: #ffffff;
SCROLLBAR-DARKSHADOW-COLOR: #ffffff;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: x-small;
color: #000000;
background:#fff;
}
#wrapper {
width: 747px;
margin:0 auto;
background: #fff url('slice.jpg') no-repeat top left;
}
#navi {
width: 747px;
height: 220px;
background:url('images/tab_brown.gif') no-repeat;
background-position:right bottom;
}
a:link, a:visited {
text-decoration: none;
color: #4353a4;
}
a:hover {
text-decoration: underline;
}
#tekstbox {
color: #000000;
height: 465px;
width: 707px;
overflow:auto;
padding:20px;
}
img {
border:none;
}
.font {
margin-bottom: 10px;
}
#footer {
width: 727px;
height: 15px;
text-align: left;
padding-left:20px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navi">
<a href="index.htm" target="_self"><img src="images/navi_02.jpg" alt="Home" name="Home" width="164" height="200" id="Home" onmouseover="mySwap(1)" onmouseout="mySwap(0)" /></a><a href="facts.htm" target="_self"><img src="images/navi_03.jpg" name="Fact" width="146" height="200" id="Fact" onmouseover="mySwap(3)" onmouseout="mySwap(2)" /></a><a href="manu.htm" target="_self"><img src="images/navi_04.jpg" name="Manu" width="146" height="200" id="Manu" onmouseover="mySwap(5)" onmouseout="mySwap(4)" /></a><a href="med.htm" target="_self"><img src="images/navi_05.jpg" name="Med" width="145" height="200" id="Med" onmouseover="mySwap(7)" onmouseout="mySwap(6)" /></a><a href="contact.htm" target="_self"><img src="images/navi_06.jpg" alt="Contact" name="Con" width="146" height="200" id="Con" onmouseover="mySwap(9)" onmouseout="mySwap(8)" /></a>
</div>
<div id="tekstbox">
<p class="font">Welcome to the M90 "Barcelona Chair" Vademecum. <br><br>
The idea behind this website came soon after a decision to purchase a M90 chair, better known as the Barcelona chair. This chair is being produced by many different OEMS (Orginal Equipment Manufactures) around the world. Until this day, Knoll (U.S.) remains the only OEM with the orginal exclusive manufacturing and sales rights. However this hasn't stopped other companies from producting and selling the chair under a slightly different name with minor modifications to the original specifications from 1929. </p>
<p class="font">During desk-research (2006 - present) many different designs with lots of different quality standards were analyzed. </p>
<p class="font">Main outcome is that, when buying the chair, one should focus on 3 focus points: dimensions, weight and material. main production country is Italy. However new, emerging markets like China are trying to get a piece of the market as well, with fluctuating qualities. </p>
<p class="font">All the results are purely based on own analysis, there is absolutely no sponsorship involved.</p>
</div>
<div id="footer"> © eMeL 2007</div>
</div>
</body>
</html>
I would not use any tables except maybe on the contact page. I would shorten up the menu images (main and rollover) to either 170 or 175 pixels in height so the divider image can move up. Then change the height of the navi div to the height of the menu images + the height of the divider image.
Posting Permissions
- You may not post new threads
- You may not post replies
- You may not post attachments
- You may not edit your posts
-
Forum Rules
|
Click Here to Expand Forum to Full Width
|
Reply With Quote