nicht angemeldet
Anfängerfrage
Hallo,
ich habe drei absolut positionierte divs als drei Spalten
nebeneinander gelegt. Wenn ich nun Text einfüge, verschieben
sich nach ein paar Reihen die Zeilen, um ein paar Pixel (z.B. Studium),
sodass die Zeilen nicht mehr auf einer Linie sind.
Was mache ich falsch?
Grüße
<style>
.drumrum {position:absolute;
top:180px;
left:10px;
width:555px;
}
.eins {position:absolute;
top:0px;
left:10px;
text-align:left;}
.zwei {position:absolute;
top:1px;
left:160px;
text-align:left;}
.drei {position:absolute;
top:0px;
left:310px;
text-align:left;}
</style>
<body>
<div class="drumrum">
<div class="eins">Bildungsweg:<br><br><br><br><br><br><br><br><br><br><br><br>
Studium:
</div>
<div class="zwei">08/<b>78</b> <b><i>bis</b></i> 11/<b>84</b>
<br><br><br>
12/<b>84</b> <b><i>bis</b></i> 08/<b>89</b><br><br><br>
09/<b>89</b> <b><i>bis</b></i> 08/<b>90</b><br><br><br>
09/<b>90</b> <b><i>bis</b></i> 09/<b>92</b><br><br><br>
09/<b>90</b> <b><i>bis</b></i> 09/<b>92</b><br><br><br>s
</div>
<div class="drei">hsddhdshdfhsfh<br><b>rgdrghdrhdhdfh</b>, dfhsfh<br><br>
fdshdfhdfhfh<br>
<b>sdfhdfhhsdfh</b><br><br>
Aufenthalt in <b>dfshdfh</b>, dfhsfdh, USA<br>
<b>dfhsdfhfdhhdsfh</b><br><br>
<b>dsfhfsh</b> (sdfhdfhfshdfhsdfh)
</div>
</div>
</body>
-
Also vielleicht hab ich was mit den Augen, aber bei mir verschiebt sich nichts...
Gruss,
CS-
Hallo,
Also vielleicht hab ich was mit den Augen, aber bei mir verschiebt sich nichts...
Ist Studium nicht zwei Pixel höher als "09/90 bis 09/92"?
Verstehe ich nicht im editor und im IE ist das bei mir so.
Trotzdem Vielen DankGruss,
CSGruß Susi
-
Ist Studium nicht zwei Pixel höher als "09/90 bis 09/92"?
Verstehe ich nicht im editor und im IE ist das bei mir so.Ja, aber es ist nur ein Pixel...
----------
.zwei {position:absolute;
top:1px;
left:160px;
text-align:left;}
----------Muss das nicht "top:0px" sein so wie bei "eins"?!
Gruss,
CS-
Ist Studium nicht zwei Pixel höher als "09/90 bis 09/92"?
Verstehe ich nicht im editor und im IE ist das bei mir so.Ja, aber es ist nur ein Pixel...
.zwei {position:absolute;
top:1px;
left:160px;
text-align:left;}Muss das nicht "top:0px" sein so wie bei "eins"?!
Ja, das hatte ich kurzfristig geändert, um mit dem rechten div wieder
auf eine Höhe zu kommen. Dort ist nämlich alles ein Pixel tiefer. Es stimmt auch nicht, wenn man top bei .zwei auf 0px setzt. (Tschuldigung, hätte ich wohl gleich ändern sollen)Gruss,
CSGruß Viktoria
-
Hallo,
kann es vielleicht sein, dass diese <br>'s sich ohne und mit Text
anders aufaddieren? (Etwas weit her geholt, wäre ja auch eine Frechheit.)Naja, nur ein Gedanke...
Grüße Susi
-
-
-
-
-
hi,
teste mal und analysiere die Unterschiede. Mache fuer alle Divs die gleichen Angaben, damit sie sich auch gleich verhalten. Wichtig vor allem: Schriftfamilie und groesse, da sich hierdurch die Groesse des divs ergibt.
Vorsicht mit text-align, fuehrt im NC4x mitunter zu Seltsamigkeiten.
Ich wuerde eh id's fuer die Positionierung verwenden ('#myDiv') und allen die _gleiche_ class geben.Gruesse Joachim
<style type="text/css">
.drumrum {position:absolute;
top:180px;
left:10px;
width:555px;
font-size:14px;
font-family:helevetica, arial,sans-serif;
}
.eins {position:absolute;
top:0px;
left:10px;
font-size:14px;
font-family:helevetica, arial,sans-serif;
}
.zwei {position:absolute;
top:0px;
left:160px;
font-size:14px;
font-family:helevetica, arial,sans-serif;
}
.drei {position:absolute;
top:0px;
left:310px;
font-size:14px;
font-family:helevetica, arial,sans-serif;
}
</style>-
Hallo Joachim,
danke vielmals für die Tips.
Ich wuerde eh id's fuer die Positionierung verwenden ('#myDiv') und allen die _gleiche_ class geben.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Das habe ich leider nicht
verstanden. (Ich weiss, was id`s sind, aber wozu soll ich denen
eine class geben?)Den Rest werde ich gleich ausprobieren.
Nochmals, danke
Gruß Susi-
Moin!
Ich wuerde eh id's fuer die Positionierung verwenden ('#myDiv') und allen die _gleiche_ class geben.
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ Das habe ich leider nicht
verstanden. (Ich weiss, was id`s sind, aber wozu soll ich denen
eine class geben?)Das erklär ich dann mal:
Du machst folgende DIVs:
<div id="spalte1" class="textspalte">
<div id="spalte2" class="textspalte">
<div id="spalte3" class="textspalte">und in deinem CSS definierst du:
#spalte1 {position:absolute; top:0px; left:10px; }
#spalte2 {position:absolute; top:0px; left:160px; }
#spalte3 {position:absolute; top:0px; left:320px; }
.textspalte { font-family:Verdana, Arial, sans-serif; font-size:14px; color:#456710;}Das ergibt folgenden Effekt: Deine DIVs werden per ID individuell positioniert (eventuell packst du dort noch weitere Positionsangaben rein, die für die einzelnen DIVs gelten sollen, wie z.B. width), aber die Schriftformatierung innerhalb der DIVs wird über die Klasse geregelt. Änderst du die Schriftformatierung, machst du das genau EINMAL, nämlich in der einen Klasse, die für die Spalten zuständig ist.
Das ist der Vorteil von CSS, voll ausgenutzt. :)
- Sven Rautenberg
-
Hallo Sven Rautenberg,
genial und rationell,
danke Susi
-
-
-
-
Hallo,
habe jetzt line-height:14pt; überall eingefügt, jetzt geht es.
(abgesehen das mein Bildschirm(sehr groß) unten nach oben eine Delle
hat und alles etwas verzerrt, kann auch der Admin nicht ändern.)Nochmals vielen Dank für die Mühe
Gruß Susi