container "vergrößern"

[wolf360]

Okey erstmal zur Seite ---> Homepage

CSS-Datei:

* {
margin:0px;
padding:0px;
}

body
{
background-color:black;
}

#banner
{
position:absolute;
width:783px;
height:306px;
margin-top:0px;
margin-left:108px;
background-image: url(bilder/banner.gif);
}

#inhalt{
position:absolute;
width:554px;
height:571px;
margin-top:306px;
margin-left:337px;
background-image: url(bilder/inhalt.gif);
color:#999999;
overflow:auto;
}

#navigation
{
position:absolute;
text-align:center;
width:229px;
height:571px;
margin-top:306px;
margin-left:108px;
background-image: url(bilder/navigation.gif);
}

#footer{
position:absolute;
width:783px;
height:195px;
margin-top:877px;
margin-left:108px;
background-image: url(bilder/bottom.gif);
color:#999999;
}

#randrechts
{
position:absolute;
width:108px;
height:1172px;
margin-top:0px;
margin-left:891px;
background-image: url(bilder/blut_rechts.gif);
}

#randlinks
{
position:absolute;
width:108px;
height:1172px;
margin-top:0px;
margin-left:0px;
background-image: url(bilder/blut_links.gif);
}


#schrift{
font-size:22pt;
color:#999999;
}

#musik{
font-family:Lucida Calligrahpy;
color:#CCCCCC;
}

#unterseiten{
font-size:20pt;
color:#B2CCE5;
}

#unterseiten:hover{
text-decoration:underline;
}

#shoutbox{
width: 170px;
height: 200px;
overflow: auto;
}
#gaestebuch{
width: 500px;
height: 200px;
overflow: auto;
}

