Balken wird nicht richtig dargestellt

Ich habe über CSS einen Balken definiert

.div1{ position:relative; height:40%; width:100%; background-color:#e6fafa; }

im HTML File rufe ich diesen auf

Hallo
.

Der Balken wird jedoch nicht so groß woe angegeben sondern nur so groß wie das Hallo ist. Wieso?

Ich brauche einen breiten Balken ca. 90px der aber relativ sein muss, damit sich die Homepage der Fenstergröße anpasst.

Danke

Was willst du damit erreichen? Zeig doch mal deinen vollständigen HTML- und CSS-Code, dann kann dir wahrscheinlich besser geholfen werden.

Die Prozentangaben benötigen eine Basis, auf die sie sich beziehen können.

Füge mal noch das in die CSS ein:

html, body {width: 100%; height: 100%;}

danke!

Das problem jab ich schon geläst mein neues ist folgendes…http://i36.tinypic.com/289bxiv.jpg

Der Balken links wo such steht soll auf der gleichen höhe sein wie das grüne (symbolfarbe). Wie schaff ich das find leider keine möglichkeit

Da sind vermutlich die Breiten beider elemente zu groß oder es wurde nicht richtig gefloatet/gecleart.
Ohne Quelltext lässt sich die konkrete Ursache jedoch nicht feststellen.

Code

#div1
{
 position:relative;
 height:8em;
 width:auto;
 background-color:#e6fafa;
 clear:both;
}
#div2{
position:relative;
top:auto;
width:11.5%;
height:100%;
background-color:#e6fafa;
clear:both;
}
#content {
float:left;
width:88.5%;
height:50%;
margin-left:11.5%;
background-color:#00CC66;
clear:both;
}

Das wäre der CSS Code dazu

Versuch’s mal so:

#div2{
width:11.5%;
height:100%;
background-color:#e6fafa;
float: left;
}
#content {
width:88.5%;
height:50%;
margin-left:11.5%;
background-color:#00CC66;
}

und im HTML-Teil nach Schließen von #content clearen.
Ansonsten poste auch mal noch den HTML-Code.

Dem möchte ich doch mal hinzufügen, dass die Basis, auf die sich die Größen beziehen, auch vorhanden ist, wenn diese Angaben im Stylesheet nicht gemacht werden.

Ein Block-Element ist immer nur so groß, wie sein Inhalt.
Eine prozentuale Angabe bezieht sich IMMER auf das Elternelement.
Wenn also html und body keine Größenangabe haben, beziehen sich die anfangs genannten 40% schlicht auf die Größe des Elternelements. Nur bei html und body beziehen sich prozentuale Angaben auf die Größe des Viewports, niemals aber bei anderen Elementen.

Nicht immer.

height: wert% kann nicht (mit css) vom Elternelement ermittelt werden, wenn Dieses keine height zugewiesen bekommen hat.
Das Kinderelement bestimmt die Höhe seines Elternelementes als Inhalt mit.
Diese Aufgabe kann kein Browser lösen. height: wert%; wird ignoriert.

[code]

/* */


Überschrift

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

[/code]height: 50% bleiben wirkungslos.

Hindert man mit position: absolute; von

das Mitwachsen von
wird

mit height:50%; von
dargestellt:

[code]
#box {
position: relative;
background-color: #E9E9E9;
}

#box h1 {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
height: 50%;
background-color: #FF8000;
}

#box p {
margin: 0;
padding: 0;
width: 8em;
margin-left: 50%;
}
[/code]Im Prinzip lässt sich so ein float-freies Spaltenlayout erstellen.
Würde ich aber nicht empfehlen.

Aber immer öfter. :slight_smile:

height: wert% kann nicht (mit css) vom Elternelement ermittelt werden, wenn Dieses keine height zugewiesen bekommen hat.

Aber deswegen besitzt das Elternelement dennoch eine Höhe.

Das Kinderelement bestimmt die Höhe seines Elternelementes als Inhalt mit.

Hmmm…ich bin immer davon ausgegangen, dass wenn das Elternelement keine Höhe zugewiesen bekommt, viele Kindelemente beinhaltet und dann eines von diesen Kindern height:50% bekommt, dass dann das Kindelement 50% so hoch wie das Elternelement.
Hab das eben mal ausprobiert und fand jetzt interessant, dass das Kindelement dann 50% der Höhe des Viewports bekommt. OHNE dass ich html/body eine Höhe zugewiesen hätte…

Nun gut…man lernt nie aus.

Also hier ist mal mein HTML Code

[HTML]

Startseite
Login: Password: Registrieren
Herzlich Willkommen
[/HTML]

und da mein css

[CODE]@charset „utf-8“;
/* CSS Document */
body{
font: 14px sans-serif;
margin:0%;
width:100%;
height:100%;
}
html{
margin:0%;
width:100%;
height:100%;
}
#div1
{
position:relative;
height:8em;
width:auto;
background-color:#e6fafa;

}
#div2{
width:11.5%;
height:100%;
background-color:#e6fafa;
float: left;
}
#content {
width:88.5%;
height:50%;
margin-left:11.5%;
background-color:#00CC66;
}
.loginleiste{
position:relative;
top:25%;
left: 45%;
background:url(pictures/loginleiste.jpg) no-repeat;

}
.table1_left{
position:relative;
top:6em;
width:12.5em;
height:9.5em;
background:url(pictures/table_background.jpg) no-repeat;
background-position:center;
}
.table2_left{
position:relative;
top:5em;
width:12.5em;
height: 20em;
background:url(pictures/table2_background.jpg);
background-repeat:no-repeat;
background-position:center;
}
.table3_left{
position:relative;
top:4em;
width:12.5em;
height: 9.5em;
background:url(pictures/table3_background.jpg);
background-repeat:no-repeat;
background-position:center;
}

.menuetext{
font: 16px sans-serif;
text-indent:1em;
font-weight:bold;

}
.registrytext{
font: 14px sans-serif;
text-indent:0.2%;
}

#suche input{
position:relative;
text-indent:1em;
width:10em;
}

