style.css Übersicht verloren

hohorstmann · Beitrag von **hohorstmann** » Di 31. Okt 2006, 16:07

Hallo,

da möchte mir doch sicher jemand helfen:
Wobei habe ich die Übersicht verloren?

Auf der Website http://www.ickern-aktuell.de/cms habe ich den Teaser(rechts), also den rechten Bildschirmbereich im style.css mit imagecolumn über "left=805px" eingestellt und erst jetzt bemerkt, dass das wohl Murks war. Bei einer Auflösung von 1024x768 ist alles easy aber bei anderen Auflösungen "wandert" der rechte Bereich nach "innen" oder nach "außen".

Nach verschiedenen Versuchen habe ich "grüne Augen". Was sehe ich nicht?

Übrigens habe ich mir einmal hilfsweise eine Bereichseinteilung erstellt, aber zweifle nun, ob diese so ganz richtig ist. Hier ist sie - vielleicht kann die korrigierte dann einem Newbie etws helfen.

http://www.ickern-aktuell.de/cms/upload ... eilung.pdf

Gruß, Ho

und hier mein style.css:

Code: Alles auswählen

html, body { height:100%; }

body {
	padding:0px;
	margin:0;
	text-align:center;
	min-width:952px;
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	overflow-x:hidden;
	overflow:-moz-scrollbars-vertical;
}

td {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(21,153,60);
	margin-bottom:8px;
}

.input {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	width:240px;
	margin-bottom:8px;
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
}

.label {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
}

.small {
	font-size:10px;
}

#outer{ 
	position:relative; 
	margin:auto;
	background-color:#ffffff;
	/* background-image:url('../images/background.jpg'); */
	/* background-repeat:repeat-y; */
	border-top:1px solid rgb(170,170,170);
	border-right:1px solid rgb(170,170,170);
	border-bottom:1px solid rgb(170,170,170);
	border-left:1px solid rgb(170,170,170);
	height:100%;
	min-height:80%; 
	width:952px; 
	color:#000000; 
	text-align:left; 
}


#hauptdiv{ 
	 width:952px; 
	 margin: 0px auto; 
	 text-align: left;
	 height:100%;   
	 min-height:100%; 
}
 
html>body #outer{ height:auto; } 

#innerwrap {
	float:left;
	width:780px;
    background-color:#ffffff;
}

#header {
	position:absolute;
	top:0;
	left:0px;
	width:952px;
	height:10px;
	color:#000000;
	/*background-color:#ffffff;*/
	background:url("../images/background.jpg");
	background-repeat:inherit;
	background-position:0px 0px;
    z-index:5;
}

#left {
	position:relative;
	width:180px;
	float:left;
	padding-top:120px;
	padding-bottom:10px;
}

#left p { padding-left:3px;padding-right:2px; }

#right p { padding-left:4px;padding-right:2px }

#imagecolumn {
	margin-top:0px;
	position:absolute;
	top:20px;
    left:805px;
	width:148px;
	height:550px;
	z-index:10;
	padding-top:112px;
	padding-left:10px;
	padding-right:10px;
	color:rgb(21,153,60);
}

#imagecolumn a {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(190,190,190);
	margin:0;
}

#imagecolumn h1 {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(204,0,51);
	margin:0;
}

#right {
	position:relative;
	width:170px;
	float:right;
	margin-top:10px;
	padding-top:170px;
	padding-bottom:20px;
	background-color:#999999;
	background:url('../images/randbg.jpg');
	background-position:0px 0px;
	background-repeat:no-repeat;
	color:rgb(21,153,60);
}

div,p  { margin-top:0; }

#centrecontent {
	width:590px;
	float:right;
	padding-left:0px;
    background-color:#ffffff;
	padding-right:0px;
	padding-top:120px;
	padding-bottom:10px;
	color:rgb(21,153,60);
}

#centrecontent p { padding-left:3px:color:rgb(21,153,60); }

#clearfooter { width:100%;height:52px;clear:both; }

#bottomnavi {
	text-align:center;
	color:rgb(210,210,210);
}

#additionalnavi {
    float:right;
	background-color:#ffffff;
/*  background:url("../images/background.jpg"); */
	margin-top:3px;
	padding-bottom:2px;
	padding-top:2px;
    padding-left:0px
	margin-left:10px;
	text-align:center;
	width:400px;
	color:rgb(160,160,160);
}

#logo {
	width:950px;
	margin-top:18px;
}

#navipath {
	padding:0;
	padding-bottom:0px;
	background-color:#ffffff;
	color:rgb(99,99,99);
	width:388px;
}

.navi{
	width:180px;
/*	border-bottom:1px solid rgb(170,170,170);
	background-color:rgb(255,255,255);*/
    border-right:1px solid rgb(170,170,170);

}

h1 {
	padding-left:2px;
	font-weight:bold;
	font-size:13px;
	color:rgb(0,146,67);
	margin:0;
}

h1.content {
	margin-bottom:12px;
	padding:0;
}

hr { color:rgb(210,210,210); }

a { font-size:11px; color:rgb(204,0,51); text-decoration:none; }
a:hover { text-decoration:underline; }

a.newsheadline { font-weight:bold; } 

a.bottomnavi { color:rgb(160,160,160); font-size:10px; } 

a.additionalnavi { font-size:10px; color: rgb(160,160,160); }

a.navipath { font-size:10px; color: rgb(160,160,160); } 

a.navileft_passive {
	display:block;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(10,162,51);
} 

a.navileft_active {
	display:block;
	background-color:#ffffff;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(10,162,51);
} 

a.navileft_open {
	padding-left:10px;
	display:block;
	background:url("../images/navi_pfeil.gif") no-repeat;
	background-position:right;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(10,162,51);
} 

a.sitemap_level1 {
	display:block;
	border-bottom:1px solid #b4a8b4;
	color:rgb(204,0,51);
	font-weight:normal;
	padding-bottom:.4em;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
}

a.sitemap_level2 {
	color:rgb(21,153,60);
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:170px 4px;
	display:block;
}

a.sitemap_level3 {
	color:rgb(190,190,190);
}

.sitemap_level2_container {
	float:left;
	width:50%;
	padding-top:.3em;
}

.sitemap_level3_container {
	float:right;
	width:50%;
	padding-top:.3em;
}

.input_searchbox {
	width:65px;
	vertical-align:middle;
	font-size:11px;
	color: rgb(21,153,60);
}

.input_newsletterselect {
	width:80px;
	vertical-align:middle;
	font-size:11px;
	margin-right: 8px;
	color: rgb(21,153,60);
}

.label_searchbox {
	vertical-align:middle;
	color:#9d9ea2;
	position:relative;
	padding-left:10px;
	/*left:-65px;*/
}

#loginbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	border-right:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#searchbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	border-right:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#newsletterbox {
	 background-color:#DFE0E5;
	 border-top:1px solid #aeaeae;
	 border-bottom:1px solid #aeaeae;
	 border-right:1px solid #aeaeae;
	 padding-bottom:.6em;
	 padding-top:.6em;
	 padding-left:.5em;
	 padding-right:.5em;
	 margin-top:1.5em;
	 margin-bottom:1.5em;
}

.hidden {
	display:none;
}

.balken {
	padding-left:0px;
/*	background-color:rgb(255,110,43);
	background-image:url('../images/bg2.gif');
	background-repeat: repeat-x,repeat-y;
	background-position:2px 0px ; */
}

.teaser_img {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
	text-decoration:none;
         outline:none;
	outline-color:#FFFFFF;  
}

simu · Beitrag von **simu** » Di 31. Okt 2006, 18:37

das liegt daran, dass der Rest der Seite via margin:auto zentriert ist und sich somit an der Fenster-Breite orientiert und deine spalte absolut positioniert ist und sich somit an der rechten oberen Ecke des nächst höheren absolut positionierten Element orientiert (in deinem Fall ist dies das Fenster selber). Somit ist die Spalte immer diese absolute 805px vom linken Fenster-Rand entfernt.

Eine Lösung wäre dein Hauptdiv absolute zu positionieren und so zu zentrieren oder das ganze mit floats zu lösen, was eleganter wäre.

Für die erste Lösung musst du nur dein css des hauptdivs zu folgendem ändern:

Code: Alles auswählen

#hauptdiv{ 
	 width:952px;
	 position:absolute;
	 left:50%;
	 margin-left:-476px; 
	 text-align: left;
	 height:100%;   
	 min-height:100%; 
}

und dann evtl noch die linke position der spalte etwas anpassen, so auf in etwa 784px...

hohorstmann · Beitrag von **hohorstmann** » Di 31. Okt 2006, 23:38

Danke simu, Du hast das Problem gelöst.
Jetzt sehe ich zwar bei 800x600 den linken Navigationsbereich nur zu 25% und kann diesen auch per scrollbar nicht erreichen, aber wer nutzt diese Auflösung schon.

Alle anderen Auflösungen laufen einwandfrei.

Gruß, Ho