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

<div style="height:100% /> macht mich wahnsinnig !!!

S

snagles

Neues Mitglied
Hallo liebes Forum,

ich fange gerade mit HTML an und habe deshalb wohl auch gleich meine erste Frage.
Ich habe zwei div's mit float nebeneinander gesetzt. Diese werden wiederum von einer div umschlossen. Nun sollen aber die beiden inneren div's immer dieselbe Höhe haben. Nach meinen Verständniss sollte das so funktionieren (Was es aber nicht tut !!!:evil:).

Ist vielleicht jemand dabei der mir sagen kann was ich falsch mache ?

SELFHTLM & co habe ich bereits "durchwühlt", sonst währe ich auch gar nicht erst soweit gekommen ;heart.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
</head>

<body>
<!--- Rahmen außen -->
<div style="position:relative;padding: 10px; border: 1px solid black; width: 1000px; height: auto; position: relative;">

<!-- Header -->
<div style="position:relative;width: 1000px; height: 300px; background-color: black;">
Header
</div>

<!-- Trennlinie Header/ContextRahmen -->
<div style="position:relative;width: 1000px; height: 5px; background-color: white;"></div>

<!-- Content Rahmen -->
<div style="position:relative; width: 980px; height: auto; padding: 5px 10px 10px 10px; background-color: black;">

<table style="position:relative;width: 100%;color: #FFFFFF; font-weight: bold; padding-bottom: 5px;">
<tr>
<td>Bewertungen</td>
<td>Mich Seite</td>
<td>Kontakt</td>
</tr>
</table>

<div style="position:relative;width: 740px; height: auto; padding: 10px; background-color: olive; float:left;">
<div style="width: 720px; height:auto; padding: 10px; background-color: white;">
dieses Blocks an ?
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>
</div>

<div style="position:relative;width: 210px; height:100%; background-color:white;float:right;">
Dieser Block passt sich nicht der Größe ...
</div>

<br style="clear:both"/>

</div>

</div>
</body>
</html>
 
Hallo,

ich habe mal ein bisschen was angepasst...

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
</head>

<body>
<!--- Rahmen außen -->
<div style="position:relative;padding: 10px; border: 1px solid black; width: 1000px; height: auto; position: relative;">

<!-- Header -->
<div style="position:relative;width: 1000px; height: 300px; background-color: black;">
Header
</div>

<!-- Trennlinie Header/ContextRahmen -->
<div style="position:relative;width: 1000px; height: 5px; background-color: white;"></div>

<!-- Content Rahmen -->
<div style="position:relative; width: 980px; height: auto; padding: 5px 10px 10px 10px; background-color: black;">

<table style="position:relative;width: 100%;color: #FFFFFF; font-weight: bold; padding-bottom: 5px;">
<tr>
<td>Bewertungen</td>
<td>Mich Seite</td>
<td>Kontakt</td>
</tr>
</table>

<div style="width: 740px; height: 300px; padding: 10px; background-color: olive;">
    <div style="width: 500px; height:100%; padding: 10px; background-color: white; float:left;">
        dieses Blocks an ?
    </div>

    <div style="width: 200px; height:100%; padding: 10px; background-color: white; float:right;">
        Dieser Block passt sich nicht der Größe ...
    </div>
</div>

<br style="clear:both"/>

</div>
</body>
</html>

Es ist zwar noch immer nicht 100% korrekt, aber ich versuchs dir nun mal zu erklären ...

Wenn du mit height arbeitest, bezieht sich die Höhe immer auf das Elternelement

In dem unteren Abschnitt, hast du das <div> mit der Höhe 300px zu früh geschlossen. Dies habe ich nun nach unten geschoben.

Ich hoffe du kannst einigermaßen nachvollziehen was ich verändert habe.
 
snagles schrieb:
ich fange gerade mit HTML an und habe deshalb wohl auch gleich meine erste Frage.
Zum Vergrößern anklicken....
Und hat auch schon gleich nichts mit HTML zu tun, sondern ist eine CSS-Frage, aber ist ja nicht schlimm :-)

Ich habe zwei div's mit float nebeneinander gesetzt.
Zum Vergrößern anklicken....
Immer schön drauf achten, dass divs keine Wunderwaffe sind und dass man mit HTML die Semantik des INhalts bestimmt. Keine div-Suppe kochen...

Nun sollen aber die beiden inneren div's immer dieselbe Höhe haben. Nach meinen Verständniss sollte das so funktionieren (Was es aber nicht tut !!!:evil:).
Zum Vergrößern anklicken....
Nein. Warum sollten sie? Sie sind beide so hoch, wie ihr Inhalt es benötigt. CSS sieht nur in Tabellenzellen (und Elementen, denen manuell gesagt wird, dass sie sich so verhalten sollen) vor, dass zwei Elemente nebeneinander die selbe Höhe haben. Man kann das zwar mit display:table-cell setzen, allerdings versteht das ein weit verbreiteter Browser nicht.

Da kann man sich dann nur mit "Faux Columns" helfen.
 
Hi,

danke für die schnellen Antworten. :)

@SkitZz Ich habe Deine Änderung 1:1 Kopiert (aber auch kapiert ...). Du verschiebst den Rechten Block IN den Linken. Das ist so aber nicht geplant.

@Efchen Danke für Deine Anregungen, ich denke ich habe verstanden was Du mir sagen wolltest.

