Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

nostra87 · 01.10.2009

Ich habe auf die Schnelle mittels der Divs ein Grundgerüst,
welches zentriert ist, erstellt. Doch obwohl das Layout nicht
besonders hoch ist, erscheint ein Gesamtscrollbalken! Ich
achte besonders auf solche Kleinigkeiten. Ich benötige also
kein Scrollbalken !

Unter dem folgendem Link: (+Link)

kann man einen scrollbalken erkennen. Wie kommt dass,
das ein Scrollbalken erscheint, wo doch unten keine Inhalte
zu erkennen sind? Jede Box hat seine eig. Position und das
durch position:relative. Absolute hingegen wäre leider nicht
dynamisch genug, da beim verschrieben bzw. minimieren
des Browsers alles wirr umgestellt wird.

Frage: Wie kann ich mein GesamScrollbalken entfernen ?

HTML

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Joomla - Testseite - Offlinet</title>
<link href="css.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="zentriert">
<div id="balkenoben"></div>
<div id="balkenoben2"></div>
<div id="header"></div>
<div id="produktheader"></div>
<div id="content"></div>
<div id="balkenmitte"></div>
<div id="contentrechts"></div>
<div id="balkenunten"></div>
</div>
</body>
</html>

CSS

HTML:

/*-----------------------BODY---------------------------*/
body {
    background-image: url(Bilder/Unbenannt-1_01.jpg);
    background-repeat: repeat-x;
    text-align:center;
    margin-left: 0px;
    margin-top: 55px;
    margin-right: 0px;
    margin-bottom: 0px;}
    
/*---------------------Zentriert------------------------*/

#zentriert {
     width:753px;
     margin:0px auto;
     text-align:left;
     height:600px;}
     
     

/*--------------------Seitenaufbau----------------------*/

#balkenoben {
     width: 534px;
     height: 38px;
     position:relative;
     background:url(Bilder/balken_oben.jpg);}
     
#balkenoben2 {
     width: 211px;
     height: 38px;
     position:relative;
     top:-38px;
     left:540px;
     background:url(Bilder/balken_oben2.jpg);}
     
#header {
     width: 534px;
     height: 232px;
     position:relative;
     top:-31px;
     background:url(Bilder/header.jpg);}
     
     
#produktheader {
     width: 211px;
     height: 232px;
     position:relative;
     top:-263px;
     left:540px;
     background:url(Bilder/produkt_header.jpg);}
     
#content {
     width: 534px;
     height: 314px;
     position:relative;
     top:-255px;
     background:url(Bilder/content.jpg);}
     
#balkenmitte {
     width: 211px;
     height: 38px;
     position:relative;
     top:-570px;
     left:540px;
     background:url(Bilder/balken_mitte_klein.jpg);}
     
#contentrechts {
     width: 211px;
     height: 271px;
     position:relative;
     top:-564px;
     left:540px;
     background:url(Bilder/content_rechts.jpg);}
     
#balkenunten {
     width: 752px;
     height: 38px;
     position:relative;
     top:-557px;
     background:url(Bilder/balken_unten.jpg);}

Exulizer · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Dein Zentriert hat eine Höhe die du nicht brauchst. Setz es auf auto oder lass es ganz und gar weg

#zentriert {
width:753px;
margin:0px auto;
text-align:left;
height:auto;
}

nostra87 · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Dein Zentriert hat eine Höhe die du nicht brauchst. Setz es auf auto oder lass es ganz und gar weg

#zentriert {
width:753px;
margin:0px auto;
text-align:left;
height:auto;
}

Hallo @Exulizer

ich habe das "Height" ganz weggelassen, jedoch hat sich
nichts geändert.

Eigenartig.:uhm:

Exulizer · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Sogar Firebug sagt mir das dein #zentriert ne Höhe von 600px immernoch.

nostra87 · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Sogar Firebug sagt mir das dein #zentriert ne Höhe von 600px immernoch.

Hallo !

Ich habe das auf meiner Festplatte getestet und bisher noch
nicht hochgeladen. Weil es eben nicht funktioniert.

Was könnte es also doch sein ?

Exulizer · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Ich teste es gerade durch. Geduld geduld

nostra87 · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

^.^

Ich bin auch am tüfteln.

Exulizer · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Was ich rausgefunden habe, es liegt an deinen Positionen. Sie verdoppeln bei jedem Container um das Doppelte, so das du am Ende das doppelte von deinem Layout nach unten hin hast. Möglichkeit 1 du floatest, möglichkeit 2 du setzt negative Margins ein und schreib in Shorthand das ist übersichtlicher.

nostra87 · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Was ich rausgefunden habe, es liegt an deinen Positionen. Sie verdoppeln bei jedem Container um das Doppelte, so das du am Ende das doppelte von deinem Layout nach unten hin hast. Möglichkeit 1 du floatest, möglichkeit 2 du setzt negative Margins ein und schreib in Shorthand das ist übersichtlicher.

Wegn der nutzerfreundlichen Programmierung (shorthand), vielen
dank erstmal.

Habe ich auch schon festgestellt, dass es mit den Containern zu
tun hat. Von Position:relative - auf absolute, konnte ich das Problem
jetzt lösen.

die linke spalte in absolute und die rechte in relativ

Das mit dem Float kapiere ich nicht so ganz

Aber danke für deine Hilfe. Ich melde mich noch.

Exulizer · 01.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Ich hab mich rangesetzt und deinen Code etwas aufgemöbelt, mit dem Floats ist im Quellcode erklärt.

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Joomla - Testseite - Offlinet</title>
<link rel="stylesheet" media="screen" type="text/css" href="layout.css" />
</head>
<body>
<div id="main">
    <div id="balkenoben">(Float left enthalten) Container wird Links ausgerichtet</div>
         <div id="balkenoben2">(Float right enthalten) Container wird Rechts ausgerichtet</div>
             <div id="header">(Float left enthalten) Container wird Links ausgerichtet</div>
                <div id="produktheader">(Float right enthalten) Container wird Rechts ausgerichtet</div>
                    <div id="content">(Float left enthalten) Container wird Links ausgerichtet</div>
                <div id="balkenmitte">(Float right enthalten) Container wird Rechts ausgerichtet</div>
            <div id="contentrechts">(Float right enthalten) Container wird Rechts ausgerichtet</div>
        <div id="balkenunten">Kein Float dafür ein clear:both; damit wenn der Content länger wird alles nach unten rutscht</div>
</div>
</body>
</html>

HTML:

/*-----------------------BODY---------------------------*/
body {
    background: #555;
    /* background: url(Bilder/Unbenannt-1_01.jpg)repeat-x; Shorthand mein Background kann dann wieder raus genommen werden */
    text-align:center;
 }
/*---------------------Zentriert------------------------*/

#main {
     width:753px;
     background:    #888;
     margin:55px auto 0 auto;
     text-align:left;
}
/*--------------------Seitenaufbau----------------------*/

#balkenoben {
     width: 534px;
     height: 38px;
     float:        left;
     margin:0 0 5px 0;
     background:#666;
 }
#balkenoben2 {
     width: 211px;
     height: 38px;
     float:        right;
     background:#666;
 }
#header {
     width: 534px;
     height: 232px;
     background:#666;
     margin: 0 0 5px 0;
     float: left;
 }   
#produktheader {
     width: 211px;
     height: 232px;
     float: right;
     background:#666;
 }
     
#content {
     width: 534px;
     height: 314px;
     float:        left;
     margin: 0 0 5px 0;
     background:#666;
 }
     
#balkenmitte {
     width: 211px;
     height: 38px;
     float: right;
      margin: 0 0 5px 0;
     background:#666;
 }
     
#contentrechts {
     width: 211px;
     height: 271px;
    float: right;
     background:#666;}
     
#balkenunten {
     width: 100%;
     height: 38px;
     background:#666;
     clear: both;
 }

Viel Spaß beim anschauen und verstehen

nostra87 · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Ich hab mich rangesetzt und deinen Code etwas aufgemöbelt, mit dem Floats ist im Quellcode erklärt.

Viel Spaß beim anschauen und verstehen

Hallo Exulizer,

danke für deine Bemühungen! Ich habe mir das jetzt angeguckt..
Ein Float ist aber nicht zwingend notwendig, oder ? Ich lade jetzt
gleich meine Version hoch.

Exulizer · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Es gibt viele Wege nach Rom und dies ist einer davon

nostra87 · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Es gibt viele Wege nach Rom und dies ist einer davon

:lol: Genau ! Haste Recht. Danke

Tolles Forum, wirklich. Und solche netten Leute wie du gibt
es wirklich selten.

Hier nochmal die überarbeitete Version inkl. Navigation.

(+Link)

nostra87

Exulizer · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Na siehste geht doch und mein Beispiel kannst du dir nehmen wenn du was floaten musst

nostra87 · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Na siehste geht doch und mein Beispiel kannst du dir nehmen wenn du was floaten musst

Vielleicht muss ich tatsächlich floaten :mad:

. Willkommen in der DIV Welt.
Sobald ich weitere Divs einfüge, verschieben sich die Container. Das
ist natürlich schade. Na klasse.

*g*

Edit: Mittels dem Float scheint alles wunderbar zu funktionieren.
Float:left;

und alles läuft wie geschmiert !

nostra87 · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

@

Warum gibt's denn immer einen Haken dabei ? Hm ?
Funktioniert einwandfrei, nur dass der Internet Explorer
das nicht wiedergeben will, was ich gerne haben möchte,
im Gegensatz zum FireFox.

Muss ich jedem Container etwa ein margin:0px geben ? :mad:

Link: www.gacnet.de/div http://www.gacnet.de

Exulizer · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Versuche das
* {
margin: 0px;
padding: 0px;
}
Das gibt dann für alle Container die werden damit resetet

edit: das wird nicht wirklich helfen mit meiner Methode ist dir da sicherlich besser geholfen, manchmal kommt man nicht übers floaten
Link zum FLOAT

nostra87 · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Exulizer schrieb:
Versuche das
* {
margin: 0px;
padding: 0px;
}
Das gibt dann für alle Container die werden damit resetet

Du meinst, wenn ich das in meine Stylsheet Datei einfüge,
gilt das sozusagen für alle Container ? Oder soll ich das einzeln
für jeden Container einfügen ?

Habe das in die CSS Datei eingefügt. Jedoch keine Reaktion.

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

Bin ich ja mal gespannt, wie das in OPERA aussehn wird. *g*

Edit: Erst, als ich 2 weitere Divs einfügte (produkte & news)
enstanden große Verschiebungen auch im Firefox. Durch einen
float:left, konnte ich alles beheben. Nur der IE gibt allerdings
den oberen Teil, etwas falsch dar.

Exulizer · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Meine Version macht keine Zicken hehe

nostra87 · 02.10.2009

AW: Position:relative - scrollbalken ? Kein (Gesamt)Scrollbalken!

Du meinst jetzt deine Opera Version ?

Oder wie soll ich das verstehen?
Edit: Ja habe jetzt deinen edetierten Beitrag gesehen. Ich tüftel einfach
mal weiter.