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

Div-Formatierungs-Probleme

G

Gummix

Neues Mitglied
Heyho liebe Leute,

ich muss für die Uni eine Homepage basteln und dazu muss ich nen bisl mit Div rumbasteln...

Allerdings verwirrt mich dieses Float-Gedönse vollkommen.

Ich brauche folgende Formation

--------Div......#.......Div--------
--------..........#...........--------
--------Div.....DIV.....Div--------
--------..........#...........--------
--------Div......#.......Div--------

links oben, rechts oben, links unten und rechts unten haben fest höhen und breiten

links mitte rechts ham feste breite und die höhe soll sich dem text anpassen

(mitte ist immer so hoch wie alle links bzw rechts zusammen)

die breite ist bei links und rechts fest

die mitte soll die breite zwischen links und rechts füllen (zur not wird die halt auch fest gemacht)

die striche solln den hintergrund darstellen

mit dem Float gedönse komme ich immer nur aufs Divs nebeneinander

und mit clear:both und dann wieder Float krieg ich mit der mitte probleme

bitte um Hilfe.

PS: Kann mir auch mal einer erklären warum man heut zu tage keine Tables mehr zum formatieren benutzen darf? =(

Lieben Gruß

Gummix
 
Wie sieht denn dein Quellcode dazu aktuell aus? Dann könnte man auch erkennen woran es genau scheitert.

Gummix schrieb:
PS: Kann mir auch mal einer erklären warum man heut zu tage keine Tables mehr zum formatieren benutzen darf? =(
Zum Vergrößern anklicken....

Das durfte man eigentlich noch nie. Denn Tabellen dienen zur Erfassung tabellarischer Daten, nicht als Basis für irgendein Design. Da die früheren Browser jedoch eine ungenügende CSS-Unterstützung hatten, griff man früher leider auf Tabellen als Basis zurück. Heute wäre das falsch und würde auch in vielen Fällen zu Problemen in der Gestaltung führen.

Moderation: Verschoben von HTML zu CSS, weils um "float gedönse" geht ..
 
Heyho,

Quellcode technisch is da gerade noch nich viel zu holen, sind einfach nurn paar divs mit hintergrundfarben ;) (will ja erstmal nur das grundgerüst haben bevor ichs mit leben fülle ^^ )

.....
<div style='float:left; height: 30px; width:30px;background-color:pink'>lo</div>
<div style='float:left; height: 30px; width:30px; background-color:pink'>mitte</div>
<div style='float:left; height: 30px; width:30px; background-color:pink'>ro</div>
<div style='clear:both; height: 30px; width:30px; background-color:green'>lm</div>
<div style='height: 30px; width:30px; background-color:red'>rm</div>
<div style='height: 30px; width:30px; background-color:blue'>lu</div>
<div style='height: 30px; width:30px; background-color:yellow'>ru</div>
....

Gruß

Gummix
 
Hab gerade mal das hier gebastelt:

HTML: 
<style type="text/css">
.clearafter:after {
 clear: both;
 content: ".";
 display: block;
 float: none;
 font-size: 1px;
 height: 1px;
 visibility: hidden;
}
</style>
<div style="float: left;width: 30px;height: 30px;background-color: red;">lo</div>
<div style="float: right;width: 30px;height: 30px;background-color: green;">ro</div>
<div class="clearafter" style="background-color: yellow;">mitte</div>
<div style="float: left;width: 30px;height: 30px;background-color: red;">lm</div>
<div style="float: right;width: 30px;height: 30px;background-color: green;">rm</div>
<div class="clearafter" style="background-color: yellow;">mitte</div>
<div style="float: left;width: 30px;height: 30px;background-color: red;">lu</div>
<div style="float: right;width: 30px;height: 30px;background-color: green;">ru</div>
<div class="clearafter" style="background-color: yellow;">mitte</div>

Mit einem Doctype und validem HTML zusammen sollte es dem entsprechend was Du willst. Wenn nicht, nimm es als Basis für das was Du willst.
 
Heyho,

vielen Dank, dass sieht schon sehr passend aus ;)

Allerdings hat das 1 Haken....

Ich hab 3 Divs "mitte", allerdings soll da Variabler Fließtext hin also nach möglichkeit nur eine Div

(könnte auch blöd erklärt gewesen sein sorry Oo)

Gruß

Gummix
 
Dann müsste man das evtl. doch über absolute Positionierung lösen. Eine andere Möglichkeit fällt mir momentan dazu nicht ein.

EDIT: Halt, Idee:

HTML: 
<div style="float: left;width: 30px;">
 <div style="height: 30px;background-color: red;">lo</div>
 <div>Text dazwischen</div>
 <div style="height: 30px;background-color: green;">lu</div>
</div>
<div style="float: right;width: 30px;height: 30px;">
 <div style="height: 30px;background-color: red;">ro</div>
 <div>Text dazwischen</div>
 <div style="height: 30px;background-color: green;">ru</div>
</div>
<div class="clearafter" style="background-color: yellow;">mitte</div>

Wenn Du dann noch die unteren Boxen wirklich unten haben willst, könntest Du die absolt positionieren.
 
<style type="text/css">
.clearafter:after {
clear: both;
content: ".";
display: block;
float: none;
font-size: 1px;
height: 1px;
visibility: hidden;
}
</style>
<div style="float: left;background-color: red;">
<div style="width: 30px;height: 30px;background-color: green;">lo</div>
<div style="width: 30px;height: 30px;background-color: blue;">lm</div>
<div style="width: 30px;height: 30px;background-color: pink;">lu</div>
</div>
<div class="clearafter" style="background-color: yellow;">mitte</div>
<div style="float: right; background-color: green;">
<div style="width: 30px;height: 30px;background-color: green;">ro</div>
<div style="width: 30px;height: 30px;background-color: purple;">rm</div>
<div style="width: 30px;height: 30px;background-color: magenta;">ru</div>
</div>
Zum Vergrößern anklicken....

wenn du mir jetz noch erklären kannst, warum der rechte block jetz unter der Mitte ist, müsste es das doch passen.

die ru und lu müsste ich ja mit nem vertical-align unten fesseln können ro und lo dementsprechend auf top (auch wenns wahrscheinlich nich nötig is)

und dann müsste die mittlere div ja ne variable höhe haben.

Gruß

Gummix
 
Und schon taucht das nächste kleine Problem auf ;)....

HTML: 
<div style='dispaly:table-cell; text-align:center; width:1000px; vertical-align:center;'>
    <div  style="vertical-align:center;background-color: red;">Logo</div>
    <div  style="vertical-align:center;background-color: gold;">Links</div>
    <div  style="vertical-align:center;background-color: cyan;">Bike</div>
    <div style='display:table-cell;'>
        <div style='display:table-cell; position:relative'>
            <div style='width:30px;'></div>
            <div style="position:absolute; top:0px; width: 30px; height: 30px; background-color: green;">lo</div>
            <div style="position:absolute; bottom:0px; width: 30px; height: 30px; background-color: pink;">lu</div>
        </div>
        <div style='display:table-cell; position:relative; background-color:yellow;'>mitte</div>
        <div style='display:table-cell; position:relative; background-color:pink;'>
            <div style="width: 30px; height: 30px; background-color:green;">ro</div>
            <div style="width: 30px; height: 30px; background-color: purple;">rm</div>
            <div style="width: 30px; height: 30px; background-color: magenta;">ru</div>
        </div>
    </div>
    <div style="clear:both; background-color: black;">footer</div>
</div>

(Jaja ich weiß, sobald das halbwegs funktioniert lager ich es in ne vernünftige css aus, is aber zum rumprobiern so einfacher ;) )

Und zwar hab ich jetzt das mit den Floats wieder übern haufen geworfen, hat zwa funktioniert gab aber probleme mit den unter-divs...
Und weil man ja keine Tabellen zur Formatierun benutzten darf, aber divs vorschreiben kann, dass sie sich wie Tabellen verhalten sollen (oh gott wie sinnvoll -.-) hab ichs damit gemacht.

Ich muss jetzt allerdings erreichen, dass die grüne div immer oben ist,
die pinke div immer unten
und das ich nicht gezwungen bin die 2te spalte mit hilfe einer div mit fester breite auseinander zu schießen, die soll sich in der breite anhand des breitesten contents orientieren.

Warum gehts nich? - Weil ich wegen position:relative und absolute usw bla für die div keinen wirklichen inhalt habe...
Warum mach ich nich wieder mit Floats? - Weil ich nichtmal annährend einen Weg gefunden hab die 3 Divs dann wirklich auf gleicher höhe zu halten
und selbst wenn das geht krieg ich die pinke div nich an den boden der wrapper-div drumrum gebunden.

Ich weiß auch nicht wie man das hinbekommen soll als Maschinenbau ingi mit 4h unterreicht in Webdesign ...

Nochmal Hilfe bitte ;)

Vielen Dank
 
Zuletzt bearbeitet:
Habs hinbekommen.
Aber wieder ein neues Problem...
Kann ich den content einer div änderen per klick auf nen link?

Gruß
 
Ja, kannst Du. In dem a-href-Tag notiere folgendes:
Code: 
onclick='document.getElementById("div2").innerHTML = document.getElementById("div1").innerHTML;'
"div1" und "div2" sind dabei die IDs, die Du den divs geben musst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben