design en div's
Nu ik aan divs kom lukt er niets.
Dit is hoe ik het al probeerde:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<style>
.logo{background: url(images/logo.gif);}
</style>
<body>
<div class="logo"></div>
.logo{background: url(images/logo.gif);}
</style>
<body>
<div class="logo"></div>
Dit is een ingekorte versie van de eigenlijke
-------------------------------------------------------------
Code (php)
1
2
3
4
5
2
3
4
5
div#logo{background: url(images/logo.gif);}
</style>
</head>
<body>
<div idd="logo"></div>
</style>
</head>
<body>
<div idd="logo"></div>
ook dit leverde een witte pagina op.
Doe ik alles nu helemaal verkeerd?
hopelijk kunnen jullie me helpen.
vriendelijke groetjes,
reinhout
Gewijzigd op 01/01/1970 01:00:00 door Reinhout
Gebruik een height in de css of stop eens wat content in de div.
Edit: Zie ook dit topic, zelfde probleem.
Gewijzigd op 01/01/1970 01:00:00 door Frank -
Quote:
De div heeft geen hoogte en er is geen inhoud voor de div.
Nog al het zelfde, maar oké. Je hebt gelijk.
Hier lukt het wel mee.
#logo{
background: url(scrn.jpg);
height: 100%;
}
html, body {
margin: 0;
padding: 0;
height:100%;
}
Als je gewoon een plaatje wilt weergeven doe dit dan gewoon door gebruik te maken van <img>
Code (php)
1
<div idd="logo"></div>
Je hebt ipv id, idd (dus 2 d's).
CSS:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<?
<style typ="text/css">
div#logo {
background: url(images/logo.gif);
display:block;
height:(hoogte);
width:(breedte);
}
</style>
?>
<style typ="text/css">
div#logo {
background: url(images/logo.gif);
display:block;
height:(hoogte);
width:(breedte);
}
</style>
?>
HTML:
Code (php)
1
2
3
4
5
2
3
4
5
<?
<body>
<div id="logo"> </div>
</body>
?>
<body>
<div id="logo"> </div>
</body>
?>
;)
Gewijzigd op 01/01/1970 01:00:00 door Fred Binnenpret
Quote:
Niet helemaal, wanneer je de height opgeeft, heeft de div geen inhoud nodig om tóch de achtergrond te laten zien. Zo kun je bv. ook een min-height: 100px om zo altijd minimaal 100 pixels hoogte hebben. Mocht je meer inhoud hebben dan dat er in deze 100 pixels past, dan regelt de div dat zelf wel.Nog al het zelfde, maar oké.
alleen:
als mn tekst nu langer is dan de content-div plaatst hij een nieuw prentje onder het vorige. hoe kan ik dit voorkomen?
ps: ik gebruik background-image: url()
Frank schreef op 13.04.2007 17:46:
Quote:
Niet helemaal, wanneer je de height opgeeft, heeft de div geen inhoud nodig om tóch de achtergrond te laten zien. Zo kun je bv. ook een min-height: 100px om zo altijd minimaal 100 pixels hoogte hebben. Mocht je meer inhoud hebben dan dat er in deze 100 pixels past, dan regelt de div dat zelf wel.Nog al het zelfde, maar oké.
min-height wordt niet ondersteunt door IE
Klik
Edit:
Ik snap niet wat je bedoelt Reinoud?
edit2:
Sorry een beetje de layout verkloot :P
Edit3:
Correctie ik snap wel wat je bedoelt, gebruikt je regel:
.logo {
background-repeat: none;
}
icm wat je daarvoor had.
Ik snap niet wat je bedoelt Reinoud?
edit2:
Sorry een beetje de layout verkloot :P
Edit3:
Correctie ik snap wel wat je bedoelt, gebruikt je regel:
.logo {
background-repeat: none;
}
icm wat je daarvoor had.
Gewijzigd op 01/01/1970 01:00:00 door Jason de Ridder
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
.inhoud {
background-image: url(images/inhoud.gif);
height: 469px;
width: 600px;
float: right;
position: relative;
}
background-image: url(images/inhoud.gif);
height: 469px;
width: 600px;
float: right;
position: relative;
}
Als nu de tekst langer maakt dan die inhoud.gif plaatst hij dat plaatje er nog eens onder. dan krijg je iets zoals:
Code (php)
1
2
3
4
2
3
4
header
navigatie
navigatie_rechts content
content
navigatie
navigatie_rechts content
content
Gewijzigd op 01/01/1970 01:00:00 door reinhout
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
.inhoud {
background-image: url(images/inhoud.gif);
background-repeat: none;
overflow: auto;
height: 469px;
width: 600px;
float: right;
position: relative;
}
background-image: url(images/inhoud.gif);
background-repeat: none;
overflow: auto;
height: 469px;
width: 600px;
float: right;
position: relative;
}
Kijk even naar deze site, dat is de officiele CSS reference. Erg handig
http://www.w3schools.com/css/css_reference.asp
Gewijzigd op 01/01/1970 01:00:00 door Jason de Ridder
het is de bedoeling dat zoals op deze kant (de linker kant) meevergroot met de hoeveelheid tekst. dan moet die content indien nodig samen met de rechtse navigatie verlengen.
ps: die vette lettertjes onder je naam staan je ^^
iemand anders nog iedeeën?
kweet et al denk ik: mn content moet ik 3 delen:
een bovenste stuk; met de schaduw
een middelste stuk dat mag repeaten
en nog een onderste stuk; waarin ook schaduw zit
zal een kwestie zijn van omvormen.
edit:
Dit is mn code: en het werkt nog altijd niet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.top_rechts {
background-image: url(images/top_rechts.gif);
width: 597px;
height: 5px;
}
.rechts {
background-image: url(images/rechts.gif);
width: 600px;
height: 453px;
}
.bottom_rechts {
background-image: url(images/bottom_rechts.gif);
width: 600px;
height: 11px;
}
background-image: url(images/top_rechts.gif);
width: 597px;
height: 5px;
}
.rechts {
background-image: url(images/rechts.gif);
width: 600px;
height: 453px;
}
.bottom_rechts {
background-image: url(images/bottom_rechts.gif);
width: 600px;
height: 11px;
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="rechts">
<u>De nieuwe versie van lorem ipsum:</u><br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
</div>
<div class="bottom_rechts"></div>
</div>
<u>De nieuwe versie van lorem ipsum:</u><br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
ke juste ne nieuwe smoelofoon gekregn en kzin dr vrje content mee weij; lorem ipsum zit in een nieuw pakske.<br>
</div>
<div class="bottom_rechts"></div>
</div>
dit alles staat nog in een grote div zodat het mooi samen blijft
Gewijzigd op 01/01/1970 01:00:00 door reinhout
http://www.onlinetutorials.be/ is 't adres
ps: de kleure trekken nog op niets maar ik wil eerst dat het menu werkt
Kijk eens naar z-index.
http://www.w3schools.com/css/pr_pos_z-index.asp
Wat ik aanraad, omdat het veel simpeler is, is om naar de volgende website te gaan:
http://www.seoconsultants.com/css/menus/horizontal/
http://css.maxdesign.com.au/listamatic/
of google:
horizontal drop down menu
horizontal menu css
Dan pak je die code en hoef je alleen je img en je mouseover img erin te plaatsen en klaar. Scheelt je weer onnodige tijd.
Succes.
nu heb ik een nieuwere (verbeterde) layout gemaakt, alleen is IE ook nog eens ambetant met het menu; ik weet niet hoe ik dat boven de rest moet laten komen :'(
(linkje)
kheb me al rot gezocht en ik hoop dus dat jullie me helpen
edit: ik bedenk juist dat het vandaag koninginnedag is in Nederland, kheb wel geduld
Gewijzigd op 01/01/1970 01:00:00 door reinhout