Tabellen oder andere Lösungen?

[91hannes]

Hallo liebe Forumgemeinde,

ich hab da für meine Mom mal so n online shop zusammengepuzzelt, und jetz wollte ich da was für den Header machen. Es geht darum das das Grundlogo im Header centriert ist und 1007px lang, das soll auch so bleiben. Nun wollte ich da mit ner Tabelle links und rechts für verschiedene Bildschirmeinstellungen den Logo hintergrund fortführen, mit fertig bearbeiteten Bildsegmenten, sozusagen als zellenhintergrund, also jeder mit ner größeren bildschirmauflösung sieht dann mehr von dem logo-hintergrund... ich hab ma versucht das umzusetzen, is in die hose gegangen =)
hier meine Versuche:

<table border="0" width="100%" cellspacing="0" cellpadding="0">
<tr class="header">


<td align="left" valign="middle" style="background-image:url(image/background_links.jpg)">
</td>


<td align="center"   valign="middle">
<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '"><center>' . tep_image(DIR_WS_IMAGES . 'm_header.jpg', 'Annett Allwardt', 'float:center') . '</center></a>'; ?>
</td>


<td align="right"   valign="middle" style="background-image:url(image/background_rechts.jpg)">
</td>


</tr>
</table>

Jetz bitte nich gleich lachen... Jedenfalls ist das Ergebnis dass das 1007er logo schön centriert in der mitte liegt, und links und rechts der standart hintergrund des shop.

Für Live - Anschauung hier der Link zum shop:
http://www.91hannah.de/

Lösungen?

Danke im vorraus
Gruß

Hannes

 

[threadi]

Wieso so kompliziert? Tabellen sind zudem nicht für sowas gedacht. Eher so:

HTML:

<div class="header"><img src="bild.jpg" alt="" /></div>

CSS:

.header {
background-image: url(hintergrund.png);
background-repeat: repeat-x;
height: 100px;
}

.header img {
display: block;
margin: 0px auto;
}

hintergrund.png ist die Grafik die den Hintergrund aus dem zentrieren Bild "vorführt". Sie liegt zwar auch hinter der zentrierten Grafik, aber das macht ja nix.

 

[91hannes]

Doch

Das wäre nicht so gut,

Ich meinte das eher so:

1.Grafik links als hintergrund deklariert damit keine ewig lange Scrollmöglichkeit entsteht:

2. Hauptsgrafik als Logo rechts neben der !. Grafik aber im Gesamtbild centriert:

3. Grafik rechts, wieder als Hintergrund

alles als Gesamtbild ergibt die gewünschte Wirkung im Zentrierten zustand das Logo.

Gruß Hannes

 

[Junny]

Herangehensweise überdenken

Hallo 91hannes,

Deine Herangehensweise beschreibst Du im Moment so:
1. Wie soll die Seite aussehen?
2. Welche html-Elemente muss ich dafür verwenden?
3. Welchen Inhalt schreibe ich rein?

Probier es doch mal so:
1. Welchen Inhalt will ich darstellen?
2. Welche html-Elemente sind dafür vorgesehen/am ehesten geeignet?
3. Wie soll das aussehen (Formatieren mit CSS)


Konkret mit dem Header geht das etwa so:
1. Die URL des Shops als Überschrift, darunter die Anschrift
2. <h1> und <address> sowie (um die Zusammengehörigkeit als Gesamtüberschrift zu betonen) ein <div>-Container um beides rum
3. Gesamte Breite, Hintergrundbild wie Du gepostet hast, zentriert...

Die Frage, ob man hier Tabellen verwenden sollte oder nicht, stellt sich damit gar nicht.


Solltest Du auf Deine Schriftart und pixelgenaue Formatierung bestehen und Dich weigern, die richtigen html-Elemente für Überschriften bzw. Anschriften zu verwenden, ist die einfachste Lösung die hier:

<div id="header"><img src="http://julius.reality-ambush.eu/91hannah/logo_adresse.gif" alt="www.91hannah.de" longdesc="www.91hannah.de - Annnet Allwardt - Siedlung 41 - ..." width="1007" height="134" /></div>

Dieser Div-Container enthält ein transparentes Gif, das nur die Schrift darstellt. Anschließend CSS-formatieren wir ihn wie gewünscht, z.B. so:

#header {
	height: 134px;
	background-image: url(http://julius.reality-ambush.eu/91hannah/header_background.jpg);
	background-repeat: repeat-x;
	background-color: #FFFF00;
	background-position: center;
	text-align: center;
}

Ich hoffe, ich konnte mit meiner ersten Ausführung helfen.
Junny

 

[neuroleptika]

Ich würde das das ganz ohne <img> machen.
Wenn der Text in dem Bild ohne Bedeutung ist, einfach weglassen und als background-image einem <div> zuordnen.
Wenn der Text als Überschrift, erster Ordnung, hervorgehoben werden soll:

<h1>
Annett Allwart, 91hannah.de<br />
Damen und Herrenschuhe
<span></span>
</h1>

Den Text mit css-background-image "übermahlen":

  h1 {
position: relative;
height: 134px;
}
h1 span {
background-image: url(http://annettallwardt.an.funpic.de/image/m_header.jpg);
[B][COLOR=Sienna] background-position: center;[/COLOR][/B]
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0;
left: 0;
height: 134px;
width: 100%;
overflow: hidden; /*damit der Text nicht hinter dem Bild hervorguckt*/
}

Der Textinhalt ist für Suchmaschinen erfassbar und als Überschrift ausgezeichnet.

Die Bildbreite auf die maximal zu erwartende Anzeige anpassen.

Und falls nicht schon global geschehen:

h1 {
margin: 0;
}