DIV kleuren en kiezen

Status
Niet open voor verdere reacties.
J

jeroenswebpage

Gebruiker
Lid geworden
9 mei 2010
Berichten
56
<!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=utf-8" />
<title>Homepage</title>
<style type="text/css">
<!--
}
-->
</style>
<link href="stylesheet/thaijeroen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
//-->
</script>
<style type="text/css">
<!--

z-index:1;
}
-->
</style></head>

<body id="kop">
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<div>
<p>Thaijeroen<br />
</p>
</div>
<h2>&nbsp;</h2>
</body>
</html>

Zoals jullie zien heb ik een div in Thaijeroen
Thaijeroen wordt een hobby site maar wil graag DIV kleuren enzo
maar je kunt kiezen uit ap div en div tag
en bij div tag heb je weer meer keuze
wat is wat
wat is het verschil?

Graag advies
 
hier een voorbeeld

<!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=utf-8" />
<title>Homepage</title>
<style type="text/css">
<!--
}
-->
</style>
<link href="stylesheet/thaijeroen.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
//-->
</script>
<style type="text/css">
<!--

z-index:1;
}
#apDiv1 {
position:absolute;
width:1178px;
height:453px;
z-index:1;
left: 8px;
top: 129px;
}
#apDiv2 {
position:absolute;
width:98px;
height:446px;
z-index:2;
top: 132px;
left: 1087px;
}
#apDiv3 { position:absolute;
width:98px;
height:446px;
z-index:2;
top: 132px;
}
#apDiv4 {
position:absolute;
width:976px;
height:79px;
z-index:1;
left: 102px;
top: 368px;
}
#apDiv5 {
position:absolute;
width:981px;
height:77px;
z-index:2;
left: 99px;
top: 1px;
}
-->
</style></head>

<body id="kop">
<h2>&nbsp;</h2>
<h2>&nbsp;</h2>
<div>
<p>Thaijeroen<br />
</p>
</div>
<h2>&nbsp;</h2>
<div id="apDiv1">
<div id="apDiv4"></div>
<div id="boven"></div>
</div>
<div id="apDiv2"></div>
<div id="apDiv3"></div>
</body>
</html>


Als ik het label (apdiv) Wil wijzigen plaatst die het frame ergens anders?
ik moet zoals u ziet wil ik een vierkant
dus in het hoofdframe komen vier kanten
boven links recht enz

graag advies
 
Hoi Jeroen,
Een "AP" div is een <div> met een Absolute Positie, en staat kort gezegd los van de andere elementen op de pagina. Als je een AP gebruikt, moet je wel precies weten wat je doet, want soms kan daardoor je hele opmaak van de pagina in duigen vallen (als je bv. dezelfde pagina in een andere resolutie bekijkt). Ik zou maar beginnen met een gewone <div> (die relatief staat ten opzichte van de rest).
Maar als het er alleen om gaat om de regel waarin "Thaijeroen" staat een eigen opmaak (letterkleur, achtergrondkleur, enz.) te geven, dan heb je helemaal geen omringende <div> nodig.
Dan kan je het ook gewoon doen met een "class" verwijzing. Dat gaat als volgt:
HTML: 
<p class="kleurtjes">Thaijeroen</p>
en in de css:
Code: 
[FONT="Courier New"][SIZE="2"].kleurtjes {
   color: red; /* letterkleur */
   background: yellow; /* achtergrondkleur */
}[/SIZE][/FONT]
Als je verderop dan ook nog eens dezelfde kleurtjes nodig hebt, dan kan je verderop nog eens dezelfde "class" aanroepen.

Dit is heel in het kort, want er valt veel meer over te zeggen!
Een goede (gratis, online) handleiding waarin het meeste van html en css op een uitstekende manier wordt uitgelegd, is die van web-garden.be:
Daar zou ik zeker eens een kijkje gaan nemen, want daar zit basiskennis in die je zeker nodig hebt! :)

Met vriendelijke groet,
CSShunter

[edit]Dit was de reactie op je eerste vraag - intussen kwam de volgende al binnen. ;)[/edit]
 
Laatst bewerkt:
Bestecss Hunter

Hierbij hartelijk bedankt voor uw advies
ik snap de code wel
maar werk nu met dreamweaver cs4
zoals u ziet heb ik een vierkant, nu omgezet in css
en als ik de kleur wijzig gebeurt er niks
staat er een fout in de code of hoe kan dat?

Graag advies
 
Hoi Jeroen,
... 'ns even kijken ...
Ik heb de verschillende <div>'s op je pagina even een randje en een letterkleurtje gegeven, en je pagina hier neergezet:
We zien (o.a.) dat de <div id="apDiv1"> met het rode randje helemaal niet tevoorschijn komt.

Nu loont het altijd de moeite om even te kijken of de html-validator en de css-validator de gemaakte code in orde vinden.
De html-validator keurt het goed, maar de css-validator zegt dit:
  • Sorry, we vonden 3 fouten (en waar die zitten):
  • Er zit een foute } in regel 8 > dat klopt, want daar zit een stukje lege css met alleen die } die er niet hoort > even wissen.
  • Hij kan het thaijeroen.css stylesheet niet vinden > dat klopt, want die staat er bij mij niet op (bij jou wel? anders kan dat de opmaak van de pagina beïnvloeden!) > even uitschakelen met de commentaar-tekens.
  • Hij vindt een fout in regel 26, waar de <div id="apDiv1"> begint. > Daar struikelt ie over, omdat in regel 24 een losse z-index: 1; staat, en in regel 25 weer zomaar een }. > regels 24 en 25 wissen.
Daarmee is de css correct, en gaan we kijken naar het resultaat (als ik <div id="boven"> vervang door <div id="apDiv5">, want ik denk dat je dat bedoelt):
Nu is de vraag: wat wil je? ;)

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan