margin-top wird unterschiedlich interpretiert vom IE und FF

R

Rayne

Gast
Hallo :)

Ich habe ein Problem mit dem Befehl margin-top. Die Darstellung wird vom IE und FF unterschiedlich ausgegeben.

Das Stylesheet:

Body {
background: #FFFFFF;
color: #000000;

margin: 0px;
height: 100%;
}

#Name-Hauptseite {
position: relative;
width: 357px;
height: 24px;
margin-left:auto;
margin-right:auto;
margin-top:50px;
background: url(Bilder/Name.gif) no-repeat;
}

#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
}

#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
}

a.Person {
float: left;
display:block;
width: 136px;
height: 11px;
background: url(Bilder/Person.gif) no-repeat;
}

a.Person:hover {
background: url(Bilder/Person-over.gif) no-repeat;
text-decoration: none;
}

a.Lebenslauf {
float: left;
display:block;
width: 83px;
height: 11px;
margin-left:30px;
background: url(Bilder/Lebenslauf.gif) no-repeat;
}

a.Lebenslauf:hover {
background: url(Bilder/Lebenslauf-over.gif) no-repeat;
text-decoration: none;
}

a.Zeugnisse {
float: left;
display:block;
width: 74px;
height: 11px;
margin-left:30px;
background: url(Bilder/Zeugnisse.gif) no-repeat;
}

a.Zeugnisse:hover {
background: url(Bilder/Zeugnisse-over.gif) no-repeat;
text-decoration: none;
}

a.Arbeitsproben {
float: left;
display:block;
width: 111px;
height: 11px;
margin-left:30px;
background: url(Bilder/Arbeitsproben.gif) no-repeat;
}

a.Arbeitsproben:hover {
background: url(Bilder/Arbeitsproben-over.gif) no-repeat;
text-decoration: none;
}

a.Kontakt {
float: left;
display:block;
width: 66px;
height: 11px;
margin-left:30px;
background: url(Bilder/Kontakt.gif) no-repeat;
}

a.Kontakt:hover {
background: url(Bilder/Kontakt-over.gif) no-repeat;
text-decoration: none;
}


Der HTML-Code:

]<body>
<div id="Name-Hauptseite"></div>
<div id="Navigation">
<a href="#" class="Person"> </a>
<a href="#" class="Lebenslauf"> </a>
<a href="#" class="Zeugnisse"> </a>
<a href="#" class="Arbeitsproben"> </a>
<a href="#" class="Kontakt"> </a>
</div>
<div id="Linie"></div>
</body>


So, im Firefox (3) befindet sich die Linie nun direkt über der Navigation, im IE (7) genau darunter. Stelle ich nun einen margin-top-Wert ein, befindet sich die Linie natürlich dementsprechend unterschiedlich weit unter der Navi :(

So siehts aus:

IE:

http://www.sky-divezone.de/Other/Linie-IE.jpg

FF:

http://www.sky-divezone.de/Other/Linie-FF.jpg

Wo liegt der Fehler? Wie bekomme ich den Abstand identisch hin?

Ich danke für eure Hilfe :)
 
TE
L

Leertaste

Gast
Kann man sich das mal online "live" anschauen? Falls nein, gibt es lauffähigen Code? (inkl. allem drum, drin und dran.)

Hast du schon einen CSS-Prolog?
Code:
* {
margin: 0;
padding: 0;
}
Wo soll die Linie eigentlich sein? Oben oder unten?

Hat es ein Grund, wieso du "position:relative" bei allen Divisionen verwendest?
 

klausbyte

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
3.898
Reaktionspunkte
204
Code:
/* 
 * IE Fixes
 */
 
 
*+html hr	{
	
	margin-top: -7px;
	margin-bottom: -7px;
	}

so ham wir den iebug bei hr's behoben. mit *+html und dann deinem Tag kannst du nur für den IE einen Tag definieren, das wird von FF und Opera nicht interpretiert. PS: Habe mir deinen Code gar nicht angeschaut, aber das sollte dir helfen.
 
