nicht angemeldet
Textpositionierung Quelltext / Design
Hallo allerseits,
ich habe mal ein Problem mit einer Darstellung.
Die Anordnung von Texten im Quellcode fällt hier mit der Anordnung im Design auseinander.
Dazu untenstehendes Beispiel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<STYLE TYPE="text/css" MEDIA=screen>
<!--
#eins { background: red; color: black }
#zwei { background: yellow; color: black }
-->
</STYLE>
</head>
<body>
<p id="eins">Dieser Text soll im Design eigentlich unten stehen.
Im Quelltext hingegen ist es wichtig das er über dem
Text Zwei auftaucht.</p>
<p id="zwei">Dieser Text hingegen soll im Quelltext an letzter
Stelle zu finden sein. Wichtig ist aber das er im
Design über Text Eins auftaucht</p>
</body>
</html>
Ich könnte
a) mit negativen Margins arbeiten
#eins {
background:red none repeat scroll 0%;
color:black;
margin-top:100px;
}
#zwei {
background:yellow none repeat scroll 0%;
color:black;
margin-top:-60px;
}
Nachteil: wenn ich die Schriftgröße ändere passen die Margins nicht mehr. Auch mit EM habe ich das nicht hinbekommen.
b) mit Floats arbeiten
#eins { background: red; color: black; float:right; width:100px;}
#zwei { background: yellow; color: black; float: left; width: 100px; }
Nachteil: Die Texte sollen nicht nebeneinander, sondern untereinander stehen.
c) absolute Positionierungen
Nachteil: wie bei a) nehmen die Texte beim ausdehnen keine Rücksicht aufeinander
Gibt es keine Lösung die "bulletproof" ist?
Danke für Eure Ideen.
-
bei a.) selbstverständlich so :
#eins {background:red;color:black;margin-top:100px;}
#zwei {background:yellow;color:black;margin-top:-60px;} -
Hallo!
ich habe mal ein Problem mit einer Darstellung.
Die Anordnung von Texten im Quellcode fällt hier mit der Anordnung im Design auseinander.
Dieser Text soll im Design eigentlich unten stehen. Im Quelltext hingegen ist es wichtig das er über dem Text Zwei auftaucht.
Dieser Text hingegen soll im Quelltext an letzter Stelle zu finden sein. Wichtig ist aber das er im Design über Text Eins auftaucht.
Also du möchtest den zweiten Textabsatz aus dem normalen Fluß der Elemente herausnehmen - ihn aber am liebsten in Abhängigkeit vom vorhergenden Absatz vor diesem positionieren?
Oder:
Du möchtest den ersten Textabsatz aus dem normalen Fluß der Elemente herausnehmen - ihn aber am liebsten in Abhängigkeit vom nachfolgenden Absatz nach diesem positionieren?
In beiden Fällen "kennst" du aber die jeweilige Höhe (abhängig vom Inhalt) der entsprechenden Box nicht, es sei denn, du weist ihr eine zu. Mit dem Problem, dass sich das Element nicht mehr variabel nach seinem Inhalt orientiert, was zu Scrollbalken, nicht erreichbaren Inhalten, etc. führen kann.
Also alles in allem imho keine erstrebenswerte Situation.
Mich würde mal interessieren, wieso überhaupt ein Absatz, der im Quelltext nach einem anderen folgt, im Screenlayout plötzlich vor diesem angezeigt werden soll?
Das legt nämlich die Vermutung nahe, dass du hier eine falsche Gewichtung vornimmst.
Gruß Gunther
-
Hallo Gunter,
Situation gut erfasst.
genaugenommen geht es um:
-----------------------------------------
| BILD | Menü |
| |--------------------|
--------------------| Text Teil 2 |
| Anfang Text | |
-----------------------------------------Quelltext normal:
Bild
Text Teil 1
Menü
Text Teil 2hier kann ich BildText1 nach links floaten und MenüText2 nach rechts, kein problem also.
Quelltext gewollt:
Bild
Text Komplett
MenüWobei der linke Bereich autonom vom rechten Bereich sein muß, da Text Teil 2 schon auf Höhe des Bildes anfängt.
... und da hört es bei mir auf ...
-
Hallo!
Quelltext gewollt:
Bild
Text Komplett
MenüWobei der linke Bereich autonom vom rechten Bereich sein muß, da Text Teil 2 schon auf Höhe des Bildes anfängt.
Um dein Anliegen evt. besser einschätzen zu können, habe ich noch ein paar Fragen:
1. Dein gesamtes Layout ist fix oder fluid/ elastisch?
2. Um was für eine Art Menü handelt es sich, und aus wievielen Punkten besteht es? Sollen da zukünftig noch welche hinzukommen (können), oder bleibt es so?
3. Wie "trennst" du denn, bzw. teilst du deinen Text auf die beiden Spalten auf?Gruß Gunther
-
1. feste Breite
2.
bisher
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
</ul>wobei die ul's nach links floaten
also 3 Spalten Menu
Menüpunkt1 MenüpunktA MenüpunktI
Menüpunkt2 MenüpunktB MenüpunktII
Menüpunkt3 MenüpunktC MenüpunktIII
Menüpunkt4
Menüpunkt5Es könnten später Punkte hinzukommen
3.
bisher
<div id="links">
<img>
<div id="text1">
</div>
</div><div id="rechts">
<div id="menu">
</div>
<div id="text2">
</div>
</div>-
Hi!
Also bei deiner Konstellation sehe ich keine "brauchbare" reine CSS-Variante für die Umsetzung. Ich würde also in diesem Fall sagen, dass dein Menü dann im Quelltext auch vor dem Inhalt kommen müsste.
Die "klassiche" Variante eines 2-spaltigen Layouts, bei dem der Inhalt vor der Navigation im Quelltext steht, platziert den Inhalt in die eine, und die Navigation in die andere Spalte.
Du stehst also vor der Wahl: Entweder ein anderes Layout (bspw. 3-spaltig) und die gewünschte Reihenfolge im Quelltext, oder dein bisheriges Layout mit der anderen Reihenfolge.
Eine andere ("vernünftige") Variante sehe ich da leider nicht (aber vielleicht ja jemnad anders hier im Forum).
Gruß Gunther
-
Danke Dir Gunther!
Hatte mich sowieso schon mit dem Gedanken angefreundet das Menu im Text zu haben.
Ist in diesem Fall sowieso nicht soviel Text - wäre also eher Schönheitskosmetik gewesen.
Manchmal geht halt nur entweder oder.
-
-
-
-
-
-
Hi,
Die Anordnung von Texten im Quellcode fällt hier mit der Anordnung im Design auseinander.
<p id="eins">Dieser Text soll im Design eigentlich unten stehen.
Im Quelltext hingegen ist es wichtig das er über dem
Text Zwei auftaucht.</p><p id="zwei">Dieser Text hingegen soll im Quelltext an letzter
Stelle zu finden sein. Wichtig ist aber das er im
Design über Text Eins auftaucht</p>Ob es im konkreten Falle eine wirkliche Hilfe darstellt, weiss ich nicht - wenn Flexibilitaet gewahrt bleiben soll, sehe ich naemlich auch (derzeit) keine reine CSS-Loesung [1] - aber Dirk Schürjohann hat sich im Artikel die wichtige Reihenfolge von Webinhalten auch mal so seine Gedanken bzgl. der Thematik im allgemeinen gemacht, ist ganz interessant.
[1] Wenn die Quelltext-Reihenfolge in erster Linie fuer Suchmaschinen "gedacht" waere, dem Benutzer das ganze aber anders praesentiert werden soll, koennte man Javascript zu Hilfe nehmen. Genauer moechte ich darauf aber nicht eingehen, weil damit die Grenze zum SuMa-Spamming ggf. fliessend ueberschritten wird.
MfG ChrisB