a:link{color:#000099;}
a:visited{color:#000099;}
a:active{color:#000099;;}

.linktext{

font: 14px sans-serif;
text-indent:1em;
}
#rollover a:hover{color:#FFFFFF;}
.headmenu{
font: 12px sans-serif;
text-align:center;
padding:1%;
padding-left:20%;
}

h1{
font: 18px sans-serif;
color:#000099;
font-weight:bold;
}
.text{
font: 14px sans-serif;
color:#000099;
}
h3{
font: 16px sans-serif;
color:#000099;
font-weight:bold;
}
.tablehead{
font: 16px sans-serif;
color:#e6fafa;
font-weight:bold;
background-color:#000099;
}[/CODE]

Änder doch mal Dein Posting ab, benutz statt der [*html]-Tags die [*code]-Tags, dann kann man das besser lesen.

Aber was mir schon aufgefallen ist…ich sehe da Tabellen, die dem Layout dienen.
Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Endlich wieder on !

Auf Seite 10 Bandbreite ist nicht kostenlos ist noch ein fehler drin !

Geringere Dateigrößen bedeuten schnellere Ladezeiten und geringere Kosten f?r das Hosting.

Edit: Kennst du das Programm Lynx Efchen?

Bill hat den Artikel zu Seybold auf den Webserver gepackt. Ich weiß noch nicht, ob es da bleiben kann. Die Umlautprobleme resultieren wahrscheinlich daraus. Aber die bringen uns nicht um :slight_smile:

Kennst du das Programm Lynx Efchen?

Natürlich kenne ich Lynx, schon benutzt, wieso?

wohlmöglich, all zu viele umlaute existieren ja nicht in diesem artikel :stuck_out_tongue_winking_eye: (seite 11 scheint ebenfalls ein „f?r“ :slight_smile: )

Natürlich kenne ich Lynx, schon benutzt, wieso?
rein informativ, habe auch keine andere antwort erwartet. Allerdings muss ich nun die Frage stellen:

Tabellenlayout - wie wir wissen - ist Zweckentfremdung und CSS-Layout korrekt. In diesem Artikel steht „Suchmaschinenoptimierung durch CSS-Layout“. Wenn wir nun Lynx nutzen kann man unter anderem sehen, wie unsere Homepages von Google „gesehen“ werden (ohne grafiken, nur der schematische aufbau, …) und je nachdem wie der content aufgebaut ist und ausgefüllt ist wird auch die homepage dann bewertet.

Jetzt habe ich mal eine sehr große Seite welche, leider, in Tabellenlayout erstellt wurde da mir angeschaut über lynx und dennoch sieht alles sehr schematisch und übersichtlich aus. Wie kommts?

Edit: sollten wir einen extrathread dafür auf machen?

Ist ja eigentlich nicht ganz korrekt. Suchmaschinenoptimierung durch Trennung von Inhalt und Layout und semantisches HTML. Das wäre ganz korrekt.

Wenn wir nun Lynx nutzen kann man unter anderem sehen, wie unsere Homepages von Google „gesehen“ werden

Ich glaube nicht, dass man das vergleichen kann, denn Google „sieht“ ja nichts. Und ob Lynx jedem Tag ein bestimmtes anderes Aussehen verleiht, weiß ich offen gestanden nicht. Nichtsdestotrotz wird man am reinen Aussehen in Lynx nicht sehen, welches Tag dahinter steckt, und deswegen sehen wir in Lynx was anderes, als Google draus macht.

Jetzt habe ich mal eine sehr große Seite welche, leider, in Tabellenlayout erstellt wurde da mir angeschaut über lynx und dennoch sieht alles sehr schematisch und übersichtlich aus. Wie kommts?

Ich gestehe, ich weiß nicht, was Lynx aus Tabellenlayout macht. Vermutlich wird er das ähnlich darstellen wie grafische Browser, es also sinnvoll anordnen. Immerhin ist Lynx ein Browser, der etwas visualisieren soll und Spalten einer Tabelle gehören nunmal untereinander.

Was wieder ein Beweis dafür ist, dass Google mit Lynx nicht vergleichbar ist. Google sieht: Da kommen tabellarische Daten. Und wenn die Tabelle fürs Layout benutzt wird, ist das eine Fehlinformation.

Mal zurück zum Beispielcode @believe_me.

#content wird nicht gefloatet. Da können nachfolgende Elemente floaten wie sie wollen. #content erzeugt als Blockelement einen Zeilenumbruch.
Die Linke "Spalte wird also unter #content angezeigt.

Ein Beispiel (Zweispalter mit durchgehenden Spalten):

[code]

/* */


Zweispalter

Durchgehender Zweispalter mit background für body

box1
box2
[/code]Das background-image ist 2000px breit und hat auf der linken einen 240px breiten, eingefärbten bereich. Also 12% von 2000. Mit background-position wird die Grafik entsprechend ausgerichtet (faux columns). Das background-image füllt so den gesamten wievpoint. Der Kopfbereich überdeckt die Hintergrundgrafik mit einer eigenen background-color.

Zu height: 100%;
Floats können keine height: werte% vom Elternelement als Bezug verwenden. Warum das auch ohne floats nicht geht habe ich bereits beschrieben.

Es ist aber möglich die Floatenden Boxen in einem Element einzuschließen und Diesem height: 100% zu geben:

[code]
html, body {
margin: 0;
padding: 0;
height: 100%;
}

#kopfbereich {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8em;
background-color: #760000;
}

#boxen {
min-height: 100%;
background-image: url(images/bg2000-prozent12.png);
background-position: 12% 0%;
background-repeat: repeat-y;
background-color: #B0B0B0;
}

/kein min-height für IE6/

  • html #boxen {
    height: 100%;
    }

#boxen_innen {
padding-top: 8em;
}

#box1 {
float: left;
width:12%;
}

#box2 {
float: left;
width:87.9%;

}
[/code]Ob #kopfbereich im html vor oder nach #boxen notiert wird ist Wurst.
Er wird absolute vom wievpoint ausgerichtet.
Platz für den Kopfbereich schafft #boxen_innen mit padding-top.

Zum Layout:
width 11,5% ist meiner Meinung nach viel zu wenig.
Die gesamte Seite bräuchte ein sehr großes min-width um Formulare darin unterzubringen.
Außerdem sieht es wirklich nicht gut aus.

Der Vorschlag aus einem anderen Forum (Crosspost) arbeitet mit position: absolute für eine ganze Spalte.
Überlege selbst welchen Weg du gehen möchtest. Du hast nun drei Varianten zur Auswahl.