nicht angemeldet
Positionierung(sproblem) von 3 Bildern
0 
Gernot Back
0
Positionierung(sproblem) von 3 Bildern
Hallo Zusammen.
Ich will in einer Fusszeile drei Bilder positionieren. Ein Bild ganz links, die anderen zwei ganz rechts. Aber irgendwie kann ich nur alle Bilder gleichzeitîg positionieren (per text-align definition in der Fusszeile [p#fusszeile]). Wenn ich jedoch versuche jedem Bild eine eigene Position zu geben geht nichts.
Ich schreibe hier mal den Quelltext der HTML-Seite sowie des Stylesheets, da ich es noch nicht auf einen Server laden kann.
--------------------- index.htm -------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link rel="stylesheet" type="text/css" href="format.css" />
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<title>Barfoot Inc. :: Willkommen</title>
</head>
<body>
<ul id="navigation">
<li><a href="index.htm">News</a></li>
<li><a href="barfoot/index.htm">Über Barfoot Inc.</a></li>
<li><a href="links/index.htm">Links</a></li>
</ul>
<div id="inhalt">
<h1>Willkommen</h1>
<p>Hier wird irgendwann irgendwas irgendwie entstehen.<br />
Vielleicht Heute, vielleicht in einer Woche, vielleicht in vielen Jahren.</p>
<p>Also macht euch nicht zuviel Hoffnung :-)<br />
Besucht in der Zwischenzeit lieber einige gute Seiten.</p>
<p>Also zum Beispiel:<br />
<a href="http://www.uruloki.ch">www.uruloki.ch</a> (Einfach wichtig!)<br />
<a href="http://www.robsite.de">www.robsite.de</a> (Sehr viele Tutorials und Infos um den Bereich der Informatik)<br />
<a href="http://www.heise.de/security">www.heise.de/security</a> (Wissenswertes über Systemsicherheit)<br />
<a href="http://de.wikipedia.org">de.wikipedia.org</a> (Wissen ist Macht. Wikipedia ist mächtig)<br />
</div>
<?-- Die Fusszeile mit dem Problem -->
<p id="fusszeile">
<a href="http://getfirefox.com/" title="Get Firefox - The Browser, Reloaded.">
<img id="firefox" src="http://www.mozilla.org/products/firefox/buttons/getfirefox_small.png"
width="110" height="32" alt="Get Firefox" />
</a>
<a href="http://validator.w3.org/check?uri=referer">
<img id="xhtml" src="http://www.w3.org/Icons/valid-xhtml11" alt="Valid XHTML 1.1!" height="31" width="88" />
</a>
<a href="http://jigsaw.w3.org/css-validator/">
<img id="css" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" height="31" width="88" />
</a>
</p>
<?-- Fusszeilen Ende -->
</body>
</html>
---------------------------------------------------------------------
--------------------- format.css ------------------------------------body {
color: black;
background-color: white;
font-family: Verdana, Arial, sans-serif;
font-size: 100.01%;
margin: 0;
padding: 1em;
}
ul#navigation {
font-size: 0.80em;
float: right;
width: 22em;
margin: 0 2em 1em 1em;
padding: 0.5em 0.5em 0.5em 0.5em;
border: 1px solid;
background-color: #C0C0C0;
}
ul#navigation li {
list-style: none;
}
ul#navigation a {
display: block;
font-weight: bold;
border: 1px hidden;
text-decoration: none;
}
ul#navigation a:link {
color: white;
}
ul#navigation a:visited {
color: white;
}
ul#navigation a:hover {
color: black;
background-color: white;
border: 1px dashed;
}
div#inhalt {
font-size: 0.95em;
margin: 0em 22em 0.5em 2em;
padding: 0.25em 0em 0em 0.25em;
border: 1px solid;
}
div#inhalt h1 {
font-family: Courier, sans-serif;
font-size: 2em;
margin: 0em 0em 0em 0.25em;
}
div#inhalt a {
font-size: 0.90em;
font-weight: bold;
}
div#inhalt a:link {
color: black;
}
div#inhalt a:visited {
color: #00AA00;
}
/* Fusszeilen Definitionen */
p#fusszeile {
clear: both;
margin: 0em 2em 0em 2em;
background-color: #E0E0E0;
vertical-align: middle;
border: 1px solid;
}
p#fusszeile img {
border: 0px;
}
---------------------------------------------------------------------
-
Hallo Sebastian,
Hallo Zusammen.
Ich will in einer Fusszeile drei Bilder positionieren. Ein Bild ganz links, die anderen zwei ganz rechts. Aber irgendwie kann ich nur alle Bilder gleichzeitîg positionieren (per text-align definition in der Fusszeile [p#fusszeile]). Wenn ich jedoch versuche jedem Bild eine eigene Position zu geben geht nichts.
Hast du das denn auch per float versucht?
Gruß Gernot
-
Ja, ich habe es auch schon mit float versucht.
Aber dann setzen sich die zwei Bilder unter der Fusszeile fest.Trotzdem dane für die schnelle Antwort :)
-
Hallo Sebastian,
Ja, ich habe es auch schon mit float versucht.
Aber dann setzen sich die zwei Bilder unter der Fusszeile fest.Möglicherweise steht das hiermit in Konflikt:
p#fusszeile {
clear: both;Vielleicht genügt da ja ja auch ein clear:left, clear:left und/oder vielleicht bewirkt im HTML-Code eine Umkehrung der Reihenfolge deiner Bild-Elemente innerhalb des Footers was, nur so eine Vermutung. Du kannst da ja mal mit ein paar Varianten rumspielen.
Gruß Gernot
-
Also habe es jetzt folgendermassen lösen können:
Bei "p#fusszeile" habe ich die "clear" Anweisung entfernt und dafür "float: left" eingefügt.
Ausserdem wird Bild 1 mit "float: left" positioniert, Bild 2 & 3 mit "float: right".
Jetzt funktionierts wie gewünscht. Muss das CSS nur noch auf den Internet Explorer abstimmen :)
Danke
vielmals
-
-
-