site met div

Status
Niet open voor verdere reacties.
B

berehap

Gebruiker
Lid geworden
8 feb 2005
Berichten
330
ik ben dus met een site bezig, en die wil ik in DIV gaan maken, maar op een of andere manier lukt het niet, krijg niet hoe ik het wil hebben.

Wie zou voor mij een begin kunnen maken?:o

bovenin een groot vak voor logo, daaronder menu, en daar weer onder moeten 3 vakken komen.
wie wil er voor mij een begin maken? ik kan eventueel zelf wel alles aanpassen met maten enzo.

alvast bedankt

---------------------------------
logo
---------------------------------
menu
---------------------------------
| vak | nieuwsvak | vak |
---------------------------------
copyright
---------------------------------
 
Laatst bewerkt:
hej ik heb n voorbeeld voor je gemaakt experimenteer ermee en veel succes met je site!


<html>
<head>
<style type="text/css">
.logo{
background: url(url van jouw logo) no-repeat;
width: 300px;
height: 200px;
color: purple;
}
.menu{
background-color: #CCFFFF;
width: 900px;
height: 20px;
color: purple;
word-spacing: 30px;
}
.vakeen{
background-color: darkblue;
width: 300px;
height: 200px;
color: white;
float:left;

}
.vaktwee{
background-color: darkgreen;
width: 300px;
height: 200px;
color: white;
float: left;
margin-right: 0px;
}
.nieuwsvak{
background-color: red;
width: 300px;
height: 200px;
color: white;
float: left;
margin-left: 0px;
}
.opvuller{
background-color: white;
float: bottom;
height: 250px;
width: 900px;
}
.copyright{
width: 900px;
height: 25px;
background-color: green;
color: white;
}
</style>
</head>
<body>
<div class="logo"><h1>Logo</h1></div>
<br>
<div class="menu"><i>Menu item Menu item etc</i></div><br>
<div class="vakeen">Vak een</div>
<div class="nieuwsvak">Nieuwsvak</div>
<div class="vaktwee">Vaktwee</div><br>
<div class="opvuller"></div>
<div class="copyright" align="center"><b>Copyright</b></div>


</body>
</html>

---------------------------------------------------------------------------------------

Je mag best wl dankjewel zggn ;)

en oja hier kun je em bekijken:

http://www.freewebs.com/yasminalove/voorbeeldlayoutvoorberehap.htm

-Gr.Yasmin
 
Laatst bewerkt:
Alles goed en wel yasminalove,
doch:
trek de rechterkant eens van het browserscherm naar binnen.
Ziet ge de div verspringen?

Het is beter het geheel in één container te mikken met vaste waarde.

De opzet is goed,
doch het probleem zit meestal in de weergave in IE en FF
Dus het blijft altijd een beetje spelen met de diverse elementen voordat het optimaal is.

Maar berehap heeft nu in ieder geval een basis.

:cool:
 
die Container die zit toch om de site heen? boven de divjes die er al zijn weer wat aanmaken <div class="container"> en onderaan helemaal afsluiten toch met </div>

of zit ik er erg naast?
 
berehap zei:
die Container die ......

of zit ik er erg naast?
Klik om te vergroten...

Juist.

Hierbij een aangepaste versie:
PHP: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>jj</title>
    
      <style type="text/css" media="screen">

body
{
margin: 0;
		padding: 0;
		font-family: comic sans ms, verdana, arial, hevetica, sans-serif;
		text-align: center;
		color: #000;
	  background: #ffffcc;
}

.container{
width:900px;
text-align:center;
border:solid 1px #ff0000;
margin-left:auto;
margin-right:auto;

}

.logo{
background: url(url van jouw logo) no-repeat;
width: 900px;
height: 200px;
color: purple;
}
.menu{
background-color: #CCFFFF;
width: 900px;
height: 20px;
color: purple;
word-spacing: 30px;
}
.vakeen{
background-color: darkblue;
width: 300px;
height: 200px;
color: white;
float:left;

}
.vaktwee{
background-color: darkgreen;
width: 300px;
height: 200px;
color: white;
float: left;

}
.nieuwsvak{
background-color: red;
width: 300px;
height: 200px;
color: white;
float: left;

}
.opvuller{
background-color: white;
float: bottom;
height: 300px;
width: 900px;
}
.copyright{
width: 900px;
height: 25px;
background-color: green;
color: white;
}
.schoon
{
clear:both;
}


      </style>
    </head>
    <body>
      test
      <div class="container">
        <div class="logo"><h1>Logo</h1></div>
        <div class="schoon"></div>
          <div class="menu"><i>Menu item Menu item etc</i></div>
          <div class="schoon"></div>
          <div class="vakeen">Vak een</div>
          <div class="nieuwsvak">Nieuwsvak</div>
          <div class="vaktwee">Vaktwee</div>
          <div class="schoon"></div>
          <div class="opvuller"></div>
          <div class="copyright" align="center"><b>Copyright</b></div>
        </div>
      </body>
    </html>

Advies:
trek altijd je browser rechterkant naar binnen om te kijken of het nog OK blijft.
En test de pagina in IE en FF,
sommige dingen zijn anders, en dan moet je daar eerst een oplossing voor vinden.

:cool:
 
mmm ik weet niet of er nog iets is aan te passen want die groove doet op het eerste zicht
niets aan die rand
net zoals die outset
de double, dash en dotted is wel duidelijk te zien
 
owja nu zie ik het maar zijn dit dan alle mogelijkheden van dreamweaver mx om randen weer te geven of kan je in je code nog iets toevoegen om zo'n dan zo bv een rand met schaduw te bekomen
thx
 
Neen.

google:
css border shadow
oa tweedel link:
http://www.mandarindesign.com/boxes.html
FANCY BORDERS

1. Centered Box
2. CSS Dashed Border Box
3. CSS Gold Matte Around Pictures
4. CSS White Matte Border
5. Medieval Law Book Format

IE SHADOW FILTERS

1. Shadowed Text Box
2. Shadow Filter Border
3. BOTTOM


maar in FF werkt het niet.
Dus je zult op plaatjes terug moeten vallen.

:cool:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan