afbeelding in header

Status
Niet open voor verdere reacties.
Julian16

Julian16

Gebruiker
Lid geworden
4 mei 2007
Berichten
189
Hallo, mijn website ziet er zo uit op het moment:

http://i42.tinypic.com/qryfy1.jpg

ik wil graag een afbeelding in de header plaatsen, maar weet iemand hoe ik dat moet doen?

het gaat om zo'n soort plaatje: http://i39.tinypic.com/nladnb.jpg

mijn index ziet er zo uit:

HTML: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <title>Audi</title>
		<link href="css/styles.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
	</head>    
	<body>
        <div class="container">
        	<div class="header">Header - <a href="http://www.websonic.nl"></a></div>
            <div class="leftcontent">

en mijn css zo:

HTML: 
/* header */

div.header {
	width:930px;
	height:100px;
	margin-top:10px;
	padding:10px;
	background-color:#FFFFFF;
}
 
Laatst bewerkt door een moderator:
zoiets:
PHP: 
//css

      /* header */
       
      div.header {
      width:930px;
      height:100px;
      margin-top:10px;
      padding:10px;
      background : #fff url('mijn-plaatje.ext');
      }

check de css referentie voor 'background' maar eens, bv. deze. ;)
 
Bedankt :)

Nog een vraagje:

http://i41.tinypic.com/261cftk.jpg

Hoe kan ik die tekst 'Audi' op een bepaalde plaats in de header zetten? ik wil het graag hoger in het midden hebben.

<div class="container">
<div class="header"><img src="AudiLogo1.jpg"><H1>AUDI</H1></div>
<div class="leftcontent">
Klik om te vergroten...
 
Laatst bewerkt:
PHP: 
//css

div#header img
{
   position: relative; //ga uit van de standaard positie
   margin-top: -20px; //of anders: "top: -20px;"
}
 
Vegras zei:
PHP: 
//css

div#header img
{
   position: relative; //ga uit van de standaard positie
   margin-top: -20px; //of anders: "top: -20px;"
}
Klik om te vergroten...

moet ik dat vervangen met die andere css code?

of kan ik ook nog een plaatje in de header zetten, die dan in het midden komt na dat linkerplaatje?
 
Laatst bewerkt:
nog een vraagje, hoe kan ik hetzelfde plaatje aan de rechterkant van mijn header krijgen?

bedankt:thumb:
 
je kan maar 1x een background-image gebruiken, maar voor de rest kan je wel gewoon <img> erin zetten.
Also, je kan 'right: 20px' gebruiken om t 20px van rechts te zetten.


Lees anders eens de css-tutorial op w3schools een door.
 
Bedankt ;)

ik moet morgen mijn PO inleveren, dus heb geen tijd meer om me in CSS te verdiepen ;)
 
Vegras zei:
je kan maar 1x een background-image gebruiken, maar voor de rest kan je wel gewoon <img> erin zetten.
Also, je kan 'right: 20px' gebruiken om t 20px van rechts te zetten.


Lees anders eens de css-tutorial op w3schools een door.
Klik om te vergroten...

Maar hoe type ik dat in CSS? ik wil nu dat plaatje aan de rechterkant van mijn header krijgen. dit staat nu in mijn header, hoe zou ik dit kunnen wijzigen?

/* header */

div.header {
width:930px;
height:100px;
margin-top:10px;
padding:10px;
background-color: #fff url('AudiLogo1.bmp');
}

.img { align : right }
Klik om te vergroten...
 
HTML: 
<div class='header'>

   <img class='inHeader' src='ditMoetRechts.jpg'>

</div>
PHP: 
//css
/* header */

div.header {
width:930px;
height:100px;
margin-top:10px;
padding:10px;
background-color: #fff url('AudiLogo1.bmp');
}

img.inHeader
{
   position: relative;
   right: 20px;
   top: 10px;
}

:thumb:
 
<div class="container">
<div class="header"><img src="AudiLogo1.jpg"><br /></div>
<img class='inHeader' src='Audi_Logo.jpg'>
<div class="leftcontent">
Klik om te vergroten...

div.header {
width:930px;
height:100px;
margin-top:10px;
padding:10px;
background-color: #fff url('AudiLogo1.bmp');
}


img.inHeader {

position: relative;
right: 20px;
top: 10px;

}
Klik om te vergroten...

en dit gebeurt er:

http://i43.tinypic.com/2em1ll0.jpg


:(
 
ja, je moet je image dus wel IN de header zetten eh? :p

HTML: 
<div class="container">

<div class="header">
   <img class='inHeader' src='Audi_Logo.jpg'>
</div>

<div class="leftcontent">
...
 
top, hij staat nu in de header maar niet tegen de rechterkant aan

dan gaat er vast iets fout in de css?

div.header {
width:930px;
height:100px;
margin-top:10px;
padding:10px;
background-color: #fff url('AudiLogo1.bmp');

}

img.inHeader {

position: relative;
right: 20px;
top: 10px;

}
Klik om te vergroten...
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan