CSS DIV Höhe anpassen

Cool Master · 14. November 2011

Moin,

ich habe ein kleines problem. Und zwar überarbeite ich gerade eine Webseite um sie in ein CMS zu bekommen. Nun habe ich aber ein kleines Problem und zwar das so soll es aussehen:

Leider sieht das ganze bei mir so aus:

Mein Code dafür sieht so aus:

HTML:

<div id="rechts">
        <div class="bg" id="bg_1">{% placeholder "BG 1" %} 
            <div id="punkt_1">{% placeholder "Punkt 1" %}</div>
        </div>
        <div class="bg" id="bg_2">{% placeholder "BG 2" %} 
            <div id="punkt_2">{% placeholder "Punkt 2" %}</div>
        </div>
        <div class="bg" id="bg_3">{% placeholder "BG 3" %} 
            <div id="punkt_3">{% placeholder "Punkt 3" %}</div>
        </div>
        <div class="bg" id="bg_4">{% placeholder "BG 4" %} 
            <div id="punkt_4">{% placeholder "Punkt 4" %}</div>
        </div>
        <div class="bg" id="bg_5">{% placeholder "BG 5" %} 
            <div id="punkt_5">{% placeholder "Punkt 5" %}</div>
        </div>
    </div>

Hier noch das CSS:

Code:

#rechts{
height: 950px;
left: 659px;
top: 140px;
width: 250px;
position: absolute;
}

.bg{
    background: gray;
    color: #FFFFFF;
    font-family: Verdana;
    font-size: 12pt;
    font-style: italic;
    font-weight: bold;
    height: 21px;
    left: 0px;
    position: absolute;
    text-align: center;
    width: 250px;
}

#bg_1 {
position: absolute;
top: 0px;
width: 250px;
}

#bg_2{
position: absolute;
top: 340px;
width: 250px;
}

#bg_3{
position: absolute;
top: 560px;
width: 250px;
}

#bg_4{
position: absolute;
top: 800px;
width: 250px;
}

#bg_5{
position: absolute;
top: 890px;
width: 250px;
}

Was ich nun möchte ist da Termine etc auch dazu kommen und natürlich auch entfernt werden hätte ich es gerne so das sich die höhe bzw. top:xyz; dazu anpassen.

Geht das so wie ich das will mit CSS/HTML oder benötige ich dafür JS?

Ic3HanDs · 14. November 2011

Ich denke mit JS.

Koennte mir vorstellen das sowas auch mit HTML5 + CSS3 geht, kann ich aber nicht sicher sagen!

Cool Master · 14. November 2011

Wenn es mit HTML5 und CSS3 geht wäre das perfekt

Das Menü ist schon auf CSS3 basis

Ic3HanDs · 14. November 2011

Wie gesagt, kann ich nicht sicher sagen weil ich mich damit noch nicht wirklich beschaeftigt habe. Aber da es ja soviel auch jetzt schon kann, kann ich mir das eben sehr gut vorstellen.

narzissm · 14. November 2011

Die Struktur ist einfach komplett falsch, wenn du mich fragst. Warum nicht so:

HTML:

<div id="rechts">
	<div class="box">
		<h3>Termine</h3>
		INHALT
	</div>
	<div class="box">
		<h3>Studium</h3>
		INHALT
	</div>
</div>

EDIT: Habs mal so angepasst wie Kausalat richtigerweise vorgeschlagen hat.

Kausalat · 14. November 2011

Ich stimme meinem Vorposter zu und empfehle darüber hinaus einen sinnvollen Einsatz von Überschrift-Tags (<h1>, <h2>, ..., <h6>), anstatt in einer DIV-Suppe zu versinken.

Cool Master · 14. November 2011

narzissm und Kausalat

ich bitte euch doch beim Thema zu bleiben! Meine Kollegen und ich kommen mit der "DIV-Suppe" super zurecht und das zählt.

Und falls ihr es nicht gesehen habt es geht um ein CMS.

Also bitte beim Topic bleiben statt den Aufbau zu kritisieren...

narzissm · 14. November 2011

Du erwartest hier Hilfe, nimmst aber keine "Kritik" an, super Einstellung...

Mit deinem "Aufbau" kannst du nun mal nicht so arbeiten wie mit meinem vereinfachten Code. Mir kommt es so vor, dass du eher keine Ahnung von dem hast was du da gerade tust. In der Regel sollte es kein Problem darstellen mein Beispiel auf die Realität/jedwedes CMS anzuwenden.

TheCadillacMan · 14. November 2011

