Header/Foto (domme vraag misschien...)

Status
Niet open voor verdere reacties.
W

woutiboy

Gebruiker
Lid geworden
2 jan 2012
Berichten
8
Hallo,

Ik ben ook pas met HTML bezig, ik kan al een beetje html, de basis kennis. Maar nu zou ik graag een foto als header gebruiken. Hoe kan dit?


wout
 
Wat bedoel je precies met de header?
In html staat in de header informatie hoe de pagina 'af te handelen'.
Ik denk dat je iets anders bedoelt.
 
Eeuhm... ik bedoel ermee de 'Foto' helemaal bovenaan, waar meestal het menu en de titel van de website staat.
 
We kennen HTTP-headers en email-headers, waarin inderdaad een soort 'afhandelings"-informatie staat.
We kennen ook de <head>-sectie in een html-document, waar meta-informatie in staat.

Maar op het gebied van webdesign wordt "header" (ook wel "masthead") vaak gebruikt voor het bovenste gedeelte van de zichtbare pagina.
Geleend uit het vakgebied Typografie.


Je kunt een foto gebruiken als achtergrond.
Op deze manier:
Code: 
div 
{
background-image:url('/images/example.jpg');
}


Aandachtspunten:
  • foto als background kan behoorlijk afleiden van de echte tekst op de voorgrond
  • van belangrijke informatie (titel, bedrijsnaam, adres) moet je niet een image maken en die plaatsen; deze informatie wordt beter gewoon als tekst opgenomen in html-elementen
 
Nog een attentiepuntje:
Als de header-foto over de volle breedte van de pagina loopt. moet je bij de betreffende <div> ook even de hoogte vermelden, want een background-image is wat je ziet door de "patrijspoort" van de <div>. En door een patrijspoort zonder hoogte zie je geen veilige haven. ;)
Dus bv. in de html:
HTML: 
...
<body>
<div id="header">
   <h1>titel-tekst over de foto heen</h1>
</div>
...
Met in de css:
Code: 
#header {
   height: 200px; /* hoogte foto */
   background: url(imagesmap/mijnheader.jpg);
   }
Omdat een <div> een z.g. "block" karakter heeft, krijgt deze automatisch een breedte van 100%, die hoeft er dan niet bij.
Met vriendelijke groet,
CSShunter
 
Ik werk puur nog maar enkel met HTML.
Tecsman, waar moet uw code staan? ik heb ze tussen de <head> </head> tags gezet, mijn oude blijft gewoon staan... (vraag me NIET hou ik die oude heb geinstalleerd xD).
 
Het voorbeeldje van csshunter is nog duidelijker.

Hoezo, je werkt puur met alleen html?
Je zult toch wel ergens een paar stijl-regels hebben toegevoegd, niet?
Als dat inderdaad niet zo is, zul je van onze voorbeelden weinig snappen.

Maar, uitgaande van csshunters voorbeeld:
je moet in de html-code waarmee je je 'header' maakt, een id toevoegen.
En aan het element met dat id geef je in de CSS-regels een background-image mee.

De vraag is alleen of je werkt met een losse stylesheet of met embedded CSS (tussen de <head>-tags).
Afgaande op je opmerking over mijn code, heb je voor dat laatste gekozen.

Het zou helpen als je een URL kunt geven voor de website.
 
woutiboy, ook als je net met html bezig, het is verstandig om ook gelijk je te gaan bezig houden met css.
Dan kun je bovenstaande adviezen beter begrijpen.
 
Hoi woutiboy,
Als je nog alleen in de html bezig bent, kan je de opmaak-regels in een zogenaamd "style-block" in de <head> van de pagina zetten.
Dat gaat als volgt: je begint met <style type="text/css"> en je eindigt met </style>. Daartussenin komen dan de opmaak-regels zoals hierboven staan aangegeven.
Dus bv.:
HTML: 
... (dingen die voor de head staan)
<head>
... (andere dingen die in de head staan)

<style type="text/css">
#header {
   height: 200px; /* hoogte foto */
   background: url(imagesmap/mijnheader.jpg);
   }
