Bokt.nl

**Geplaatst door de TopicStarter** : 13-10-15 13:30

Kan iemand mij helpen met HTML/CSS

Geplaatst door de TopicStarter : 13-10-15 13:30

Hallo,

ik moet momenteel een App in elkaar zetten, maar ik loop even vast.
Het gaat om dit ontwerp wat ik in elkaar zet:
Afbeelding

Goed, dat pijltje wordt de doorklik link naar de andere pagina.
Ik krijg hem alleen niet op zijn plek. Ik heb het momenteel zo;

Html:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<link href="stylesheet.css" rel="stylesheet" type="text/css">
</head>

<body>
<div id="content">

<div id="serenga">
SERENGA
</div>

<div id="kaart">
kaart
<img src="images/pijltje_03.png"/>

</div>

</div>
</body>
</html>

En de CSS:

#kaart {
background-image:url(images/hout_08.png);
background-repeat:no-repeat;
height:117px;
width:466px;

padding-top:35px;
padding-left:30px;
font-family:baron;
font-size:55px;
}

Ik heb het hout dus als achtergrond geplaatst, waardoor ik de tekst gewoon kan verplaatsen, maar ik krijg het pijltje er maar niet achter, hoe ik het nu heb, ziet het er momenteel zo uit:

Afbeelding

Hopelijk kan iemand mij uit de brand helpen.

**Geplaatst**: 13-10-15 13:36

Geplaatst: 13-10-15 13:36

Lastig, want de afbeeldingen zitten er nu ook niet bij...
Zal even wat proberen voor je!

Oplossing gevonden! Als je een float:left; meegeeft aan je afbeelding gaat hij naar de linkerkant!

**Geplaatst door de TopicStarter** : 13-10-15 13:41

Geplaatst door de TopicStarter : 13-10-15 13:41

Hmm, nu zit hij bij mij helemaal rechts. (ik heb hem flaot right gegeven omdat hij naar rechts moet.)
Is het niet mogelijk om hem margin of padding te geven, zodat hij de andere kant op gaat? In de HTML?

Afbeelding

**Geplaatst**: 13-10-15 13:44

Geplaatst: 13-10-15 13:44

Code: #kaart img{ float: right; margin: 0 10px; }

en dan die margins aanpassen tot 'ie goed staat, of (mijn voorkeur):

Code: #kaart { position: relative; } #kaart img{ position: absolute; right: 10px; /* of wat er goed uitziet */ top: 20px; /* of wat er goed uitziet */ }

**Geplaatst door de TopicStarter** : 13-10-15 13:57

Geplaatst door de TopicStarter : 13-10-15 13:57

Ik heb het nu zo:
Afbeelding

Alleen ik krijg nu het woord 'Kaart' niet omhoog, en ik kan echt nergens vinden wat 'kaart' naar beneden drukt.

html schreef:
<body>
<div id="content">

<div id="serenga">
SERENGA
</div>

<div id="kaart">
kaart
<img src="images/pijltje_03.png" />
</div>

css schreef:
@font-face {
font-family: baron;
src:url(Baron%20Neue.otf);
}

#content {
height:1337px;
width:750px;
background-image:url(images/achtergrond_03.png);
background-repeat:no-repeat;

}

#serenga {
background-image:url(images/serenga_05.png);
background-repeat:no-repeat;
height:91px;
width:466px;

padding-top:20px;
padding-left:110px;
font-family:baron;
font-size:60px;
}

#kaart {
background-image:url(images/hout_08.png);
background-repeat:no-repeat;
height:117px;
width:466px;

padding-top:0px;
padding-left:30px;
font-family:baron;
font-size:50px;
}

#kaart img {
padding-left:170px;
padding-top:20px;
}

**Geplaatst**: 13-10-15 14:09

Re: Kan iemand mij helpen met HTML/CSS

Geplaatst: 13-10-15 14:09

Kun je anders een voorbeeldje maken op http://jsfiddle.net/ ?

**Geplaatst door de TopicStarter** : 13-10-15 14:12

Re: Kan iemand mij helpen met HTML/CSS

Geplaatst door de TopicStarter : 13-10-15 14:12

Moet ik daar gewoon alles in plakken?

**Geplaatst**: 13-10-15 14:13

Re: Kan iemand mij helpen met HTML/CSS

Geplaatst: 13-10-15 14:13

Ja, de html in het hokje waar in kleine lettertjes 'html' in staat (alleen het deel uit de body, zonder body-tags), en de css in het hokje waar 'css' in staat.

En je moet zorgen dat de plaatjes op een of andere manier bereikbaar zijn, of dat je andere plaatjes gebruikt die ongeveer voldoen.

**Geplaatst door de TopicStarter** : 13-10-15 14:20

Re: Kan iemand mij helpen met HTML/CSS

Geplaatst door de TopicStarter : 13-10-15 14:20

Aah, ik heb hem door, ik krijg alleen het lettertype er in niet in, maar dat maakt niet heel veel uit denk ik.

https://jsfiddle.net/8sovh2yp/8/

**Geplaatst**: 13-10-15 14:42

Geplaatst: 13-10-15 14:42

Zo zou ik het doen: https://jsfiddle.net/8sovh2yp/9/

En waarom je tekst naar beneden geduwd wordt: in de reset-css staat bij plaatjes 'vertical-align: baseline'. Dat betekent dat de onderkant van de plaatjes gelijk komt met de onderkant van de tekst waar dat plaatje in staat. (Standaard zijn plaatjes namelijk 'inline' - dat houdt in dat ze eigenlijk gezien worden als onderdeel van de tekst.)

Ik heb het plaatje losgetrokken van de tekst ervoor door position: absolute; te gebruiken.

**Geplaatst door de TopicStarter** : 15-10-15 14:16

Re: Kan iemand mij helpen met HTML/CSS

Geplaatst door de TopicStarter : 15-10-15 14:16

Yeey gelukt! Dankjewel!

Nomineer dit bericht ×