Webdesign 101 Demoside

Grafik i sidehovedet: Tekst oven på billedet

Principeksempel 6a

Html-kode:

<div id="banner">
<img src="iss.jpg" height="150" 
alt="Webdesign 101 - en webdesign notesblok" />
<h1<CSS-layout af websider</h1>
>/div>

Bemærkninger:

Som html-koden herover viser, er billedet i sidehovedet indsat ved hjælp af src-attributten. Bredden på billedet er bevidst udeladt. Det har den effekt, at billedet presses sammen/udvides i takt med browservinduets bredde. Læs mere herom i artiklen Fleksible billedstørrelser.

I stedet sættes billedets bredde i stylesheet'et til 100 procent af #banner-elementets bredde, jf. stylesheet koden herunder.

Bemærk i stylesheet'et også egenskaben display:block for billedet. Udelades denne vil et linieskift i kildekoden mellem img-markøren og h1-markøren udløse en smal hvid kant mellem billedet og underkanten af #banner-kassen.

Bemærk endelig, at det her er h1-markøren og ikke billedet, der positioneres absolut inde i #banner-elementet.

div#banner {
  margin:10px 20px 10px 20px;
  background:#eef;
  height:148px;
  border:1px solid black;
  position:relative;}
#banner img {
  width:100%;
  display:block;}
div#banner h1 {
  position:absolute;
  bottom:20px;
  left:20px; 
  color:white;
  font-size:250%}

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.