h1 {
   color: red;        /* zo wordt de titel-tekst rood */
   background: white; /* met witte achtergrond */
   margin-left: 50px; /* op afstand van 50px vanaf links */
   margin-top: 20px;  /* op afstand van 20px vanaf boven */
   border: 1px solid green;  /* en met een groen randje eromheen */
   }
</style>

</head>

<body>

<div id="header">
   <h1>titel-tekst over de foto heen</h1>
</div>

... enz.
Naarmate de pagina groeit, kan je ook andere opmaak in het style-block zetten, bijvoorbeeld het lettertype, of welke kleur de tussenkopjes moeten krijgen, of dat een foto aan de rechterkant moet komen, enz.
Zo krijg je een heel waslijstje van de opmaak-zaken bovenin de pagina staan, en in de html in de <body> staan de aanknopingspunten, maar verder geen opmaak.

Als je dezelfde opmaak voor méér pagina's wilt gebruiken, kan je het style-block isoleren: dan plak je de inhoud in een los bestandje (een "css-stylesheet", is een tekstbestandje met een .css uitgang), en dan kan je op de pagina's volstaan met een verwijzing naar dat stylesheet.

Is lekker handig: als je bv. de achtergrondkleur van alle pagina's wilt veranderen, hoef je dat maar één keer te doen in het stylesheet, en de verandering wordt automatisch doorgevoerd op alle pagina's van de hele site.

Meer weten? Voor een aardige combinatie van html- en css-beginselen kan je eens kijken bij de: www.web-garden.be/cursus-html/cursus-html/.

Met vriendelijke groet,
CSShunter
 
Laatst bewerkt:
Hallo,

of misschien zou je dit kunnen proberen:

HTML: 
div#header
{
  width:   1000px;
}

img#header_img
{
   width:   100%;
   height:  300px;

}


HTML: 
<div id="header">

   <img src="geenidee.jpg" id="header_img" alt="header" />

</div>
 
Ja, je kunt de afbeelding ook direct in de html zetten, niet als achtergrond-figuur. Dan heb je zelfs geen css nodig als je de maten opneemt in de html:
HTML: 
...
<body>

<div>
   <img src="mooieheader.jpg" width="990" height="300" alt="" />
</div>

...
</body>
</html>
Op die manier kan je niet zonder meer een tekst over de afbeelding heen zetten, die komt daar normaal gesproken onder. Als je dat anders wilt, is daarvoor dan weer wel css nodig.

Met vriendelijke groet,
CSShunter
_________
PS: Ik zou altijd een max. breedte van 990px aanhouden. Dan is er bij een resolutie van 1024*768px in geen enkele browser een horizontale scrollbalk onderaan. Een 1000px breedte is soms net te breed.
 
Laatst bewerkt:
Oh op die manier dan zou ik gewoon

HTML: 
<header style="background-image: url(geenidee.jpg)">

</header>

doen ;)
 
Inderdaad, dat kan ook nog.
En dan met een hoogte erbij, anders is er nog niets te zien van de geenidee.jpg. :P

Maar het is af te raden om styles direct in de html te zetten: je kan de opmaak beter apart houden in een style-blok, en liefst in een los stylesheet. Zie verder ook hier en hier.
Daarom stond het zo in m'n reactie nr. #9 hierboven. ;)
 
Laatst bewerkt:
Dat klopt, het beste is om html en de rest gescheiden te houden :P

Code: 
*{
margin: 0px;
padding: 0px;
}

header{
width:  80%;
height: 200px;
background-image: url(geenidee.jpg);
}

HTML: 
<!doctype html>
<html lang="nl">
<head>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div id="wrapper">
<header>
<h1>header met achtergrond</h1>
</header>
<content>
blah blah blah
</content>
<footer>
copyrigth van mij
</footer>
</div>
</html>
 
@ange1:
Wat doet die wrapper daar?

Maar eigenlijk was dit topic een vraag van woutiboy, en geen dialoog tussen ons; dus we zeilen een beetje off-topic.

Kan woutiboy het nog volgen?
 
Ik hoop dat hij/zij het nog kan volgen.
Ik heb de wrapper er bij gezet om een beetje goede html codering instant te houden :p

wrapper

header

body

footer

/wrapper

hierdoor zorgt de wrapper voor een mooi geheel
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan