22.07.2025, 00:29
Change Language
Register
Login
You are not logged in.
iNFiNiTE
God
wiedermal css probleme..
Saturday, June 24th 2006, 12:44pm
moin,
spiele gerade wiedermal mit css (cascading style sheets
) rum, krieg aber n paar sachen nicht gebacken:
1. wie bekomme ich es hin, dass eine div block nur genauso breit ist, wie der (text) inhalt ? mit width:auto oder kompletten weglassen von der width angabe macht er den div block genausobreit, wie platz im browser ist..
2. wie kann ich einen div block in der mitte der seite zentrieren, ohne das alter <center></center> zubenutzen ?
3. kann ich sowas wie blocksatz machen ? und wenn ja wie ? richtet sich das ganze dann nach der breite des div blocks, oder kann man das vorgeben ?
hab schon gegoogled und selfcss bemüht, aber ich kriegs irgendwie nicht hin
messi
spiele gerade wiedermal mit css (cascading style sheets
) rum, krieg aber n paar sachen nicht gebacken:1. wie bekomme ich es hin, dass eine div block nur genauso breit ist, wie der (text) inhalt ? mit width:auto oder kompletten weglassen von der width angabe macht er den div block genausobreit, wie platz im browser ist..
2. wie kann ich einen div block in der mitte der seite zentrieren, ohne das alter <center></center> zubenutzen ?
3. kann ich sowas wie blocksatz machen ? und wenn ja wie ? richtet sich das ganze dann nach der breite des div blocks, oder kann man das vorgeben ?
hab schon gegoogled und selfcss bemüht, aber ich kriegs irgendwie nicht hin
messi
iNFiNiTE
God
Re: wiedermal css probleme..
Saturday, June 24th 2006, 3:44pm
hab ich alles probiert, hat aber keinen effekt.. und mein css layout ist im grunde sehr einfach:
3 css blöcke untereinander, von dem der letzte eben höhe 100% haben soll.. aber auch mit den margin einträgen gehts ned..
hier mein eintrag für den block:
messi
3 css blöcke untereinander, von dem der letzte eben höhe 100% haben soll.. aber auch mit den margin einträgen gehts ned..
hier mein eintrag für den block:
|
Source code |
1 2 3 4 5 6 7 8 9 10 11 |
.text{
padding:60px;
margin:5px;
border:1px solid black;
height:100%;
margin-top:0;
margin-bottom:0;
margin-right: auto;
margin-left: auto;
width:550px;
}
|
messi
Y0Gi
God
Re: wiedermal css probleme..
Sunday, June 25th 2006, 4:37pm
1. Nein, Elemente mit der Eigenschaft display: block; (zu denen u.a. <div> und <p> gehören), nehmen immer die maximal verfügbare Breite in einem Bereich ein, sofern nicht anders fest definiert. Verwendest du ein Element mit display: inline; (wie <span> oder <a> oder <b>), dann funktionieren allerdings auch eine Block-Attribute nicht mehr.
2.
So etwas wie gleich lange Spalten wie von Tabellen her bekannt geht mit CSS leider nicht, wie man sich das wünscht. Ein großer Nachteil.
Aber: Faux Columns
2.
|
|
Source code |
1 2 3 4 5 |
<div style="text-align: center;"><!-- oder ein anderes Elternelement, dass den Inhalt zentriert -->
<div style="margin: 0 auto;"><!-- Setzt oben/unten kein Margin, rechts/links auf auto; geht auch z.B. bei <table> statt <div> -->
Der eigentliche Inhalt kommt hier hin.
</div>
</div>
|
So etwas wie gleich lange Spalten wie von Tabellen her bekannt geht mit CSS leider nicht, wie man sich das wünscht. Ein großer Nachteil.
Aber: Faux Columns
crushcoder
God
Re: wiedermal css probleme..
Sunday, June 25th 2006, 5:38pm
ich bin mir grad nicht sicher was du erreichen willst.
100% des browsers kann man zb so erreichen:
top:100px wegen dem anderen div, das wäre bei top:0px überdeckt.
position:absolute ist hier der kniff.
das problem mit den columnen löst man so übrigens nicht:
wenn man das browserfenster so klein macht das man scrollen muss sieht man das die rechte spalte nicht bis unten reicht, nur bis zum browser-fenster.
die höhen-angaben, ob height:100% oder bottom:0px; beziehen sich nur auf den browser, nicht auf die höhe der webseite.
100% des browsers kann man zb so erreichen:
|
|
Source code |
1 2 3 4 5 6 7 8 9 |
<html>
<head />
<body style="margin:0; padding:0">
<div style="background-color:#dddddd; height:100px;">²</div>
<div style="background-color:#ff0000; position:absolute; top:100px; bottom:0px; left:0px; right:0px; ">²</div>
</body>
</html>
|
top:100px wegen dem anderen div, das wäre bei top:0px überdeckt.
position:absolute ist hier der kniff.
das problem mit den columnen löst man so übrigens nicht:
|
|
Source code |
1 2 3 4 5 6 7 8 9 10 11 12 |
<html>
<head />
<body style="margin:0; padding:0">
<div style="background-color:#dddddd; height:100px;">²</div>
<div style="background-color:#ff0000; position:absolute; top:100px; bottom:0px; left:0px; right:100px; float:right;">
The quick brown fox jumps over the lazy dog<br/>
The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/>The quick brown fox jumps over the lazy dog<br/></div>
<div style="background-color:#ffcc00; position:absolute; top:100px; right:0px; width:100px; bottom:0px;">²</div>
</body>
</html>
|
wenn man das browserfenster so klein macht das man scrollen muss sieht man das die rechte spalte nicht bis unten reicht, nur bis zum browser-fenster.
die höhen-angaben, ob height:100% oder bottom:0px; beziehen sich nur auf den browser, nicht auf die höhe der webseite.
Gott hat die Welt ja nur in sieben Tagen erschaffen können, weil es keine installierte Basis gab.