✔ Ausrichtung von Bildern

N

Necro_nomicon

Erfahrenes Mitglied
Hallo!

Mal eine Frage, wenn ich bei einem (noch) tabellenlosen Layout im Footer unten mehrere Bilder geben will, die zusammen eine Adressleiste ergeben sollen, wie kann ich die ueber das CCS richtig anordnen?

ich hab jetzt im footer-div eine table reingebaut, aber es ist dann ein Spalt zwischen den Zeilen...

Gibt es eine bessere Lösung? Das mittlere Bild ist einfach dann nur ein repeat fuer 100% Breite

HTML: 
<div id="footer">
	 	<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
			<tr>
				<td><img src="img/leiste_unten_01.gif" alt="Adresszeile"></td>
				<td><img src="img/leiste_unten_02.gif" alt="Adresszeile"></td>
				<td><img src="img/leiste_unten_03.gif" alt="Adressezeile"></td></tr>
			<tr>
				<td colspan="3" style="background-color:#ffcc66;"><img src="img/leiste_unten_05.gif" alt="Adresszeile"></td>
				</tr></table>
	 	</div>

HTML: 
div#footer {
clear: both;
position: absolute;
bottom: 0;
width: 100%; /*** width: 800px ***/
height: 74px; /*** Anpassen an Hoehe des Bildes ***/
background: #fff;
/*** background-image:url(img/leiste_unten_02.gif); ***/ /*** repeat ***/
/*** background-repeat:repeat-x; ***/
/*** border-top: 1px solid #b8b8b8; ***/
}
 
Zuletzt bearbeitet:
Hi,

hast du mal einen Screenshot, wie das Endergebnis aussehen soll?

Und wo taucht der Spalt auf? Zwischen den oberen Zellen, oder zwischen der oberen und unteren Tabellenzeile?

mfg Maik
 
Im Anhang wie es aussehen soll.....

die zerschnittenen Bilder sind:
01: das Milchpackerl mit URL
02: rechter Rand vom letzten Pic (also nur die Striche)
03: das Brot
05: der Teil mit der Adresse

04: wird nicht verwendet

Und das Bild 02 soll eben repeat machen je nach Breite.
03 soll immer rechts sein
05 in der zweiten Zeile zentriert

Ich weiss jetzt nicht, ob ich weiter mit tables herumprobieren soll, oder ob man das nicht ganz anders rein mit CSS machen kann. Wenn dem so ist, wuerd ich das gern tun, hab aber vom Denkansatz her Schwierigkeiten und weiss nicht so recht, was jetzt welches Bild bedingt.

Der Spalt taucht nun zwischen den TR auf, also zwischen den oberen Bild und dem unteren (Adresse)

*** edit ***
hab das Bild neu hochgeladen
 
Zuletzt bearbeitet:
Mit dem Schnappschuß kann ich ehrlich gesagt nicht viel anfangen.

Pack mal alles (HTML-/CSS-Datei und Grafiken) in eine ZIP-Datei, und lad sie hier hoch, damit ich mir ein genaueres Bild von deinem Vorhaben machen kann.

Zwecks dem unerwünschten Spalt hilft hier sicherlich diese Regel weiter:
CSS: 
#footer img { display:block; }

mfg Maik
 
yep:) Das hat die Spalte entfernt.

Das heisst, das Bilder automatisch einen Rand herum machen wenn zwei Zeilen (tr) sind?


***edit***
das repeat mit den Tabellen funkt nun auch:
HTML: 
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
			<tr>
				<td style="background-image:url(img/leiste_unten_02.gif); background-repeat:repeat-x;"><img src="img/leiste_unten_01.gif" alt="Adresszeile"></td>
				<td style="width:110px;"><img src="img/leiste_unten_03.gif" width="110" height="55" alt="Adressezeile"></td></tr>
			<tr>
				<td colspan="2" style="background-color:#ffcc66;"><img src="img/leiste_unten_05.gif" width="928" height="19" alt="Adresszeile"></td>
				</tr></table>




Frage bleibt trotzdem offen, ob man das besser mit CSS ohne Tables haette loesen koennen?


-
 
Zuletzt bearbeitet:
Naja, mit CSS hast du es ja schon gelöst ;)

Anstelle der Tabelle könnte sicherlich auch ein Listenelement verwendet werden.

mfg Maik
 
Hm...
wenn ich jetzan das ganze noch mehr zerteile (von den Bildern), dass

1. Zeile
links das Milchpakerl ist
mitte die URL
rechts das Brot
2. Zeile
mittig Adresszeile

und ich nun ohne table das linke img mit float:left und das rechte mit float:right usw. mache, koennte das in der Theorie funktionieren?

Oder endet sowas dann so, dass die irgendwo herumfliegen?
 
Warum willst du die Grafiken noch weiter aufteilen?

Ansonsten probier's es einfach mal aus.

mfg Maik
 
Ich moechte sie deshalb aufteilen, damit auch die URL immer in der MItte ist.
Das hab ich nun mit der table auch gemacht, wenn ich 5 Spalten habe und die rechts und links eine fixe Breite geben und die restlichen einen Hintergrund haben der sich wiederholt, dann passt das.

Float wuerde ich schon ausprobieren, wollt aber gern wissen ob man (meist du;) nicht bereits im Vorfeld sagt, dass da ein riesen Denkfehler drin ist und das gar nicht funken kann :))

Ich weiss nur, dass bei zu vielen Bildern und float mir es halt oft passiert, dass die Bilder irgendwohin floaten...

Hier mal der Table-Code wie er funkt:

HTML: 
<table border="1" cellpadding="0" cellspacing="0" width="100%" style="table-layout:fixed;">
			<tr>
				<td style="width:115px;"><img src="img/adresse/leiste_unten_01.gif" width="115" height="55" alt="Milch">
				<td style="background-image:url(img/adresse/leiste_unten_02.gif); background-repeat:repeat-x;">
					<img src="img/adresse/leiste_unten_02.gif" width="5" height="55" alt="repeat"></td>
				<td style="background-image:url(img/adresse/leiste_unten_02.gif); background-repeat:repeat-x;"
					><img src="img/adresse/leiste_unten_url.gif" alt="URL"></td>
				<td style="background-image:url(img/adresse/leiste_unten_02.gif); background-repeat:repeat-x;">
					<img src="img/adresse/leiste_unten_02.gif" width="5" height="55" alt="repeat"></td>
				<td style="width:110px;"><img src="img/adresse/leiste_unten_03.gif" width="110" height="55" alt="Brot"></td></tr>
			<tr>
				<td colspan="5" style="background-color:#ffcc66;"><span style="text-align:right;"><img src="img/adresse/leiste_unten_05.gif" width="928" height="19" alt="Adresszeile"></span></td>
				</tr></table>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück