design en div's

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Reinhout

reinhout

13/04/2007 15:33:00
Quote Anchor link
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
<style>
.logo{background: url(images/logo.gif);}
</style>

<body>
<div class="logo"></div>

Dit is een ingekorte versie van de eigenlijke
-------------------------------------------------------------
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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

PHP hulp

25/02/2024 00:39:37
 
Frank -

Frank -

13/04/2007 15:35:00
Quote Anchor link
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

Kalle P

13/04/2007 16:21:00
Quote Anchor link
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

GaMer B

13/04/2007 17:20:00
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<div idd="logo"></div>

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

Fred Binnenpret

13/04/2007 17:35:00
Quote Anchor link
mmh probeer dit eens,

CSS:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?
<body>
<
div id="logo">&nbsp;</div>
<
/body>
?>

;)
Gewijzigd op 01/01/1970 01:00:00 door Fred Binnenpret
 
Frank -

Frank -

13/04/2007 17:46:00
Quote Anchor link
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

reinhout

13/04/2007 18:01:00
Quote Anchor link
ik heb &nbsp; 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

Jason de Ridder

13/04/2007 18:03:00
Quote Anchor link
Frank schreef op 13.04.2007 17:46:
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.

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

reinhout

13/04/2007 18:13:00
Quote Anchor link
ik heb het volgende (klein stukie uit mn code)
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
     header
     navigatie
     navigatie_rechts       content
                                    content
Gewijzigd op 01/01/1970 01:00:00 door reinhout
 
Jason de Ridder

Jason de Ridder

13/04/2007 18:20:00
Quote Anchor link
aha!
Code (php)
PHP script in nieuw venster Selecteer het PHP script
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

reinhout

13/04/2007 18:26:00
Quote Anchor link
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

Jason de Ridder

13/04/2007 18:29:00
Quote Anchor link
hmm... ik weet niet of dat in CSS lukt, volgens mij ga ik het nu overlaten aan Kalle! ;)
 
Reinhout

reinhout

13/04/2007 18:30:00
Quote Anchor link
:'( 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)
PHP script in nieuw venster Selecteer het PHP script
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)
PHP script in nieuw venster Selecteer het PHP script
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

reinhout

14/04/2007 13:16:00
Quote Anchor link
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

Kalle P

14/04/2007 14:26:00
Quote Anchor link
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

reinhout

14/04/2007 15:08:00
Quote Anchor link
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

reinhout

30/04/2007 11:42:00
Quote Anchor link
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
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.