• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Breite eines Elements mit Css festlegen.

B

baessi

Neues Mitglied
Erstmal hallo an alle :-)

Ich hab folgendes Problem:
Ich will eine Homepage machen, die in "2 Teile zerlegt" ist. In einen linken Teil, wo der ganze Inhalt der Seite ist, und in einen rechten Teil, wo ich z.b. einen vertikalen Werbebanner einbinden kann oder so.
Ich hab nun also 2 <span> Elemente, die ja bekanntlich nebeneinander angeordnet werden. Das 1. der beiden, also das linke, soll eine Breite von genau 960 Pixeln haben.
Also: <span id="1" style="background-color: blue; width: 960px; height: 100%;">.
So, der Rest, der nun rechts neben der blauen Box ist, soll jetzt mit dem 2. <span> ausgefüllt werden.
Also: <span id="2" style="background-color: red; width: ???; height: 100%;">
Hier ist mein Problem. Weil wenn ich anstelle der 3 Fragezeichen 100% reinschreibe, dann versucht ja der Web-browser, das Fenster zu 100% mit dem <span> auszufüllen. Die Folge ist ein Zeilenumbruch.
Meine Frage nun:
Gibt es irgend eine Angabe oder ein "Komando", welches der Angabe "width: ???;" mitteilt, dass es NUR die restliche verbleibende Fläche nach rechts auffüllt?

Ich hoffe ihr konntet mich verstehen :P
Danke. :)
 
Also mit <span> macht man das nicht, weil das ein Inline-Element ist.
Du suchst das Element zum Gruppieren, das nennt sich <div>.
Klar, das ist ein Block-Element, aber mit "float" kann man mehrere davon nebeneinander bekommen.
<span> geht nicht, weil span als Inline-Element keine Block-Elemente enthalten darf. Außerdem, das hast Du ja festgestellt, kann man Inline-Elementen keine Breite geben. Dazu brauchst Du ein Block-Element.
 
span sind inline und können daher nicht mit width ausgezeichnet werden.

Für die Seiten Unterteilung nimmt man Divs.

Der 1. Div hat dann die eigenschaft float:left; und der 3., falls vorhanden hat die eigenschaft clear:both; .

Dann funzt es.


MfG
 
Zuletzt bearbeitet:
Das ging ja schnell, danke Leute! ;)

Edit:
Wie erwartet funktioniert es jetzt hervorragend.
Aber was genau macht Css hier?
Was macht float und was bewirkt clear?
 
Zuletzt bearbeitet:
Imbericle schrieb:
Der 1. Div hat dann die eigenschaft float:left; und der 2. hat die eigenschaft clear:both; .
Zum Vergrößern anklicken....
Dann stehen sie aber nicht mehr nebeneinander, dann steht der zweite wieder unter dem ersten.

"clear" braucht ein Element, das IM zweiten Element steht, damit sich das zweite über das erste Element hinweg ausdehnen kann.
 
Also der Code sieht jetzt so aus:

<div>
<div id="left" style="background-color: blue; float:left; width: 960px; height: 10px;">
</div>
<div id="right" style="background-color: red; cleat:both; height: 10px">
</div>
</div>

Jetzt hab ich 2 Fragen:
1) Wenn ich diesen Ausschnitt so in <body> </body> einfüge, dann hab ich oben und links nen weißen Rand.
Was muss ich tun, damit der 1. div, bzw der gesamte Inhalt von <body>, ganz links angeordnet wird?
Ich hab rausgefunden, dass ich dieses Ergebnis erzielen kann, wenn ich style="margin: 0; padding: 0;" in <body> einfüge, aber ist dass dann korrekt?

2) Wenn ich den Code so schreibe, wie es mir oben gesagt wurde, dann ist die rote Box aber mit der blauen bündig, auch hier ist ein kleiner weißer Rand. Wie kann ich das lösen?


Ich kapier das mit float und clear einfach nicht :D
 
Zu 1. Dann überprüfe Deine Abstände. Wenn Du keine gesetzt hast (margin/padding), dann macht der Browser, was er für richtig hält. Wenn Du keine Abstände willst, musst Du sie explizit auf 0 setzen.

Zu 2. Hm? Entweder etwas ist bündig, oder es gibt einen Abstand. Vielleicht hilft ein Link zum Visualisieren Deines Problems?

Was kapierst Du an float nicht? Kannst Du das in eine Frage packen? prm hat Dir ja schon einen Link gegeben. Aber mit "kapier ich nicht" kann man Dir nur schwer helfen...
 
hier: Mineymaler Überschuss
im Firefox passt es. Der IE machts nich so wie ichs gern hätte.
Zu 1):
Also wäre folgendes laut W3C korrekt: <body style="margin: 0; padding: 0;"> ?

Naja, also ich habs mir durchgelesen, aber was float macht, versteh ich nicht wirklich.
Es macht irgendwas mit dem Textfluss. Mehr hab ich aus dem Text noch nicht rausgeholt.
Aber ich will euch da auch nicht weiter aufhalten damit :P
Ich hoffe ich steige noch irgendwann da durch, wichtig ist jetzt erstmal, dass mein anderes Problem gelöst wird^^
 
Die beiden Divs sind nur deshalb nebeneinander angeordnet, weil da ein Tippfehler drin ist:

<div id="right" style="background-color: red; cleat:both; height: 10px">
Zum Vergrößern anklicken....

Zum Verständnis:
"float: left" heißt vereinfacht: der Div steht links und wird rechts umflossen. Also rechts daneben kann sich dann ein anderes Element befinden.
Wenn du clearst, wird der float aufgehoben und das Element befindet sich dann nicht mehr nebendran, sondern untendrunter.
Vielleicht ist es hier etwas einfacher erklärt: Friedels Homepage - Anleitungen für Webseitenbauer

Lass bei deinem id right also mal das "cleat both" ganz weg, zumal es falsch geschrieben ist.
 
Ja, auch wenn ich keine Inline-Styles verwenden würde, sondern immer alles in ein externes Stylesheet schreibe (strikte Trennung von Inhalt und Layout).

"float" ist das, was es auch in Textverarbeitungsprogrammen gibt, dass Text um ein Element fließen kann, wie in Zeitungen Text um Bilder.
Es hat außerdem den Effekt, dass man damit dann Block-Elemente nebeneinander bekommt.
Und es wird aus dem Textfluss genommen, das ist der Fluss, mit dem der Browser die Elemente einer Seite positioniert. Stell Dir einen Stift vor, der die Elemente auf ein Blatt Papier zeichnet. Mit jedem Element sitzt der Stift dann hinter dem zuletzt gezeichneten Element. Außer bei gefloateten Elementen. Da wird das Element gezeichnet, die Position des "Stifts" verändert sich aber nicht, das nächste Element wird an die selbe Stelle geschrieben.
Deine beiden Boxen beginnen also beide an der selben Stelle oben links!
 
baessi schrieb:
hier: Mineymaler Überschuss
im Firefox passt es. Der IE machts nich so wie ichs gern hätte.
Zu 1):
Also wäre folgendes laut W3C korrekt: <body style="margin: 0; padding: 0;"> ?

Naja, also ich habs mir durchgelesen, aber was float macht, versteh ich nicht wirklich.
Es macht irgendwas mit dem Textfluss. Mehr hab ich aus dem Text noch nicht rausgeholt.
Aber ich will euch da auch nicht weiter aufhalten damit :P
Ich hoffe ich steige noch irgendwann da durch, wichtig ist jetzt erstmal, dass mein anderes Problem gelöst wird^^
Zum Vergrößern anklicken....

nimm in Zeile 11 "cleat:both;" raus, das ist falsch geschrieben und außerdem brauchst du es da nicht, du bräuchtest es da, wenn es da wieder eine neue Zeile anfangen sollte, verzeih das ich das falsch schrieb, ich meinte in meinem Beitrag "3" statt "2".

MfG
 
okay.
Aber das 2. div soll ja NEBEN dem 1. sein.
Also wenn ich das clear, bzw. hier: cleat :D, weglasse passt es.
Die weiße Stelle zwischen der roten und der blauen Box bekomm ich einfach nicht weg.
Was mach ich falsch?
 
Bei mir ist auch kein Abstand. Ich wüsste auch nicht, woher der kommen sollte.
Wenn ich genauer hinsehe, sehe ich etwas flimmern. Möglicherweise ist das nur eine optische Täuschung, was Du siehst.

Möglicherweise auch IE im Quirks Mode?

Genau. Du lieferst die Seite im Quirks Mode aus. Dann nutzt der IE ein falsches Box Model und es gibt Darstellungsunterschiede.
 
Bei mir ist da keine weiße Stelle.
Besorg dir am besten kostenlosen Webspace und lade deinen code mal hoch, damit man alles im Zusammenhang sieht.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben