layout maken

Status
Niet open voor verdere reacties.
G

geenID

Gebruiker
Lid geworden
1 jul 2009
Berichten
312
hallo, het lukt me maar niet om een layout te maken. Dit moet de layout bevatten:
1. Aan de link-kant een menu
2. In de header een plaatje
3. Aan de rechterkant advertenties
4. In het midden de inhoud
 
Laatst bewerkt:
Laatst bewerkt:
Ok, maar waarom post je dit op het forum? Waar moeten wij jou bij helpen?
 
Ik heb even snel wat in elkaar geknutseld. Qua code is het niet exact het zelfde als op de pagina, maar het resultaat wel. Tussen de <!---->- en /**/-tekens heb ik wat commentaar gegeven. Het ziet er niet heel mooi uit, maar je kunt nog wat spelen met de CSS.

HTML: 
<!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" xml:lang="en" lang="en">
<head>
	<title>Untitled 2</title>
</head>
<link href="Index.css" rel="stylesheet" type="text/css" />
<body>
<div id="header"> <center>Welkom</center></div>

<div id="menu">
<h3>Menu</h3>
<br />
<a href=index.htm class="menuItem">Home</a><br />  <!--class toegevoegd om in CSS naar te verwijzen-->
<a href=archief.htm class="menuItem">Archief</a><br />
<a href=tekst.htm class="menuItem">Tekst</a><br />
<a href=spreken.htm class="menuItem">Spreken</a><br />
<a href=contact.htm class="menuItem">Contact</a><br />
</div>

<div id="tekst">
<h3> <center> Welkom </center> </h3>
<center> Zoals je hebt gemerkt zijn we weer open! </center>
<br /><br />
</div>

<div id="nieuws">
<h3>Laatste Nieuws</h3>
<small>10 mei 07</small><br/>
<b>Website gestart</b>
<p>vandaag zijn we gestart met een nieuwe website en de site moet een succes worden, want hij is gemaakt met css en in drie kolommen verdeeld.</p>
<small>9 mei 07</small><br/>
<b>Website niet gestart</b>
<p>vandaag zijn we nog niet gestart met een website omdat we nog niet wisten hoe het moest.</p>
</div>

</body>
</html>

Code: 
#header {
background-color: #A8BABD;
color: white;
font-size: 28px;
}

#menu { /*div verwijdert*/
position: absolute;
top: 48px;
color: #F00;
width: 10%;
height: 100%;
padding-top: 20px;
background-image: url(banner.png);
}
.menuItem{ /*. betekent een class*/
color: white; /*Kleur aan de menuitems geven*/
background: #3C3; /*Achtergrond aan de menuitems geven*/
display: block; /*Zorgt dat de achtergrond over de hele breedte loopt*/
border-left: 16px groove #F00; /*Zorgt voor het randje links*/
border-top: 2px solid #AAA; /*Zorgt voor het randje onder*/
border-bottom: 2px solid #AAA; /*Zorgt voor het randje onder*/
padding: 8px; /*Zorgt voor een grotere ruimte tussen teksten en de randen*/
margin-bottom: -22px; /*Zorgt dat de ruimte door display:block; weer wordt teruggezet
en zorgt voor het verbergen van dubbele randen*/
}
.menuItem:hover{ /*Hover betekent als je er met je muis overheen gaat*/
background: #A33; /*Geeft een achtergrondkleur*/
border-right: 16px groove #F00; /*Zorgt voor een randje rechts*/
border-left: 16px groove #3C3; /*Zorgt voor een randje links*/
}

#tekst {
position: absolute;
top: 48px;
left: 9.7%;
width: 70%;
height: 100%;
padding-top: 20px;
margin: 0px 10px 0px 10px;
background-color: silver;
}

#nieuws {
font-size: 80%;
float: right;
top: 30px;
width: 160px;
padding-top: 20px;
margin: 0px 10px 0px 50px;
}

#nieuws h3 {
font-size: 140%;
}

#nieuws p{
font-style: italic;
}
 
bedankt man, ik heb wat geknutseld eraan. Kijk maar bij de bijlage.
Er is alleen een probleem:
In het menu, aan de linker kant, staat de tekst niet goed. In 1 balkje moet een tekst komen te staan.
En er moet een roll-over op het menu. Maar dit lukt me niet.
 
Bedoel je dan zoiets als dit: http://www.microsoftfrontpage.com/menuasp/menu.asp (werkt alleen in Internet Explorer).

Verder is het misschien handig om geen absolute lay-out te gebruiken. Op zich kan het wel, maar ik vind andere methoden beter. En ik zou zeggen geen animatie als banner, het zet er op het eerste blik leuk uit maar na en tijdje wordt je er dol van. ;)
 
helaas, dat is niet echt wat ik bedoel, maar ik heb iets anders voor een menu-effect gevonden:


ps; ik wil website die er proffesioneel uitziet, dat is het misschien inderdaad handig om geen animaties te gebruiken...
Heb je misschien nog wat tips voor een proffesionele website?
 
Laatst bewerkt:
Ziet er al een stuk anders uit. ;)

Op zich is het niet moeilijk wat zij doen. Wel gebruiken zij JavaScript om in twee stapjes om het verplaatsen in twee stapjes te laten gebeuren. Ik doe het zelf liever in één stap omdat de tussenstap nauwelijk opvalt bij zo'n kleine afstand.
Ik heb het nu in een stap gemaakt (klik). Door een ding aan de CSS toe te voegen, namelijk:
Code: 
div#menu a:hover{  
padding-left: 12px}

Als je het liever in twee (of meer) stappen hebt kan ik doet ook wel even maken.
 
het is gelukt :D

Maar nu het volgende probleem;
Bovenaan de website zie je een plaatje van 3 jongens. Ik zou hier graag een alt-tag voor willen.
Dus als je er met je muis overheen gaat, dan er dan een tekst verschijnt.
Helaas lukt het me niet, en heb ookal gezocht op internet, maar niks werkt...
 
Laatst bewerkt:
Dat is dezelfde versie hoor. ;) Maar voor een alt zou

<img src="link" alt='Drie Jongen"/> gewoon moeten werken.
 
ethet is de verbeterde versie ;)

Maar het werkt niet. Ik heb die code in Index.html gezet, onder
<div id="Rappervdweek">

Maar nog doet hij het niet
 
Je kunt twee dingen doen.

1. De background-image houden
Als je de background-image wilt houden zoals het nu is moet je aan de div Rappervdweek een title geven. Een nadeel is dat als je in de Rappervdweek een verhaal zou typen je ook de tekst ziet als je met je muis er overheen scrolt.
HTML: 
<div id="Rappervdweek" title="Rapper van de week"></div>

2. Een 'normale' image maken.
De andere optie is om een 'normale' image te gebruiken in plaats van een background-image. Dat zou dit de HTML worden:
HTML: 
<div id="Rappervdweek">
<img src="Reclame.png" alt="Rapper van de week">
</div>
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan