Grafik i sidehovedet: Logo

Principeksempel 6

Retur til foregående

Bemærkninger:

Logoet er indsat i sidehovedet ved hjælp af src-attributten:

<div id="banner">
<a href="/">
<img src="orb.png" 
width="60" height="60" 
alt="Webdesign" /></a>
<h1>CSS-layout af websider</h1>
</div>

Sidehovedet inklusive billedet formateres af følgende formdeklarationer:

div#banner {
  margin:20px 20px 30px 20px;
  background:#eef;
  height:78px;
  border:1px solid black;
  position:relative;}
#banner img {
  position:absolute;
  left:16px;
  top:10px;
  border:none;}

Bemærk følgende: position:relative#banner-elementet gør dette elements øverste venstre hjørne til referencepunkt for den absolutte positionering af billedet;
Billedet formateres af den kontekstuelle selektor (Descendant Selector) #banner img, der kun gælder for en img-markør inde i en #banner-element.
Xhtml-formatet på siden forbyder border-attributten i img-markøren, derfor sættes border:none i formdeklarationen for billedet.

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.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit.