design en div's

reinhout

13/04/2007 15:33:00

Ik ben onlangs begonnen met een site en ik heb daarbij een layout gemaakt met photoshop cs3. Ik heb hem gesliced en alleen de images opgeslagen.
Nu ik aan divs kom lukt er niets.
Dit is hoe ik het al probeerde:

Code (php)

1
2
3
4
5
6

Dit is een ingekorte versie van de eigenlijke
-------------------------------------------------------------

Code (php)

1
2
3
4
5

div#logo{background: url(images/logo.gif);}
</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

PHP hulp

24/05/2012 09:33:31

Gesponsorde koppelingen:

Frank -

13/04/2007 15:35:00

De div heeft geen hoogte en er is geen inhoud voor de div. De browser zal dan ook niets weergeven, ook niet de achtergrond.

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 -

Kalle P

13/04/2007 16:21:00

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>

GaMer B

13/04/2007 17:20:00

Code (php)

Je hebt ipv id, idd (dus 2 d's).

Fred Binnenpret

13/04/2007 17:35:00

mmh probeer dit eens,

CSS:

Code (php)

1
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>
?>

HTML:

Code (php)

1
2
3
4
5

<?
<body>
<div id="logo"> </div>
</body>
?>

;)

Gewijzigd op 01/01/1970 01:00:00 door Fred Binnenpret

Frank -

13/04/2007 17:46:00

Quote:

Nog al het zelfde, maar oké.

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.

reinhout

13/04/2007 18:01:00

ik heb   toegevoegd en nu werkt het weer
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()

Jason de Ridder

13/04/2007 18:03:00

Frank schreef op 13.04.2007 17:46:

Quote:

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.

Gewijzigd op 01/01/1970 01:00:00 door Jason de Ridder

reinhout

13/04/2007 18:13:00

ik heb het volgende (klein stukie uit mn code)

Code (php)

1
2
3
4
5
6
7

.inhoud {
    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

     header
     navigatie
     navigatie_rechts       content
                                    content

Gewijzigd op 01/01/1970 01:00:00 door reinhout

Jason de Ridder

13/04/2007 18:20:00

aha!

Code (php)

1
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;
}

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

reinhout

13/04/2007 18:26:00

Nu krijg ik een scrollbar; en dat is ook niet echt mn doel;
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.

Jason de Ridder

13/04/2007 18:29:00

hmm... ik weet niet of dat in CSS lukt, volgens mij ga ik het nu overlaten aan Kalle! ;)

reinhout

13/04/2007 18:30:00

:'( khoop dat ie dan eens een kijkje neemt hier.

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

.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;
            }

Code (php)

1
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>

dit alles staat nog in een grote div zodat het mooi samen blijft

Gewijzigd op 01/01/1970 01:00:00 door reinhout

reinhout

14/04/2007 13:16:00

alles werkt nu maar als ik aan mn dropdown-menu kom lukt het niet; wat gedropped wordt komt onder de andere div's te staan en ik heb al geprobeerd om een div boven de andere te maken met het menu erin maar ...
http://www.onlinetutorials.be/ is 't adres

ps: de kleure trekken nog op niets maar ik wil eerst dat het menu werkt

Kalle P

14/04/2007 14:26:00

Toevallig keek ik tijdens dit mooie weer direct naar dit topic.

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.

reinhout

14/04/2007 15:08:00

ik heb een dropdown van google gehaald en ik heb hem in die div geplaatst maar de dropdown wordt gewoonweg niet voor alles geplaatst maar erachter.

reinhout

30/04/2007 11:42:00

is alweer een eind geldeden en ik heb hem in orde gekregen, maar...
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

PHPhulp is een Nederlandstalige PHP community sinds 2002. Je vindt hier PHP tutorials, PHP scripts, PHP boeken en nog veel meer. Alles is geheel gratis!