TE
L

Leertaste

Gast
klausbyte am 01.09.2008 01:13 schrieb:
Code:
/* 
 * IE Fixes
 */
 
 
*+html hr	{
	
	margin-top: -7px;
	margin-bottom: -7px;
	}

so ham wir den iebug bei hr's behoben. mit *+html und dann deinem Tag kannst du nur für den IE einen Tag definieren, das wird von FF und Opera nicht interpretiert.
Dies wird nur vom IE7 gelesen, den IE6 musst du so ansprechen, falls es ihn auch betrifft:
Code:
* html ... {}
PS: Habe mir deinen Code gar nicht angeschaut, aber das sollte dir helfen.
Ist nutzt ein Div für die "Linie", falls es nur für die Linie erstellt wurde, sollte er wirklich <hr> nehmen, wenn sie kein andere Element nutzen lässt, um per "border" die Linie zu erzeugen.
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
Rayne am 30.08.2008 21:22 schrieb:
Wo liegt der Fehler? Wie bekomme ich den Abstand identisch hin?
Tabelle.
Erste Zeile die einzelnen Begriffe in einzelne Zellen setzen, je nach belieben mit identischer/variabler Zellenbreite und "center"ed und rechts und links je eine Zelle mehr, und darunter eine "colspan" Tabellenzeile mit einer <hr> drin - fertig. ;)
 
TE
L

Leertaste

Gast
Worrel am 01.09.2008 11:57 schrieb:
Tabelle.
Erste Zeile die einzelnen Begriffe in einzelne Zellen setzen, je nach belieben mit identischer/variabler Zellenbreite und "center"ed und rechts und links je eine Zelle mehr, und darunter eine "colspan" Tabellenzeile mit einer <hr> drin - fertig. ;)
Eine Tabelle ist hier allerdings ziemlich fehl am Platz. ;)

Passend wäre:
Code:
<div id="navigation">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
</ul>
</div>
Dann kannst du #navigation "border-bottom:1px solid #000" geben und deine Links über "li a" wunderbar formatieren. ;)
 
TE
R

Rayne

Gast
Danke für eure Antworten, ich hab ganz vergessen, euch mitzuteilen, dass das Problem mittlerweile gelöst ist :)

So gehts:

#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:11px;
}

#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
margin-top: 30px;
clear: left;
}
 

klausbyte

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
3.898
Reaktionspunkte
204
Achja, manchmal hilft auch ein <div style="clear:both;"></div> Wenn der IE mal wieder nen Abastz drunter kommt wo keiner hin soll. Es hilft auch, die Leerzeichen zwischen Tags zu entfernen(!) - habe ich selber nicht glauben können.
Es hilft auch viele Sachen mit festen Größen für width und height anzugeben, und dann overflow:hidden; so verzieht sich nicht euer ganzes layout wenn der Nutzer eine andere DPI Einstellung hat - weil dann Textinhalte unterschiedlich groß (im Vergleich zwischen zwei Systemen) dargestellt werden.
 
TE
L

Leertaste

Gast
Bevor klausbyte noch wunde Finger bekommt, hier sind Bugs vom IE inkl. Lösung: http://www.positioniseverything.net/explorer.html aufgelistet. ;)

@Rayne: Wenn deine Navigation-Links Text-Links sind, dann würde ich keine feste Höhe angeben. Denn dann kommt es zu Problemen, wenn ein Besucher deiner Seite mit größer Schrift als Standard unterwegs ist.
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
Leertaste am 01.09.2008 12:01 schrieb:
Worrel am 01.09.2008 11:57 schrieb:
Tabelle.
Erste Zeile die einzelnen Begriffe in einzelne Zellen setzen, je nach belieben mit identischer/variabler Zellenbreite und "center"ed und rechts und links je eine Zelle mehr, und darunter eine "colspan" Tabellenzeile mit einer <hr> drin - fertig. ;)
Eine Tabelle ist hier allerdings ziemlich fehl am Platz. ;)
... weil ?

Passend wäre:
Code:
<div id="navigation">
<ul>
<li><a href="">Link1</a></li>
<li><a href="">Link2</a></li>
<li><a href="">Link3</a></li>
</ul>
</div>
Dann kannst du #navigation "border-bottom:1px solid #000" geben und deine Links über "li a" wunderbar formatieren. ;)
... und wofür nun zwanghaft das <li> einbauen, wenn's doch mit einer wohlformatierten Tabelle genauso gut geht ? :confused:
 
TE
S

skicu

Gast
Worrel am 01.09.2008 14:10 schrieb:
... und wofür nun zwanghaft das <li> einbauen, wenn's doch mit einer wohlformatierten Tabelle genauso gut geht ? :confused:
Also ich weiß ja nicht, wie du das handhabst, aber in Tabellen schreibe ich zB Messwerte und andere tabellarisch aufzubereitenden Daten. Aber doch keine 5 Links, die in einer Reihe liegen sollen. :o
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
skicu am 01.09.2008 14:34 schrieb:
Worrel am 01.09.2008 14:10 schrieb:
... und wofür nun zwanghaft das <li> einbauen, wenn's doch mit einer wohlformatierten Tabelle genauso gut geht ? :confused:
Also ich weiß ja nicht, wie du das handhabst, aber in Tabellen schreibe ich zB Messwerte und andere tabellarisch aufzubereitenden Daten. Aber doch keine 5 Links, die in einer Reihe liegen sollen. :o
Hm, stimmt, unbedingt ne Tabelle muß es auch nicht sein, aber dann reichen auch hintereinander aufgereihte Links, <li>s sind genauso wenig von Nöten :-D

Und ich entwerfe mein Grundlayout immer in Tabellen, Alleine, damit die Seite bei eventueller Widescreenauflösung nicht genauso aussieht, aber links oben in der Ecke pappt. ;)

So hab ich zB bei meiner aktuellsten Seite ganz oben eine Fensterbreite Tabelle, die links das Menü (ein- oder zweizeilig, das richtet sich noch nach dem Inhalt (ist noch nicht komplett)) und in der rechten Tabellenzelle das Logo, so daß alleine durch diese zwei Elemente schon mal der Anschein geweckt wird, die ganze Seitenbreite werde genutzt, auch wenn der Inhalt darunter nicht ganz so viel Platz in der Breite beansprucht.
 
TE
S

skicu

Gast
Worrel am 01.09.2008 14:45 schrieb:
Hm, stimmt, unbedingt ne Tabelle muß es auch nicht sein, aber dann reichen auch hintereinander aufgereihte Links, <li>s sind genauso wenig von Nöten :-D

Und ich entwerfe mein Grundlayout immer in Tabellen, Alleine, damit die Seite bei eventueller Widescreenauflösung nicht genauso aussieht, aber links oben in der Ecke pappt. ;)

So hab ich zB bei meiner aktuellsten Seite ganz oben eine Fensterbreite Tabelle, die links das Menü (ein- oder zweizeilig, das richtet sich noch nach dem Inhalt (ist noch nicht komplett)) und in der rechten Tabellenzelle das Logo, so daß alleine durch diese zwei Elemente schon mal der Anschein geweckt wird, die ganze Seitenbreite werde genutzt, auch wenn der Inhalt darunter nicht ganz so viel Platz in der Breite beansprucht.
Das nennt sich Tabellenlayout und wird von Fachartikeln seit Jahren massiv kritisiert. *g*
Selbst heise.de hat sich übrigens vor einigen Tagen mit <div>'s neu aufgestellt. :)
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
skicu am 01.09.2008 15:12 schrieb:
Das nennt sich Tabellenlayout und wird von Fachartikeln seit Jahren massiv kritisiert. *g*
Selbst heise.de hat sich übrigens vor einigen Tagen mit <div>'s neu aufgestellt. :)
Und das Tabellenlayout ist schlecht, weil ...?
 
TE
L

Leertaste

Gast
Worrel am 01.09.2008 14:45 schrieb:
Hm, stimmt, unbedingt ne Tabelle muß es auch nicht sein, aber dann reichen auch hintereinander aufgereihte Links, <li>s sind genauso wenig von Nöten :-D
Die gehören zu einer Liste und die Links sind nunmal eine Aufzählung., also nehme ich eine Liste. Genauso wie ich für Überschriften h1, h2, h3 usw. verwende. ;)
Und ich entwerfe mein Grundlayout immer in Tabellen, Alleine, damit die Seite bei eventueller Widescreenauflösung nicht genauso aussieht, aber links oben in der Ecke pappt. ;)
Das ist die alte Technik. Damals war man froh endlich mehr Freiheiten beim Layout zu haben und hat Tabellen genutzt. Heute hat man eine gute CSS Unterstützung der Browser und die Vorteile von CSS fürs Layout sind mehr als offentsichtlich.

@Worrel: http://www.vorsprungdurchwebstandards.de/theory/retro-coding/
http://www.css4you.de/wslayout1/index.html
http://www.webkrauts.de/2006/09/01/webseiten-sind-keine-gemaelde/

Muss allerdings immer bedenken, auch die aktuell Technik ist nicht optimal.

Allerdings gibt es afaik keinen wirklichen Grund noch auf Tabellen für Layoutzwecke zu setzen.
 
TE
S

skicu

Gast
Worrel am 01.09.2008 15:24 schrieb:
Und das Tabellenlayout ist schlecht, weil ...?
Das möchte ich anders beantworten:
Das Box Layout Modell ist besser, weil...
siehe: http://www.antikoerperchen.de/howto/75/css-contra-tabellen-layout-vorteile-und-nachteile-von-div-und-table.html

Ich sage ja nicht, dass man alle Webseiten mit einem Tabellenlayout ächten sollte und die Boxen das einzig wahre sind - aber im eigenen Interesse sollte man sich als HTML Schreiberling so langsam mal auf das Box Modell einlassen, da es doch einige Vorteile bietet.
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
skicu am 01.09.2008 15:33 schrieb:
Worrel am 01.09.2008 15:24 schrieb:
Und das Tabellenlayout ist schlecht, weil ...?
Das möchte ich anders beantworten:
Das Box Layout Modell ist besser, weil...
siehe: http://www.antikoerperchen.de/howto/75/css-contra-tabellen-layout-vorteile-und-nachteile-von-div-und-table.html

Ich sage ja nicht, dass man alle Webseiten mit einem Tabellenlayout ächten sollte und die Boxen das einzig wahre sind - aber im eigenen Interesse sollte man sich als HTML Schreiberling so langsam mal auf das Box Modell einlassen, da es doch einige Vorteile bietet.
Also ich hab das jetzt mal quergelesen (ca. 90% des Inhaltes erfaßt :-D ), habe aber kein wirkliches Argument gegen die von mir verwendete Tabelle (s.o.) gefunden und ich verstehe auch nicht, was daran schlimm sein sollte, wenn ich eine Tabelle zur groben Layouteinteilung nutze -auch wenn sie nicht dafür gedacht sind: alle Browser interpretieren sie, wenn man sie fürs Layout verwendet.


Zum anderen hätte ich da direkt eine Frage:
Ich habe eine andere Seite gemacht, auf der ich einen Rahmen um den Inhaltsblock in der Mitte gemacht habe.

Mit einer Tabelle; also:
Rahmenstück links oben; horizontaler Balken; Rahmenstück rechts oben;
vertikaler Balken; Menü; Inhalt; vertikaler Balken;
Rahmenstück links unten; horizontaler Balken; Rahmenstück rechts unten;

und bei verschieden breitem Browserfenster wird nun der Inhalt immer anders dageboten - immer auf die Breite des Browserfensters angepaßt.