Ich habe mal Gegoogled und herausgefunden das "Faux Columns" das Problem zwar lösen könnten, aber da es sich hier eigentlich nur um einen "Optischen Trick" handelt und ich mir keine Abhängigkeit der Verwendeten Farben des Bildes einfangen möchte halte ich die Lösung für "unpraktikabel".

Der Hinweis das DIV's soetwas nicht können (habe ich dann auch gelesen) war super ! Eigentlich ist das Problem mit einer Tabelle (zwei Spalten) super einfach in den Griff zu bekommen. Danke für den Hinweis !!
 
snagles schrieb:
Hi,

danke für die schnellen Antworten. :)

@SkitZz Ich habe Deine Änderung 1:1 Kopiert (aber auch kapiert ...). Du verschiebst den Rechten Block IN den Linken. Das ist so aber nicht geplant.
Zum Vergrößern anklicken....

Tu ich nicht :-(
Die beiden Elemente sind einfach nebeneinander :-)
Wenn du die Größen veränderst, musst du halt aufpassen, dass du nicht über die 740 px
von dieser Zeile kommst (Da zählen auch Abstände und Rahmen dazu)

<div style="width: 740px; height: 300px; padding: 10px; background-color: olive;">
 
snagles schrieb:
Ich habe mal Gegoogled und herausgefunden das "Faux Columns" das Problem zwar lösen könnten, aber da es sich hier eigentlich nur um einen "Optischen Trick" handelt und ich mir keine Abhängigkeit der Verwendeten Farben des Bildes einfangen möchte halte ich die Lösung für "unpraktikabel".
Zum Vergrößern anklicken....
Da es die einzige Lösung ist, die browserübergreifend funktioniert, ist es seit Jahren die gängige Form, dieses Problem zu beheben.
Eine andere gibt es nicht. Es sei denn, Du entscheidest Dich für display:table-cell und schließt damit die IE6-Nutzer aus. Wobei Deine Site dann nur designerisch schlecht aussehen würde und das ja nicht die Nutzbarkeit beeinträchtigen würde. Da der IE6 aber noch der Standard-Browser von WinXP ist, könnte es Dir halt passieren, dass Deine Website dann schlechte Kritiken von vielen IE6-Nutzern kriegt. Mundpropaganda kann eine Website sehr schnell schädigen.

Der Hinweis das DIV's soetwas nicht können (habe ich dann auch gelesen) war super ! Eigentlich ist das Problem mit einer Tabelle (zwei Spalten) super einfach in den Griff zu bekommen. Danke für den Hinweis !!
Zum Vergrößern anklicken....
Nein, eine Tabelle ist falsch. Es handelt sich ja nicht um tabellarische Daten. Während Faux Columns noch einen optischen Trick nutzen, der die Semantik, also auch die Nutzbarkeit nicht beeinträchtigt, beeinträchtigst Du mit einer Tabelle die Nutzbarkeit Deiner Site, weil die Semantik nicht mehr stimmt. Das ist viel schlimmer, denn eine Website muss 100% nutzbar bleiben!

Und Du würdest mich in den Suizid treiben, wenn Du tatsächlich behaupten würdest, eine Antwort von MIR hätte DICH dazu getrieben, TABELLEN zu Layoutzwecken zu missbrauchen!
Dann hätte ich mir diese Übersetzung sparen können: Warum Layout mit Tabellen dumm ist: Probleme definiert, L
 
Hmmm,

also Semantik, nutzbar bleiben usw. leider etwas hoch für mich ... sorry, aber ich bemüh mich ja !

Die Site muss unter allen Browsern vernünfig aussehen. Es soll eine Angebotsvorlage für Ebay werden.

Also hier eine Lösung die für mich zumindest soweit ok ist ...

Was mein ihr ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="XHTML namespace">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Ohne_Titel_1</title>
</head>

<body>
<!--- Rahmen außen -->
<div style="position:relative;padding: 10px; border: 1px solid black; width: 1000px; height: auto; position: relative;">

<!-- Header -->
<div style="position:relative;width: 1000px; height: 300px; background-color: black;">
Header
</div>

<!-- Trennlinie Header/ContextRahmen -->
<div style="position:relative;width: 1000px; height: 5px; background-color: white;"></div>

<!-- Content Rahmen -->
<div style="position:relative; width: 980px; height: auto; padding: 5px 10px 10px 10px; background-color: black;">

<table style="position:relative;width: 100%;color: #FFFFFF; font-weight: bold; padding-bottom: 5px;">
<tr>
<td>Bewertungen</td>
<td>Mich Seite</td>
<td>Kontakt</td>
</tr>
</table>


<table style="width: 100%">
<tr>
<td style="width: 770px">
<div style="position:relative;width: 740px; height: auto; padding: 10px; background-color: olive; float:left;">
<div style="width: 720px; height:auto; padding: 10px; background-color: white;">
dieses Blocks an ?
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

</div>
</div>
</td>
<td style="background-color:white">
<br/>
</td>
</tr>
</table>







</div>

</div>
</body>
</html>
 
snagles schrieb:
Es soll eine Angebotsvorlage für Ebay werden.
Zum Vergrößern anklicken....
Uuuaaah, ebay. Dann bin ich raus. Da kann man nicht logisch und nach modernen Gesichtspunkten vorgehen.

Da ist die Nutzbarkeit schon von ebay zerstört, da könnte man auch Tabellenlayout machen, ohne dass es mehr schadet, als ebay einem überhaupt schon schadet...
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben