css layout problem

[Wolfgang]

Hallo ich möchte volgendes layout mit css erstellen (keine tabelen)

1x background-image oben links
Text
1x background-image unten rechts (unten soll abhängig von dem text sein)

Ich spiele mich jetzt schon ein paar tage damit herum aber irgendwie,
irgendwo denk ich mir einen knoten in die birne.

Danke Wolfgang.

[Stefan Einspender]

Hallo Wolfgang,

1x background-image oben links
Text
1x background-image unten rechts (unten soll abhängig von dem text sein)

es ist nicht möglich, einem Element zwei Hintergrundbilder zuzuordnen.
(Ist eigentlich auch logisch, was soll passieren, wenn diese beiden
 Hintergrundbilder "zusammenstoßen"?)
Allerdings kannst Du mit CSS Elemente positionieren und dann, auch
mit CSS, den eigentlichen Inhalt darüberlegen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm

Viele Grüße,
Stefan

[Wolfgang Morawetz]

Hallo Wolfgang,

1x background-image oben links
Text
1x background-image unten rechts (unten soll abhängig von dem text sein)

es ist nicht möglich, einem Element zwei Hintergrundbilder zuzuordnen.
(Ist eigentlich auch logisch, was soll passieren, wenn diese beiden
Hintergrundbilder "zusammenstoßen"?)
Allerdings kannst Du mit CSS Elemente positionieren und dann, auch
mit CSS, den eigentlichen Inhalt darüberlegen:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm

Viele Grüße,
Stefan

Dies habe ich auch versucht nur irgendwo is da noch ein hacken.

<div style="display: block; width: 32px; height:800px;
  position:absolute; top: 116px; left: 0px;
  background-image: url({BILDRECHTS});
  background-repeat: no-repeat;"></div>

<div style="display: block; width: 400px; height:300px;
  position:absolute; top: 116px; left: 36px;
  background-image: url({OBENLINKS});
  background-repeat: no-repeat;">

<div class="tText">{CONTENT}
<div style="display: block; width: 100%; height:300px;
  position:absolute; right: 36px;
  background-image: url({UNTENRECHTS});
  background-repeat: no-repeat;"> </div></div>

mit dem ergebnis das OBENLINKS und OBENLINKS untereinander liegen

Danke für die Antwort (hätte gleich alles reinschreiben sollen)

[Stefan Einspender]

Hallo Wolfgang,

bitte zitiere nur soviel wie nötig und sowenig wie möglich, danke.

<div style="display: block; width: 32px; height:800px;
  position:absolute; top: 116px; left: 0px;
  background-image: url({BILDRECHTS});
  background-repeat: no-repeat;"></div>

Hier kann display:block; raus, auf der Seite erscheint links außen
mit 116 Pixel Abstand nach oben ein DIV mit Hintergrundbild.

<div style="display: block; width: 400px; height:300px;
  position:absolute; top: 116px; left: 36px;
  background-image: url({OBENLINKS});
  background-repeat: no-repeat;">

Auch wieder display:block; raus, es erscheint 36 Pixel von links
und 116 Pixel von oben ein DIV mit Hintergrundbild.

<div class="tText">{CONTENT}
<div style="display: block; width: 100%; height:300px;
  position:absolute; right: 36px;
  background-image: url({UNTENRECHTS});
  background-repeat: no-repeat;"> </div></div>

Wieder display:block raus, es erscheint der Inhalt der Seite und
darunter ein DIV mit Hintergrundbild, welches im Inhalts-DIV liegt.

Leider wird mir aus Deinen bisherigen Postings nicht ganz klar,
was es dann am Ende mal sein soll, zurerst war die Rede von zwei
Hintergrundbildern, jetzt sind es schon drei ...

mit dem ergebnis das OBENLINKS und OBENLINKS untereinander liegen

?

Vielleicht malst Du die Sache mal in einem Grafikprogramm oder
als ASCII-Art, dann kann man es sich bestimmt leichter vorstellen.
Ansonsten benötigst Du eventuell auch die CSS-Eigenschaft z-index:
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#z_index

Viele Grüße,
Stefan

[Wolfgang Morawetz]

mit dem ergebnis das OBENLINKS und OBENLINKS untereinander liegen

?

... und UNTENRECHTS

