Beiträge von Philipp Waldinger

Philipp Waldinger

Hi,

erstmal vielen Dank für deine Antwort
leider konnte ich alleine durch deinen Tipp das Problem nicht lösen.

Ich habe aber nach langer Websuche einen Tread zu meinem Thema gefunden:
http://www.ayom.com/topic-16647.html#entry107301

Dort habe ich einen Lösungsansatz für mein Problem gefunden, und nun funktioniert es perfekt (es wird horizontal/vertikal zentriert und das Scrollen funktioiniert!) !!

Das Ganze sieht jetzt so aus:

HTML

<!DOCTYPE
 
 
 html>


 
<head>


 
<meta
 
 
 
 http-equiv="Content-Type" content="text/html" charset="utf-8"/>


 
<title><<<<<Test>>>>>></title>


 
<link
 
 
 
 rel="shortcut icon" href="favicon/BETA (1).ico" type="image/x-icon" />


 
</head>




 
<body>


 
<link
 
 
 
 href="CSS/index.css" rel="stylesheet" type="text/css">




 
<div
 
 
 
 id="distance_top"></div>




 
<div
 
 
 
 id="content_gesamt">




 

 
 
 
<div id="head"></div>


 

 
 
 
    <div id="content_fix">


 



 

 
 
<div class="side"></div>


 

 
 
 



 

 
 
<div id="content"></div>


 





 

 
 
 
    <div class="side"></div>


 

 
 
 
<div id="foot">    </div>


 



 

 
 
 
</div>




 
</div>




 
</body>


 
</html>

Alles anzeigen

HTML

/*##############EBENE0###############*/


 
HTML
 
 
 
, BODY {


 

 
 
margin: 0;


 

 
 
padding: 0;


 

 
 
height: 100%;


 

 
 
background-color: #0000FF;


 
}


 
/*###################################*/




 
/*##############EBENE1###############*/


 
#distance_top
 
 
 
{


 

 
 
height: 50%;


 

 
 
width: 10px;


 

 
 
margin-top: -375px;


 

 
 
background-color:#0000FF;


 

 
 
float: left;


 
}




 
#content_gesamt
 
 
 
 {


 

 
 
margin: 0 auto;


 

 
 
width: 1000px;


 

 
 
height: 750px;


 

 
 
background-color: #3300cc;


 

 
 
clear: left;


 
}


 
/*###################################*/




 
/*##############EBENE2###############*/


 
#head
 
 
 
 {


 

 
 
width: 1000px;


 

 
 
height: 150px;


 

 
 
background-color: #FF3E96;


 

 
 
overflow: hidden;


 
}




 
#content_fix
 
 
 
 {


 

 
 
width: 1000px;


 

 
 
height: 600px;


 
}


 
/*###################################*/




 
/*##############EBENE3###############*/


 
#foot
 
 
 
 {


 

 
 
clear: both;


 

 
 
width: 1000px;


 

 
 
height: 15px;


 

 
 
background-color: #008B00;


 
}




 
.
 
 
 
 
side {


 

 
 
width: 22px;


 

 
 
height: 600px;


 

 
 
background-color: #9932CC;


 

 
 
float: left;


 

 
 
overflow: hidden;


 
}




 
#content
 
 
 
 {


 

 
 
width: 956px;


 

 
 
margin: 0 auto;


 

 
 
height: 600px;


 

 
 
float: left;


 

 
 
background-color: #696969;


 
}


 
/*###################################*/

Alles anzeigen

Es hat mich aber doch gewundert, dass es im Web nicht viel mehr zum von mir gewünschten Design gibt - sollte das doch eigentlich ein recht verbreitetes und gängiges sein...
Naja, hauptsache es geht jetzt - und vielleicht hilft meine Lösung ja auch noch manch Anderem weiter!

Viele Grüße!
Philipp

Philipp Waldinger

Hallo,

ich habe das Problem, dass folgende Seite (siehe Screenshoot 1) bei großen Auslösungen zwar bestens funktioniert (der blaue Rand verteilt sich sowohl oben und unten als auch links und rechts gleichmäßig um den Inhalt), bei kleineren Auflösungen/eingeschalteter Zoomfunktion des Browsers (wenn man um den gesamten Inhalt sehen zu können scrollen muss) der Scrollbalken es jedoch nicht zulässt, nach ganz links und ganz nach oben zu scrollen (in den gängien Browsern IE9/Firefof/Aurora 7.0a2/Chrome 12.0.742.122).

Etwas schwer zu erklären, deshalb ein paar Screenshoots :

optimale Darstellung bei großer Auflösung (alle Screenshoots sind von mir - besonders links - ein bisschen zugeschnitten worden):
[Blockierte Grafik: http://s7.directupload.net/images/110804/temp/de9v4p7b.jpg]

Ruft man die Webseite nun mit einer kleineren Auflösung auf oder verwendet wie ich hier die browserinterne Zoomfunktion, so ergibt sich folgendes Problem:
[Blockierte Grafik: http://s7.directupload.net/images/110804/temp/3ly9bkbi.jpg]
=> obwohl ein Teil des Rosa-Bereichs abgeschnitten ist, lässt der Scrollbalken es nicht zu, nach oben (bzw. bei einer höheren Zoomstufe nach links) zu schrollen !

nach unten hingegen kann man wie gewünscht problemlos zoomen:
[Blockierte Grafik: http://s7.directupload.net/images/110804/temp/f9f9eqxs.jpg]

Das Problem ist also, dass links (etwa die Breite des Lila-Bereichs) und oben (die Hälfte des Rosa-bereichs) abgeschnitten sind

Ich hoffe, irgendjemand kann mir helfen, denn dieses problem bewegt mich nun schon eine Woche lang und ich bin am Verzweifeln
Ich hab schon so viel probiert...

Die HTML-Datei:

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><<<<<Test>>>>>></title>




<link
 rel="shortcut icon" href="favicon/BETA (1).ico" type="image/x-icon" />




</head>




<body>


<link
 href="CSS/index.css" rel="stylesheet" type="text/css">




<div
 id="content_gesamt">




    
<div id="head">


    
</div>




   
    <div id="content_fix">




    
    <div class="sidebar1"></div>


    
    <div class="content"></div>


    
    <div class="sidebar2"></div>


        
<div id="foot">    </div>




    
</div>




</div>




　


<div
 class="rand_rel"></div>


<div
 class="rand_rel"></div>




</body>


</html>

Alles anzeigen

...und die zugehörigen CSS-Definitionen (ich habe in der letzten Woche so unendlich viel darin ausprobiert/verändert, sodass jetzt allerlei Zeug drinsteht, welches ich anfangs vielleicht weggelassen hätte und was unnötig ist):

HTML

@charset
 "utf-8";




/*###################################*/


/*##############EBENE0###############*/


/*###################################*/




HTML,
 BODY {


    
margin: 0;


    
padding: 0;


    
height: 100%;


    
/*++++++FARBE++++++*/


    
background-color: #3300cc;


    
/*++++++FARBE++++++*/


}




/*###################################*/


/*##############EBENE1###############*/


/*###################################*/




.
rand_rel {


    
float: left;


    
/*++++++FARBE++++++*/


    
background-color: #3300cc;


    
/*++++++FARBE++++++*/


    
width: 50%;


    
min-height: 100%;


    
height: auto;


}




*
 html .rand_rel {


    
height: 100%;


}




#content_gesamt
 {


    
margin: 0 auto;


    
left: 50%;


    
top: 50%;


    
right: 50%;


    
bottom: 50%;


    
margin-left: -500px;


    
margin-top: -375px;


    
width: 1000px;


    
height: 750px;


    
position: absolute;


    
background-color: #3300cc;


    
float: left;


}




*
 html #content_gesamt {


    
height: 100%;


}




/*###################################*/


/*##############EBENE2###############*/


/*###################################*/




#head
 {


    
width: 1000px;


    
height: 150px;


    
background-color: #FF3E96;


    
position: fixed;


}




　


#content_fix
 {


    
width: 1000px;


    
height: 600px;


    
position: absolute;


    
margin-top: 150px;


    
margin-bottom: 15px;


}




　


　


/*###################################*/


/*##############EBENE3###############*/


/*###################################*/




#foot
 {


    
clear: both;


    
width: 1000px;


    
height: 15px;


    
background-color: #008B00;


    
position: absolute;


    
bottom: 0pt;


}




.
sidebar1 {


    
width: 22px;


    
height: 600px;


    
background-color: #9932CC;


    
float: left;


    
overflow: hidden;


    
position: relative;


}




.
sidebar2 {


    
width: 22px;


    
height: 600px;


    
background-color: #9932CC;


    
float: left;


    
overflow: hidden;


    
position: relative;


}




.
content {


    
width: 956px;


    
margin: 0 auto;


    
height: 600px;


    
float: left;


    
/*++++++FARBE++++++*/


    
background-color: #696969;


    
/*++++++FARBE++++++*/


    
position: relative;


}

Alles anzeigen

Ich bin für jedne Tipp dankbar

Viele Grüße
Philipp

Beiträge von Philipp Waldinger

[HTML/CSS|PROBLEM]Scrollen bei vielen Divs

[HTML/CSS|PROBLEM]Scrollen bei vielen Divs