Bilder im Kopf

anna · 15. Januar 2009

Hallo zusammen,
ich bin im thema html ein ziemlicher neuling. Das Seminar habe ich immerhin schon zu 98 % absolviert und komme damit auch gut zurecht.
Leider kann ich nirgends finden, wie ich im Kopfbereich zwei Bilder anzeigen lassen kann. Ich möchte gerne ein Bild am linken rand haben 120 x 120px, dann einen zentrierten Text in h1, und dann das zweite Bild 120 x 120px rechts ausgerichtet.
Kann mir jemand dabei helfen?

Folgendes habe ich bis jetzt

#kopf {float:left; width:770px;}
h1 {color:#ffe500; text-align:center;}

<div id="kopf"><a><img src="bild1.png">Überschrift<img align="right" src="bild2.gif"></a></div>

YetiZwerg · 16. Januar 2009

Versuch es mal damit:

Code

#kopf {width:770px;}
#koli {float:left; width:120px;}
#kore {float:right; width:120px;} 
h1 {color:#ffe500; text-align:center;}

mkG YetiZwerg

PS:

Code

<div kopf...
<div koli...
<img ...
</div>
Text
<div kore...
<img ...
</div>
</div>

anna · 16. Januar 2009

Vielleicht übersehe ich ja was.
Hier kommt alles. (Die Farben dienen nur für´s erste der Orientierung)

ausgelagerte design.css:
<!--
body {font: 100% Arial, Helvetica, sans-serif; color:white; background-color:black;}
#seitenbereich { width:780px;}
#kopf {width:770px;background-color:green;}
#koli {float:left; width:120px;}
#kore {float:right; width:120px;}
#navi {float:left;width:120px;text-align:center;background-color:blue;}
#inhalt {margin:0 300px 0 130px;background-color:red;}
h1 {color:#ffe500;text-align:center}

a:link {color:#ffe500;}
a:visited {color:#ffe500;}
a:focus {color:#ffe500;}
a:hover {color:#ffe500;}
a:active {color:#ffe500;}-->

index.htm:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">

<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="design.css" />
<title>Titel</title>
</head>

<body>
<div id="seitenbereich">
<div id="kopf">
<div id="koli">
<img src="bilder/patch.gif">
</div>
<h1>Club</h1>
<div id="kore">
<img src="bilder/logo.png">
</div>
</div>
<div id="navi">
<p><a href="index.htm" target="_blank">Startseite</a></p>
<p><a href="wer_wir_sind.htm" target="_blank">wer wir sind</a></p>
<p><a href="was_wir_machen.htm" target="_blank">was wir machen</a></p>
<p><a href="termine.htm" target="_blank">Termine</a></p>
<p><a href="kontakt.htm" target="_blank">Kontakt</a></p>
<p><a href="bilder.htm" target="_blank">Bilder</a></p>
</div>
<div id="inhalt">
<br />
<h2>Hallo</h2>
<p></p>
<p>Text</p>
<br />
<p><img src="bilder/bild1kl.jpg" align="middle"><a href="bilder/bild1gr.jpg" target="_blank">Text</a></p>
<p><img src="bilder/bild2kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild3kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild4kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild5kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild6kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild7kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild8kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild9kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild10kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild11kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild12kl.jpg" align="middle">Text</p>
<p><img src="bilder/bild13kl.jpg" align="middle">Text</p>

</div>

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

YetiZwerg · 16. Januar 2009

worin genau liegt jetzt dein Prob???

warum solltest du was übersehen???

PS: versuch mal den Code, den du uns hier zeigst in [ code ]hier Code[ /code ] einzuschließen...
Ist übersichtlicher...
musst dann nur die leerschritte weglassen.

mkG YetiZwerg

maulepan · 16. Januar 2009

naja.... die bilder in ein div zu legen, ist ziehmlich umständlich.

Wozu gibt es denn Tabellen???
Nimm dir nen Taschenrechner, und erstell dir einfach ne Tabelle!

anna · 16. Januar 2009

Vielen dank !!!!!!!!!!!!!!!!!!!!!
Ich habs mit der Tabelle hinbekommen.
anna

Bilder im Kopf

Jetzt mitmachen!

Teilen