Vielleicht malst Du die Sache mal in einem Grafikprogramm oder
als ASCII-Art, dann kann man es sich bestimmt leichter vorstellen.
Ansonsten benötigst Du eventuell auch die CSS-Eigenschaft z-index:

http://www.tuning-obd.at/sw/cars/audi.htm
So hab ich es bis jetzt gemacht es ist aber unsauber:)
Würde mich gerne soweit wie möglich von den tabellen
tricks und null.gif- ereien trennen
(so änlich wie ich es hier http://teg.sourceforge.net/fx/nws/index.htm gemacht habe)

PS: bin kein profi, machs aus spaß

[Stefan Einspender]

Hallo Wolfgang,

http://www.tuning-obd.at/sw/cars/audi.htm
So hab ich es bis jetzt gemacht es ist aber unsauber:)
Würde mich gerne soweit wie möglich von den tabellen
tricks und null.gif- ereien trennen

schön, endlich mal eine interessante Aufgabe :-)

Jetzt habe ich nur wenig Zeit, aber ich werde mich in den nächsten
Tagen mal dranmachen, die Seite in eine "saubere" zu verwandeln,
habe schonmal angefangen: http://einspender.de/temp/audi.html

Derzeit hat ich nur die Tabelle mit den Fahrzeugdaten bereinigt,
da wird der Quelltext schon gleich viel schlanker. Als Browser ist
im Moment nur Mozilla 1.2.1 wichtig, die Anpassungen mache ich am
Ende, bis dahin ist noch einiges zu tun.
Bitte lasse die Bilder, die in der Seite referenziert sind, an
ihrem jetztigen Ort, ich melde mich dann morgen hier wieder.

PS: bin kein profi, machs aus spaß

Dem letzten Teil stimme ich zu, den ersten möchte ich nicht
selbst beurteilen ;-)

Viele Grüße,
Stefan

[Stefan Einspender]

habe schonmal angefangen: http://einspender.de/temp/audi.html

und weitergeschraubt, die alte Seite war inkl. CSS ca. 18 KB, jetzt
sind es derzeit 5 KB, es fehlt noch die Navi und die Workarounds
für den MSIE, die leider notwendig sein werden.

Viele Grüße,
Stefan

[Wolfgang Morawetz]

He Danke!
habe deine email bekommen :)
MS hack's habe ich in der css auf sf.net
Das mit dem menü ist trickreicher als notwendig
(wollte schatten und so zeugs machen, habe es aber dann gelassen :)

Das logo hat noch eine kleine make wenn die fenstergröße zu schmal ist :)

Werd mich gleich mal dranmachen.

[Stefan Einspender]

Hallo Wolfgang,

MS hack's habe ich in der css auf sf.net

... bei "meiner" gegenwärtigen Version ist es eigentlich nur not-
wendig, den ersten Zellen einer jeden Tabellenzeile eine Klasse
zu verpassen, da er mit :first-child nicht klarkommt. Auch für
die Mailadresse braucht es noch eine ID, da der MSIE inherit an
dieser Stelle nicht schnallt.
Für das Logo oben ist es vermutlich sinnvoll, wenn das Auto mit den
Streifen als Hintergrundbild für das div#logo eingebaut wird (also
eine ausreichend breite Grafik, ist als GIF nicht so sehr groß) und
dann nur der Schriftzug als normale Grafik in diesem DIV liegt.

Das mit dem menü ist trickreicher als notwendig
(wollte schatten und so zeugs machen, habe es aber dann gelassen :)

Schaue ich mir heute nacht oder morgen nochmal an.

Das logo hat noch eine kleine make wenn die fenstergröße zu schmal ist :)

Ja stimmt, dieses Problem egalisiert sich allerdings, wenn Du dort
so verfährst, wie ich oben vorgeschlagen habe. Also eine Grafik
mit dem Auto links und dann Streifen (so 1.000 Pixel oder mehr und
im GIF-Format), diese Grafik als Hintergrundbild und den Schrift-
zug rechts als normale Grafik.

Viele Grüße,
Stefan

[Stefan Einspender]

Ja stimmt, dieses Problem egalisiert sich allerdings, wenn Du dort
so verfährst, wie ich oben vorgeschlagen habe. Also eine Grafik
mit dem Auto links und dann Streifen (so 1.000 Pixel oder mehr und
im GIF-Format), diese Grafik als Hintergrundbild und den Schrift-
zug rechts als normale Grafik.