a) Was ist daran schlecht?
b) Wie soll man das mit <div>s und CSS hinkriegen?
 
TE
R

Rayne

Gast
Ich möchte eure Diskussion ja nicht stören, aber es hat sich ein neues Problem aufgetan, bei dem ihr mir helfen könntet ;)

Es geht wieder um unterschiedliche Abstände im FF und IE, finde den Fehler aber einfach nicht.

So siehts aus:

FF:

http://www.sky-divezone.de/Other/Rubrik-FF.jpg

IE:

http://www.sky-divezone.de/Other/Rubrik-IE.jpg

Im Firefox ist der Abstand der Überschrift zur Linie oben und unten nahezu identisch, so wies sein soll. im IE ist der Abstand nach oben aber weitaus größer, das sieht natürlich blöd aus.

Stylesheet:

Body {
/* -------------------------------------------------------------------------------------> Farben */
background: #FFFFFF;
color: #828482;

/* -------------------------------------------------------------------------------------> Schrift */
font-family: Arial;
font-size: 0.9em;

/* -------------------------------------------------------------------------------------> Abstände */
margin: 0px;
height: 100%;
}

/* -------------------------------------------------------------------------------------------------------------------> Navigation */

#Navigation {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:11px;
}

a.Person {
float: left;
display:block;
width: 136px;
height: 11px;
background: url(Bilder/Person.gif) no-repeat;
}

a.Person:hover {
background: url(Bilder/Person-over.gif) no-repeat;
text-decoration: none;
}

a.Lebenslauf {
float: left;
display:block;
width: 83px;
height: 11px;
margin-left:30px;
background: url(Bilder/Lebenslauf.gif) no-repeat;
}

a.Lebenslauf:hover {
background: url(Bilder/Lebenslauf-over.gif) no-repeat;
text-decoration: none;
}

a.Zeugnisse {
float: left;
display:block;
width: 74px;
height: 11px;
margin-left:30px;
background: url(Bilder/Zeugnisse.gif) no-repeat;
}

a.Zeugnisse:hover {
background: url(Bilder/Zeugnisse-over.gif) no-repeat;
text-decoration: none;
}

a.Arbeitsproben {
float: left;
display:block;
width: 111px;
height: 11px;
margin-left:30px;
background: url(Bilder/Arbeitsproben.gif) no-repeat;
}

a.Arbeitsproben:hover {
background: url(Bilder/Arbeitsproben-over.gif) no-repeat;
text-decoration: none;
}

a.Kontakt {
float: left;
display:block;
width: 66px;
height: 11px;
margin-left:30px;
background: url(Bilder/Kontakt.gif) no-repeat;
}

a.Kontakt:hover {
background: url(Bilder/Kontakt-over.gif) no-repeat;
text-decoration: none;
}

/* -------------------------------------------------------------------------------------------------------------------> Trennlinie */

#Linie {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
margin-top: 30px;
clear: left;
}

/* -------------------------------------------------------------------------------------------------------------------> Rubrik */

#Rubrik {
position: relative;
width: 590px;
margin-left: auto;
margin-right: auto;
margin-top: 40px;
font-family: Georgia;
font-size: 2.8em;
color: #137b82;
}

/* -------------------------------------------------------------------------------------------------------------------> Trennlinie 2 */

#Linie2 {
position: relative;
width: 640px;
margin-left:auto;
margin-right:auto;
border-top: solid 1px #137b82;
margin-top: 40px;
}

/* -------------------------------------------------------------------------------------------------------------------> Inhalt */

#Inhalt {
position: relative;
width: 590px;
margin-left:auto;
margin-right:auto;
margin-top:40px;
height:auto;
line-height: 1.4em;
word-spacing: 0.3em;
}


HTML:

<body>
<div id="Name-Hauptseite"></div>
<div id="Navigation">
<a href="#" class="Person"> </a>
<a href="#" class="Lebenslauf"> </a>
<a href="#" class="Zeugnisse"> </a>
<a href="#" class="Arbeitsproben"> </a>
<a href="#" class="Kontakt"> </a>
</div>
<div id="Linie"></div>
<div id="Rubrik">Lernen Sie mich kennen!</div>
<div id="Linie2"></div>

Ist mir ein Fehler unterlaufen?
 
TE
L

Leertaste

Gast
Kannst du die Testseite mal online stellen? Dann ist es wesentlich effektiver und einfacher dir zu helfen. ;)

Hast du nun einen CSS-Prolog?
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
Rayne am 01.09.2008 15:55 schrieb:
<div id="Linie"></div>
<div id="Rubrik">Lernen Sie mich kennen!</div>
<div id="Linie2"></div>
Das würde ich so machen:

<hr class="linie">
<h1>Lernen Sie mich kennen!</h1>
<hr class="linie">

btw: ich find das "Lernen Sie mich kennen!" viel zu groß.
 
TE
L

Leertaste

Gast
Worrel am 01.09.2008 15:53 schrieb:
a) Was ist daran schlecht?
b) Wie soll man das mit <div>s und CSS hinkriegen?
Meine Links auch gelesen? Der 2. zeigt dir auch, wie man Layouts mit CSS macht.
;)

@<hr>
Wenn es überhaupt eine inhaltliche Trennlinie sein muss, vielleicht hilft auch einfach ein "border".
HTML
Code:
<h2>Lernen Sie mich kennen!</h2>
CSS:
Code:
h2 {
padding: 2em 0;
border-top: 1px solid  #137b82;
border-bottom: 1px solid  #137b82;
}

@Rayne koch dir keine Div-Suppe: http://webstandard.kulando.de/post/2005/11/04/div_wahnsinn_div_suppe_oder_div_chaos_-_wie_kann_man_es_vermeiden
 
TE
S

skicu

Gast
Worrel am 01.09.2008 15:53 schrieb:
Zum anderen hätte ich da direkt eine Frage:
Ich habe eine andere Seite gemacht, auf der ich einen Rahmen um den Inhaltsblock in der Mitte gemacht habe.

Mit einer Tabelle; also:
Rahmenstück links oben; horizontaler Balken; Rahmenstück rechts oben;
vertikaler Balken; Menü; Inhalt; vertikaler Balken;
Rahmenstück links unten; horizontaler Balken; Rahmenstück rechts unten;

und bei verschieden breitem Browserfenster wird nun der Inhalt immer anders dageboten - immer auf die Breite des Browserfensters angepaßt.

a) Was ist daran schlecht?
b) Wie soll man das mit <div>s und CSS hinkriegen?
Meinst du sowas?
http://skicu.net/dev/webdesign/Worrel/

Sorry für die Qualität, eben in Eile hingeschmiert. ;)

edit: ieks, ich hab das bottom absolut ausgerichtet.. das is natürlich schmarrn. aber sonst is das so die grundintention.
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
skicu am 01.09.2008 16:21 schrieb:
Meinst du sowas?
http://skicu.net/dev/webdesign/Worrel/

Sorry für die Qualität, eben in Eile hingeschmiert. ;)
Np ;)

Generell ja, aber:
Der Rahmen besteht aus Bildern, nicht aus einer Linie.

Also oben, unten, rechts und links müssen noch Rahmenelement-Bilder an das <div> gepappt werden - das wäre dann des Pudels Kern.

edit: ieks, ich hab das bottom absolut ausgerichtet.. das is natürlich schmarrn. aber sonst is das so die grundintention.
Mit "relative" hängt das dann als nächster Absatz genauso breit unten drunter .. ?

PS: komisch, als ich das vor einiger Zeit ausprobiert hab, war der Hintergrund nie richtig gefüllt ... :|
 
TE
S

skicu

Gast
Worrel am 01.09.2008 16:43 schrieb:
Np ;)

Generell ja, aber:
Der Rahmen besteht aus Bildern, nicht aus einer Linie.