Cool Master schrieb:
Also bitte beim Topic bleiben statt den Aufbau zu kritisieren...

Die Struktur hat aber durchaus was mit deinem Problem zu tun.

Absolute Positionierung ist i. d. R. keine gute Idee und führt u. a. zu solchen Problemen wie du sie hast.
Der Vorschlag von "narzissm" löst dein Problem deutlich besser als irgendwelche dynamische Größenberechnung, weil es deutlich einfacher ist und sich die Seite so auch ohne viel an verschiedene Bildschrimgrößen anpassen lässt.

Cool Master · 14. November 2011

narzissm schrieb:
Du erwartest hier Hilfe, nimmst aber keine "Kritik" an, super Einstellung...

Ich erwarte nichts. Ich wünsche mir Hilfe aber ich erwarte sie nicht. Ich nehme sehr wohl Kritik an aber wenn du schon so anfängst:

narzissm schrieb:
Die Struktur ist einfach komplett falsch, wenn du mich fragst.

Die Struktur ist sowas von egal es kommt auf das CSS an. Dazu kommt wenn sie komplett falsch wäre, würde die Seite nicht Validiert werden und ich würde nichts sehen...

Ich habe nun mal wie TheCadillacMan meinte die abs. durch relativ ersetzt. Es bleibt aber immer noch gleich.

Kann es sein das ich mit min-height und max-height arbeiten muss?

mercsen · 14. November 2011

hmm top werte zu groß?

lass dirdoch mal die rahmen der einzelnen divs anzeigen, alle in verschiedenen farben um sehen wo denn dieser gewaltige leerraum herkommt.

relativ + top hat btw.keine funtion
(allerelativ zu positionieren halte ich aber auch für "besser")
oder mal im quellcode gucken was derparser in die erste box haut, vlt. sind dort viele zeilenumbrüche?

sverebom · 14. November 2011

Cool Master schrieb:
ich bitte euch doch beim Thema zu bleiben! Meine Kollegen und ich kommen mit der "DIV-Suppe" super zurecht und das zählt.

Die DIV-Suppe ist aber falsch. Es gibt einen Grund, warum man mittlerweile viele Inhalte semantisch korrekt auszeichnen kann und auch sollte. Und ob das nun divs- oder h-tags sind, macht für die Funktionalität so gut wie keinen Unterschied (außer dass man padding und margin definieren muss).

Im Übrigen ist die Struktur sehr wohl Teil des Problems. Dein Problem ist die Art der Positionierung, die in der Form an der Stelle auch unnötig ist. Es sollte genügen, den Content untereinander anzuordnen und den Content so viel Raum einnehmen lassen, wie nötig ist. Das funktioniert natürlich nicht, wenn du dem Content eine fixe Position gibst.

Cool Master · 14. November 2011

Ich habe es wieder schwerer gemacht ales es sein sollte fällt mir gerade auf...

Mein "Content" Div hat ja genau das was ich suche. Abgesehen von dem z-index konnte ich eine neue klasse erstellen und nun klappt es

Code:

#Content{
height: 100%;
right: 15px;
position: absolute;
top: 140px;
width: 605px;
z-index: -1;
}

Dazu die "box" von narzissm

HTML:

<div class="box">
        <h3>{% placeholder "BG 1" %}</h3>
        <br/>
        {% placeholder "Punkt 1" %}
    </div>

sverebom · 14. November 2011

Warum gibst der Sidebar nicht einfach eine feste Breite und schmeißt den Content, vorzugsweise semantisch korrekt ausgezeichnet, in den Div der Sidebar hinein? Der Content ordnet sich von alleine untereinander an. Gegebenenfalls gibst du den Elementen noch ein "display: block" mit auf den Weg, damit sie immer schön untereinander bleiben (dann brauchst du auch keinen br-Tag einfügen). Das ist eigentlich eine der einfachsten Übungen.

Cool Master · 15. November 2011

Den <br/> brauch ich wegen dem CMS bzw. dem edit Mode.

Suche

CSS DIV Höhe anpassen

Cool Master

Fleet Admiral

Ic3HanDs

Commander

Cool Master

Fleet Admiral

Ic3HanDs

Commander

narzissm

Ensign

Kausalat

Gast

Cool Master

Fleet Admiral

narzissm

Ensign

TheCadillacMan

Captain

Cool Master

Fleet Admiral

mercsen

Lt. Commander

sverebom

Vice Admiral

Cool Master

Fleet Admiral

sverebom

Vice Admiral

Cool Master

Fleet Admiral

Ähnliche Themen