habe ich jetzt mal schnell gemacht: http://einspender.de/temp/audi.html
Allerdings ist die Dateigröße der Hintergrundgrafik 12 KB (halte ich
für vertretbar). Eine andere Möglichkeit ist es, dass Auto und den
Schriftzug als normale Grafik einzubinden, die Streifen sollten aber
schon Hintergrundbild sein. Dafür mußt Du allerdings erstmal diese
Grafik nachbearbeiten, die Streifen sind im Moment 56 Pixel hoch.

Viele Grüße,
Stefan

[Wolfgang Morawetz]

habe ich jetzt mal schnell gemacht: http://einspender.de/temp/audi.html

schon bemerkt.

Allerdings ist die Dateigröße der Hintergrundgrafik 12 KB (halte ich

Das auto (ein mercedes ;) ist teil des logos muss also nur einmal geladen werden.

für vertretbar). Eine andere Möglichkeit ist es, dass Auto und den
Schriftzug als normale Grafik einzubinden, die Streifen sollten aber

Das ist ein ganz eigenartiger font und bei meinem freund auf jedem prosp. drauf drum wollte ich wenigstens im logo diesen beibehalten.
Hmmm, ein wenig bold ein wenig serive und es sieht so änlich aus ;)

schon Hintergrundbild sein. Dafür mußt Du allerdings erstmal diese
Grafik nachbearbeiten, die Streifen sind im Moment 56 Pixel hoch.

Also die streifen auf eine länge von 1600px, ok
(zeichne sowiso gerne wie Du auf teg.sf.net möglicherweise bemerkt hast :)

Viele Grüße,
Stefan

Q: margin: 0 20px 40px 0; Einmal px und dann nicht?
Q: p Die anschrift kommt auf jede seite aber soll nicht wie ein banner
     wirken deshaln habe ich es so abgesoftet
     (werde ein class soft machen)

Also zu rund 90% habe ich es verstanden (10% ist unsicherheit).

[Orlando]

Hi Wolfgang,

Q: margin: 0 20px 40px 0; Einmal px und dann nicht?

beim Wert 0 ist die Angabe einer Einheit nicht nötig:

"After the '0' length, the unit identifier is optional."
  http://www.w3.org/TR/REC-CSS2/syndata.html#length-units

LG Roland

[Wolfgang Morawetz]

update :) http://www.tuning-obd.at/sw/

Wolfgang

[Stefan Einspender]

Hallo Wolfgang,

update :) http://www.tuning-obd.at/sw/

sieht nicht so sehr gut aus, vielleicht schaust Du Dir mal meine Variante an ;-)

alt: http://einspender.de/temp/audi.htm (17350 bytes) neu: http://einspender.de/temp/audi.html (6914 bytes)

ACHTUNG, die neue Variante setzt einen Browser voraus, der wirklich was von CSS versteht, im Mozilla 1.2.1 (oder Netscape 7.01) sieht es optimal aus, im Opera 7.0 B2 gibt es ganz kleine Unterschiede und im MSIE 6.0 SP1 wird deutlich, warum dieses Programm in Sachen CSS nicht auf der Höhe der Zeit ist ;-) Die notwendigen Anpassungen sind imho vertretbar und werde ich mal gleich Dir, Wolfgang, überlassen. Nur bitte haue nicht wieder so mit Klassen um Dich, die Übersichtlichkeit des jetztigen Quell- textes sollte ja deutlich geworden sein. Wenn Du Fragen hast, dann stelle sie ruhig, Du hast jetzt eine sehr gute Arbeitsgrundlage :-)

Selbstverständlichkeit: http://validator.w3.org/check?uri=http%3A%2F%2Feinspender.de%2Ftemp%2Faudi.html http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Feinspender.de%2Ftemp%2Faudi.html

Ausnahmsweise poste ich hier mal den CSS- und den HTML-Teil, wer da noch Verbesserungsvorschläge hat, nur her damit. Lediglich die ab- solut referenzierten Grafiken habe ich rausgenommen, damit Wolfgang die Sachen gleich so übernehmen kann.

CSS-Teil:

#####################################################################

@media screen {

.l { float: left; }   .r { float: right; }

a {     background: inherit;     color: inherit;     text-decoration: none;    }

body {     background: #FFFFFF;     color: #000044;     font-family: Arial,Helvetica,Verdana,sans-serif;     margin: 0;     padding: 0;    }

div#logo {     background: url(img/LogoM.jpg);     border-bottom: 1px solid #000000;     border-top: 1px solid #000000;     height: 56px;     text-align: right;     white-space: nowrap;    }

div#navi {     background: inherit;     color: #666666;     margin: 5px 7px 15px 40px;    }

div#navi a {     background: url(img/ndot.gif) no-repeat left bottom;     border-bottom: 1px solid #000000;     font-size: 12px;     padding-left: 8px;    }

div#navi a:hover,div#navi a:active {     background: url(img/hdot.gif) no-repeat left bottom;     color: #AAAA00;    }

div#navilinks {     background: url(img/mbbh.gif) repeat-x bottom;     padding-bottom: 9px;     padding-top: 9px;    }

div#navilinks a {     font-size: 14px;     padding-left: 8px;    }

div#inhalt {     background: url(img/carbgtl_audi.jpg) no-repeat 36px 0;     color: inherit;     margin: 0 20px 40px 0;    }

div#tabdiv {     background: url(img/carbgbr_audi.jpg) no-repeat bottom right;     color: inherit;     padding: 0 20px 20px 56px;    }

h1 {     background: none;     color: #004444;     line-height: 64px;     margin-left: 56px;     margin-bottom: 0;     padding-top: 20px;     padding-bottom: 15px;    }

img { border: none; }

p {     background: inherit;     color: #DDDDDD;     clear: both;     font-size: 12px;     margin: 0 40px;    }

table {     border-collapse: collapse;     margin: auto;     width: 100%;    }

td,th  {     font-size: 14px;     padding: 0;     text-align: right;    }

td:first-child,th:first-child {     text-align: left;    }

td { border-bottom: 1px solid #000077; }

th {     border-bottom: 4px double #660000;     font-weight: normal;    }

}

#####################################################################

HTML-Teil:

#####################################################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"         "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>

<title>Audi</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css">

<meta name="generator" content="with my left egg :-)"> <meta name="autor" content="Wolfgang Morawetz">

<style type="text/css"> <!--

/* hier CSS-Teil einsetzen oder eine externe CSS-Datei mittels link-Element einbinden */

--> </style>

</head>

<body>

<div id="logo"><img class="l" src="img/LogoL.jpg" alt="" height="56" width="498"><img src="img/LogoR.jpg" alt="" height="56" width="254"></div>

<div id="navi">     <div class="l" id="navilinks">         <a href="/sw/index.htm">home</a>         <a href="/sw/information.htm">information</a>         <a href="/sw/contact.htm">kontakt</a>         <a href="/sw/tuning.htm">tuning</a>

</div>     <div class="r">         <a href="/sw/search.htm">suche</a>         <a href="/sw/sitemap.htm">sitemap</a>         <a href="/sw/impres.htm">impressum</a>         <a href="/sw/disclaimer.htm">disclaimer</a>       </div>

</div>

<p>S&W Softwaretuning, Tel.: [phone], Fax.: [phone], e-mail: <a href="mailto:[e-mail]">[e-mail]</a></p>

<div id="inhalt">     <img class="l" alt="" src="img/infobarlt_tuning.jpg" height="400" width="36">     <h1><img class="r" src="img/logo_audi.gif" alt="" height="64" width="136">Audi</h1>

<div id="tabdiv"> <table>

<tr><th>Audi</th>         <th>Standart Kw, Ps, Nm</th>         <th>Optimiert Kw, Ps, Nm</th></tr>     <tr><td>Audi 80 1.9 TDI 94 182</td>         <td>66, 90, 182</td>         <td>85, 116, 248</td></tr>

<tr><td>Audi 80 1.9 TDI 94 202</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi Cabrio 1.9 TDI</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>

<tr><td>Audi A2 1.4 TDI</td>         <td>55, 75, 195</td>         <td>73, 100, 245</td></tr>     <tr><td>Audi A3 1.9 TDI</td>         <td>74, 100, 240</td>         <td>96, 130, 290</td></tr>

<tr><td>Audi A3 1.9 TDI</td>         <td>81, 110, 235</td>         <td>103, 140, 270</td></tr>     <tr><td>Audi A3 1.9 TDI</td>         <td>96, 130, 310</td>         <td>117, 160, 380</td></tr>

<tr><td>Audi A3 1.9 TDI</td>         <td>66, 90, 210</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi A4 1.9 TDI</td>         <td>74, 100, 240</td>         <td>96, 130, 290</td></tr>

<tr><td>Audi A4 1.9 TDI</td>         <td>81, 110, 235</td>         <td>103, 140, 270</td></tr>     <tr><td>Audi A4 1.9 TDI</td>         <td>85, 116, 285</td>         <td>105, 143, 320</td></tr>

<tr><td>Audi A4 1.9 TDI</td>         <td>96, 130, 285</td>         <td>117, 160, 380</td></tr>     <tr><td>Audi A4 1.9 TDI</td>         <td>96, 130, 310</td>         <td>117, 160, 380</td></tr>

<tr><td>Audi A4 1.9 TDI</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi A4 2.5 TDI</td>         <td>110, 150, 310</td>         <td>130, 177, 360</td></tr>

<tr><td>Audi A4 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 390</td></tr>     <tr><td>Audi A4 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 390</td></tr>

<tr><td>Audi A4 2.5 TDI</td>         <td>132, 180, 370</td>         <td>154, 209, 420</td></tr>     <tr><td>Audi 100 2.5 TDI</td>         <td>103, 140, 290</td>         <td>128, 174, 330</td></tr>

<tr><td>Audi A6 1.9 TDI</td>         <td>66, 90, 202</td>         <td>85, 116, 250</td></tr>     <tr><td>Audi A6 2.5 TDI</td>         <td>103, 140, 290</td>         <td>128, 174, 330</td></tr>

<tr><td>Audi A6 1.9 TDI</td>         <td>81, 110, 235</td>         <td>103, 140, 270</td></tr>     <tr><td>Audi A6 1.9 TDI</td>         <td>85, 116, 310</td>         <td>105, 143, 360</td></tr>

<tr><td>Audi A6 1.9 TDI</td>         <td>96, 130, 285</td>         <td>117, 160, 380</td></tr>     <tr><td>Audi A6 2.5 TDI</td>         <td>110, 150, 310</td>         <td>130, 177, 360</td></tr>

<tr><td>Audi A6 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 390</td></tr>     <tr><td>Audi A6 2.5 TDI</td>         <td>114, 155, 310</td>         <td>135, 184, 350</td></tr>

<tr><td>Audi A6 2.5 TDI</td>         <td>132, 180, 370</td>         <td>154, 209, 420</td></tr>     <tr><td>Audi A8 2.5 TDI</td>         <td>110, 150, 310</td>         <td>130, 177, 360</td></tr>

<tr><td>Audi A8 2.5 TDI</td>         <td>132, 180, 370</td>         <td>154, 209, 420</td></tr>     <tr><td>Audi A8 3.3 TDI</td>         <td>165, 225, 480</td>         <td>184, 250, 570</td></tr>

</table>   </div>   </div>

</body> </html>

#####################################################################

Viele Grüße, Stefan

[Stefan Einspender]

Bestimmt fragen sich jetzt einige ForumsleserInnen, ob ich zuviel
Zeit habe, die ganze Sache hier in dem Thread hat mich dann doch
einige Stunden meiner Zeit gekostet.

Nein, ich habe nicht zuviel Zeit, aber Wolfgang's Seite hat mein
Interesse geweckt, mal zu zeigen, was wirklich geht, wenn man CSS
effektiv einsetzt. Das Ergebnis ist ein imho saubere Seite, wo man
auch den Text skalieren kann, ohne dass Inhalte irgendwo weg sind,
weil ich keine absolute Positionierung verwendet habe :-)

Ja, ich bin auch ein wenig stolz auf das Ergebnis und würde mich
freuen, wenn jemand noch den einen oder anderen Verbesserungsvor-
schlag hat :-)

Viele Grüße,
Stefan

[Wolfgang Morawetz]

Ja, ich bin auch ein wenig stolz auf das Ergebnis und würde mich
freuen, wenn jemand noch den einen oder anderen Verbesserungsvor-
schlag hat :-)

Das kannst Du auch sein (aber mein layout hats Dir angetan ;)!
Sieht nicht nur so aus wie das original
es hat jetzt auch brief und siegel :)

An die ie eigenheiten werd ich mich nach dem 31 ranmachen und einen
vorsatz hab ich auch schon "nicht mit klassen rumschmeissen" ;)

HAPPY NEW YEAR!