Also oben, unten, rechts und links müssen noch Rahmenelement-Bilder an das <div> gepappt werden - das wäre dann des Pudels Kern.
Dann würde ich mit background-image arbeiten, sollte schon machbar sein.
edit: ieks, ich hab das bottom absolut ausgerichtet.. das is natürlich schmarrn. aber sonst is das so die grundintention.
Mit "relative" hängt das dann als nächster Absatz genauso breit unten drunter .. ?

PS: komisch, als ich das vor einiger Zeit ausprobiert hab, war der Hintergrund nie richtig gefüllt ... :|
Sollte man schon hinbekommen, ist mitunter etwas frickelig, aber mit ein wenig Ausprobieren schon machbar.
Mir fehlt da auch eindeutig die Übung, als dass ich das jetzt fehlerfrei in 2 Minuten hinbekäme.^^
 
TE
L

Leertaste

Gast
Ich würde so ein Design mit "position:static" + "float" & "clear" erstellen. Da ist wesentlich widerstandsfähiger, wenn die Schrift vergrößert wird oder ähnliches. ;)
Eine simple Version davon geht z.B. so: http://www.css4you.de/wslayout1/ex0010.html
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
skicu am 01.09.2008 16:49 schrieb:
Worrel am 01.09.2008 16:43 schrieb:
Generell ja, aber:
Der Rahmen besteht aus Bildern, nicht aus einer Linie.

Also oben, unten, rechts und links müssen noch Rahmenelement-Bilder an das <div> gepappt werden - das wäre dann des Pudels Kern.
Dann würde ich mit background-image arbeiten, sollte schon machbar sein.
Eben nicht - oder kann man 4 Hintergrundbilder für ein DIV definieren, die sich jeweils am rechten, oberen ,... Rand befinden und bei Größenänderung nicht verzerren?

Oh, und noch was: nach außen hin soll der HIntergrund durchsichtig werden, weil der Rand vom Design her "ausfranst" - in der Mitte soll eine einheitliche Hintergrundfarbe sein.

Viel Spaß beim Verwirklichen ohne Tabelle =)
 
TE
L

Leertaste

Gast
Worrel am 01.09.2008 17:26 schrieb:
Eben nicht - oder kann man 4 Hintergrundbilder für ein DIV definieren, die sich jeweils am rechten, oberen ,... Rand befinden und bei Größenänderung nicht verzerren?
Mehrere Hintergrundbilder pro Element geht erst ab CSS3.
Oh, und noch was: nach außen hin soll der HIntergrund durchsichtig werden, weil der Rand vom Design her "ausfranst" - in der Mitte soll eine einheitliche Hintergrundfarbe sein.

Viel Spaß beim Verwirklichen ohne Tabelle =)
Geht alles, sprengt nur hier den Rahmen.

Rayne zuckt das wohl ziemlich wenig. ;)
 

Worrel

Bekanntes Gesicht
Mitglied seit
22.03.2001
Beiträge
22.323
Reaktionspunkte
8.546
Worrel am 01.09.2008 17:26 schrieb:
Oh, und noch was: nach außen hin soll der HIntergrund durchsichtig werden, weil der Rand vom Design her "ausfranst" - in der Mitte soll eine einheitliche Hintergrundfarbe sein.

Viel Spaß beim Verwirklichen ohne Tabelle =)
Anschauungsmaterial, damit ihr nicht meint, ich ziehe mir ständig neue Argumente an was-weiß-ich-was hervor =) :
http://mitglied.lycos.de/tonymnyphot/temp/t_080901.jpg

- geht so was auch ohne Tabelle, wenn sich die Größe nach dem Inhalt richten soll?
 
TE
S

skicu

Gast
Worrel am 01.09.2008 17:49 schrieb:
- geht so was auch ohne Tabelle, wenn sich die Größe nach dem Inhalt richten soll?
Definitiv, auch wenn es wohl ein wenig Aufwand verursachen würde.
 
Oben Unten