a:link {font-family:Lucida Calligrahpy; font-size:18pt; color:#FFFFFF; text-decoration:none }
a:visited {font-family:Lucida Calligrahpy; font-size:18pt; color:#FFFFFF; text-decoration:none }
a:hover {font-family:Lucida Calligrahpy; font-size:18pt; color:#FFFFFF; text-decoration:underline}

Okey folgendes Problem:

Wie man sieht is der Inhalt zu groß, deswegn hab, ich falls das passieren sollte, den overflow auf auto gesetzt. Nun würd ich aber gerne den Scrollbalken weg machn stattdessen soll die Seite einfach nach unten ausgedehnt werden.

Sobald ich aber den overflow:auto weglasse, dehnt sich die Seite zwar nach unten aus aber der footer, bleibt an seiner Position, was dann natürlich im Bild stört. Wie stell ich das an das der footer sich anpasst?

gruß wolf360

kann mir keiner helfen ?

 

[peterle]

RE: conatiner vergößern

Hallo Wolf der 360ste,mal ein paar grundlegende Dinge:- sortiere deine Elemente und auch die Attribute für die Elemente alphanumerisch, wenn dein CSS file größer wird findest du alles leichter und vermeidest doppelte Einträge, weil du an anderer Stelle schon mal eine Spezifikation erstellt hast (ich spreche aus eigenen schlechten Erfahrungen) - du bekommst bei doppelten Einträgen keine Fehlermeldung! ein kleiner Tipp: aus World Wide Web Consortium findest du einen css Validator der findet nicht alle, aber die wichtigsten Fehler.- Maßangaben (bei dir bisher in px) solltest wo immer möglich nicht (!) in px sondern in em machen. "px" Angaben sind absolut, "em" Angaben relativ. Relativ meint hier der Wert bezieht sich auf den Browser Standard und (!) die Einstellungen des Benutzers (bei MS IE Schriftgrad, bei anderen Browsern zoom).- Für die Positionierung solltest du vorwiegend "position:static" verwenden und nur dort wo es unbedingt nötig ist "fixed". Der Unterschied: bei static positioniert der Browser alle Elemente so, wie sie in deinem html Code vorkommen. Der Wert für display sollte auf block gesetzt sein und der Wert für float auf left oder right, oder wenn du den Browser zwingen willst in einer neuen "Zeile" zu starten dann auf none.Mit den Änderungen löst sich dein Problem wahrscheinlich von selbst.Der Wert für scroll sollte auf visible stehen, dann werden deine Elemente immer angezeigt. Besser ist es aber die Angaben für Größen auf auto zu setzen und den für scroll ebenfalls. Der Browser macht dann dein Element (block bzw. container) so groß wie es sein Inhalt erfordert und zeigt nur dannscroll Balken wenn es nicht anders geht.CheersPeterle

 

[koslowski]

Hi,

Zitat von Peterle:
"px" Angaben sind absolut, "em" Angaben relativ.

äh.., soweit ich weiß ist px auch eine relative Größe (Die Fachliteratur behauptet das jedenfalls) nur bezogen auf die Bildschirmauflösung.
em bezieht sich auf die Schriftgröße.

Deshalb ist die Schrift in px auch im IE nicht skalierbar, in % und em dagegen schon.

position:static; ist die default-Einstellung jedes Browsers, braucht man deshalb nicht angeben.

Das Problem der HP ist neben der fehlenden Doctype-Deklaration (damit wird dem Browser mitgeteilt um was für ein Dokument es sich handelt) und anderen Fehler, die man sich durch eine Validierung anzeigen lassen sollte, die Verwendung von position:absolute; .

Damit nimmt man das Element komplett aus dem Fluss des Dokumentes und die anderen Elemente tuen so als wäre es nicht da.

Man regelt am besten alles durch float/clear und die Abstände mit padding/margin.

Damit ist dann i.d.R. z.B. Höhenangaben für Boxen unnötig (außer um ihm evtl. Layout für den IE zu geben falls notwendig).

 

[Corvulus]

px Angaben sind absolut, daher muss man sich imemr überlegen, was man nun wo einsetzt.

Gruß Corvulus

 

[koslowski]

Hi,

Zitat von Corvulus:
px Angaben sind absolut, daher muss man sich imemr überlegen, was man nun wo einsetzt.

Ich will dir ja nicht zu nahe treten aber das ist erwiesermaßen Blödsinn.
Schau doch mal in ein Fachbuch:

Zitat von Peter Müller aus seinem Buch "Little Boxes":
Die Einheit px (Pixel):
Ein Pixel ist ein Bildpunkt und relativ zur Bildschirmauflösung:
Bei 800x600 gibt es 480000Pixel auf dem Monitor, bei 1024x768 sind es bereits 768432.
Da sich der Monitor nicht vergrößern kann, werden bei einer höheren Auflösung die Pixel kleiner.
Die Größe eines Pixels ist also relativ zu der verwendeten Bildschirmauflösung.

Alles klar jetzt?

Andere Fachbücher sagen das gleiche.

Die einzige Quelle die sich indifferent verhält ist selfhtml:

px steht für Pixel. Abhängig von der Pixeldichte des Ausgabegeräts, relativ also von Ausgabegerät zu Ausgabegerät, absolut dagegen auf ein und das selbe Ausgabegerät bezogen.

Ich nehme mal an du hast das daher.

So wie sie das schreiben trägt das höchstens zur Verwirrung der User bei.

Das kann man nämlich mit einer kleinen Frage leicht aushebeln:

Was ist denn, wenn ich an ein und dem selben Ausgabegerät die Bildschirmauflösung ändere??
Antwort: siehe Zitat oben!

Das kann doch jeder logisch denkende Mensch leicht nachvollziehen warum px eine relative Größe sein muss.

koslowski

 

[wolf360]

also ich komm mit dem float:left und so überhaupt nicht zurecht...-.-"

was genau muss ich etz ändern?

ich blick da gar nicht mehr durch =(

gruß wolf360

 

[wolf360]

so wie ich des etz verstandn hab, soll ich überall den Wert auf display:block; setzen und meine Margin-Anweisungen löschen, oder?

Beim Rand und der Nave muss ich noch zusätzlich float:left;, float:right; angeben oder?

Wenn ich das alles so änder, is meine Homepage sowas von durcheinander...-.-"

gruß wolf360

Edit: Okey habs etz zum Teil geschafft, des einzige Problem ist jetzt noch mit Mozilla... beim IE und Opera wird alles gut dargestellt, blso mit Mozilla sind noch Elemente verschoben...
weis einer wieso?

Mein Css-Code schaut nun so aus:

* {
margin : 0px;
padding : 0px;
}
body {
background-color : black;
}
#banner {
display : block;
width : 783px;
height : 306px;
background-image : url(bilder/banner.gif);
}
#inhalt {
display : block;
width : 554px;
height : 571px;
background-image : url(bilder/inhalt.gif);
color : #999999;
overflow : visible;
}
#navigation {
display : block;
float : left;
text-align : center;
width : 229px;
height : 571px;
background-image : url(bilder/navigation.gif);
}
#footer {
display : block;
width : 783px;
height : 195px;
background-image : url(bilder/bottom.gif);
color : #999999;
}
#randrechts {
display : block;
float : right;
width : 108px;
height : 1172px;
background-image : url(../bilder/blut_rechts.gif);
}
#randlinks {
display : block;
float : left;
width : 108px;
height : 1172px;
background-image : url(../bilder/blut_links.gif);
}
#schrift {
font-size : 22pt;
color : #999999;
}
#musik {
font-family : Lucida Calligrahpy;
color : #cccccc;
}
#unterseiten {
font-size : 20pt;
color : #b2cce5;
}
#unterseiten:hover {
text-decoration : underline;
}
#shoutbox {
width : 150px;
height : 200px;
overflow : auto;
}
#gaestebuch {
width : 500px;
height : 200px;
overflow : auto;
}
a:link {
font-family : Lucida Calligrahpy;
font-size : 18pt;
color : #ffffff;
text-decoration : none;
}
a:visited {
font-family : Lucida Calligrahpy;
font-size : 18pt;
color : #ffffff;
text-decoration : none;
}
a:hover {
font-family : Lucida Calligrahpy;
font-size : 18pt;
color : #ffffff;
text-decoration : underline;
}

 

[peterle]

Next try

Hallo Wolf,Opera arbeitet oft im Kompatibilitätsmodus zu MS IE, deshalb siehst du da keine Fehler.Was mir auf die Schnelle auffällt: einige deiner div Boxen enthalten keinen Inhalt.Boxen die keinen Inhalt enthalten, werden von einigen Browsern nicht dargestellt,auch wenn du sie noch so groß machst (in height/width). Du musst hier minestens ein " " oder eine Grafik mit einem Pixel Größe angeben.Die table definitions solltest du tauschen gegen div boxen, mit height/width auto oder noch besser in eine ungeordnete Liste

• ..

. Die Tabellenzeilen werden zu ..
.Auf die Schnelle zu hast eine Reihe von div boxen auf höchstem level:- Header- Navigation- Guestbook- Inhalt- Rechter RandPositioniere die einmal sauber. Dann mache dich an den Inhalt dieser boxen auf top level.Hab' jetzt nicht viel Zeit. Wenn ich dazu komme schicke ich dir am WoE mal einen Vorschlag.CheersPeterle

 

[wolf360]

Meinst du das mit dem Positinieren in der CSS-Datei oder auf der Seite ?

Ja die einzige div Box wo etzwas enthält ist der Inhalt und die Navi, den Banner und der Footer, bekommen ihr bild ja eben durch css ??? oder wie meinst des, da brauch ich dohc keine "" ??

und was meinst du damit:

Die table definitions solltest du tauschen gegen div boxen, mit height/width auto oder noch besser in eine ungeordnete Liste. Welche Table-defenitions?

und damit komm ich auch nicht zurecht:

Auf die Schnelle zu hast eine Reihe von div boxen auf höchstem level:- Header- Navigation- Guestbook- Inhalt- Rechter RandPositioniere die einmal sauber. Dann mache dich an den Inhalt dieser boxen auf top level.Hab' jetzt nicht viel Zeit. Wenn ich dazu komme schicke ich dir am WoE mal einen Vorschlag