CSS Layout raubt mir den Schlaf

bongartz

Mitglied
Hi,

ich versuche schon fast seit einer Woche dieses Layout : http://luxusuhrenshop.eu/shop/ hin zubekommen.

CSS code

Code:
#rahmen { 
   top: 0; 
   width: 930px; 
   height: auto; 
   position:absolute; 
   left:50%; 
   margin-left:-465px; 
   border: 1px solid #000; 
   background-color: #3b54fb; 
} 

#logo { 
   background-color: #80f641; 
   width: 250px; 
   height: 125px; 
   margin-left: 25px; 
   margin-right: 25px; 
} 

#navi { 
   width: 250px; 
   margin-left: -285px; 
   background-color: #f4fd58; 
   height: 40px; 
   position: relative; 
   top: 0; 
   margin-top: 50px; 
} 

#navisub { 
   margin-top: 5px; 
   width: 250px; 
   margin-left: -285px; 
   background-color: #d4485b; 
   height: 300px; 
   position: relative; 
   top: 0; 
} 

#suche { 
   margin-top: 50px; 
   width: 250px; 
   margin-left: -285px; 
   background-color: #90f627; 
   height: 150px; 
   margin-bottom: 50px; 
   position: relative; 
   top: 0; 
} 

#login { 
   background-color: #d33b4e; 
   width: 250px; 
   height: 125px; 
   top: 0; 
   position: absolute; 
   margin-left: 680px; 
} 

#zusatz { 
   width: 380px; 
   height: 125px; 
   margin-left: 300px; 
   background-color: #ca36fc; 
   top: 0; 
   position: absolute; 
} 

#mitte { 
   width: 610px; 
   padding: 10px; 
   top: 0; 
   margin-top: 0; 
   margin-left: 300px; 
   background-color: #fff; 
   height: auto; 
   position: relative; 
} 

#inhalt { 
   width: 605px; 
   background-color: #d85f8d; 
   margin-top: -640px;  
   margin-bottom: 20px; 
   height: auto;
} 
#footer { 
   width: auto; 
   height: auto; 
   background-color: #9125fb; 
   padding: 5px; 
   clear: both; 
} 


#footer a { 
   text-align: left; 
   border-right: 1px solid #1b0dfa; 
   padding-right: 5px; 
   opacity: 1; 
   padding-left: 5px; 
}

und hier der html code ohne body und header

Code:
<div id="rahmen">
	        <div id="logo"></div>
            <div id="mitte">
                <div id="navi"></div>
                <div id="navisub">{box  name=categories}</div>
                <div id="suche">{box name=search}</div> 
                <div id="inhalt">
                    <div>
                    {if $show_index_boxes == 'true'}<div id="content">{else}<div id="contentfull">{/if}
                    {$content}</div>
                </div>
            </div>
  </div>
            
            <div id="login">
            		<ul id="logintext">
                    <li><a href="{link page='cart'}">{txt key=TEXT_CART}</a></li>
                    {if $account == true}
                    <li><a href="{link page='customer' conn=SSL}">{txt key=TEXT_ACCOUNT}</a></li>
                    {/if}
                    <li><a href="{link page='checkout' paction='shipping' conn=SSL}">{txt key=TEXT_CHECKOUT}</a></li>
                    {if $account == true}
                    {if $registered_customer}
                    <li><a href="{link page='customer' paction='logoff' conn=SSL}">{txt key=TEXT_LOGOFF}</a></li>
                    {else}
                    <li><a href="{link page='customer' paction='login' conn=SSL}">{txt key=TEXT_LOGIN}</a></li>
                    {/if}
                    {/if}        
                	</ul>
			
            
          <div id="warenkorb">{box name=cart}</div>
          </div>
  <div id="zusatz"></div> 
          
            <div id="footer"><p class="footer">
                {content block_id=6}
                {if $_content_6|count > 0}
                {foreach name=aussen item=box_data from=$_content_6}
                <a href="{$box_data.link}">{$box_data.title}</a>
                {/foreach}
                {/if}
                </p>
                [<copyright>]
                </div>
                {hook key=index_footer_tpl}
                {banner bg=banner}
                </div>
            </div>
</div>

ich brauche dringen eure Hilfe. ich komm da mit einfach nicht klar.

DANKE
 
Moin,

dir kommt da die absolute Positionierung der beiden inneren DIV-Boxen #login u. #zusatz in die Quere, womit sie aus dem normalen Textfluß genommen werden, und in allen Browsern (außer IE6 + 7) dazu führt, dass sich die Mutterbox #rahmen nicht nach unten vergrößert, wie es an der linken Box #suche zu erkennen ist, die den Footerbereich überlappt.

mfg Maik
 
Moin,

dir kommt da die absolute Positionierung der beiden inneren DIV-Boxen #login u. #zusatz in die Quere, womit sie aus dem normalen Textfluß genommen werden, und in allen Browsern (außer IE6 + 7) dazu führt, dass sich die Mutterbox #rahmen nicht nach unten vergrößert, wie es an der linken Box #suche zu erkennen ist, die den Footerbereich überlappt.

mfg Maik

hi,

danke für die schnelle antwort. wenn ich "login" auf relativ setzt passiert nur das der "login" was tiefer sitzt, aber sonst ändert sich nichts an meiner seite.


das ist doch zum verrückt werden. was mich dazu auch noch start verwundert sit, wenn ich die höhe von "inhalt auf eine fixe größe setzte. passt sich alles perfekt an. Nur wenn ich versuche die höhe von "inhalt" automatisch anzupassen zerschießt sich alles.
 
Bei mir bringt das Entfernen der absoluten Positionierungen insoweit sehr viel, als dass die Mutterbox #rahmen nun bei zunehmenden Inhalt auch "mitwächst", und der Footerbereich nach unten verschoben wird.

Ach, und vernachlässige in deinen Folgebeiträgen bitte nicht die Netiquette bzgl. der gewünschten Groß- und Kleinschreibung - vielen Dank! :)

mfg Maik
 
Ja ich glaube auch das es mehr an dem Inhalt liegt. Wenn du einen Mach benutzt kannst du dir die Demo von CSSedit runter laden. Mit diesem Programm kannst du dir wunderschön Veränderungen anschauen, auch bei Seiten die inbetrieb sind. Und hier wirst du sehen das es mit dem Content aus dem Showsystem zu extremen Problem kommt. Ih lade dir eben mal die geänderte Datei au den Server hoch.
 
Einen Mac(h)-PC hab ich nicht :)

Abgesehen von der falschen Positionierung der beiden Boxen kann ich ansonsten keine extremen Darstellungsprobleme ausmachen:

vorher.jpg nachher.jpg
v.l.n.r.: vorher, nachher

Wieso bindest du die beiden Boxen im HTML-Code nicht an der Stelle ein, wo sie in der Seite erscheinen sollen, und nimmst sie dort stattdessen mit Hilfe der float-Eigenschaft aus dem normalen Textfluß?

mfg Maik
 
Einen Mac(h)-PC hab ich nicht :)

Abgesehen von der falschen Positionierung der beiden Boxen kann ich ansonsten keine extremen Darstellungsprobleme ausmachen:

Anhang anzeigen 47467 Anhang anzeigen 47468
v.l.n.r.: vorher, nachher

Wieso bindest du die beiden Boxen im HTML-Code nicht an der Stelle ein, wo sie in der Seite erscheinen sollen, und nimmst sie dort stattdessen mit der float-Eigenschaft aus dem normalen Textfluß?

mfg Maik

Öhm wie meinst du? so ganz kann ich dir gerade nicht folgen. Muss ja wirklich zu geben das ich von CSS jetzt nicht so dir riesige Ahnung habe. Ich teste mit dem Safari da sieht das alles wieder ganz anders auch. Bei apple kannst du dir den runterladen wenn du magst.
 
Safari gibt's auch für Windows, und den hab ich schon eine ganze Weile an Bord :)

safari_win.jpg

In ihm wird die Seite in der Tat trotz dem Aufheben der absoluten Positionierungen verheerender dargestellt, als z.B. in Firefox.

Derzeit hast du die Boxen im HTML-Code vor dem Footer notiert, obwohl sie eigentlich oben rechts neben dem Logo erscheinen sollen.

Ergo, würde ich sie im HTML-Code auch dort aufrufen, und mit Hilfe der float-Eigenschaft neben dem Logo ausrichten.

mfg Maik
 
Safari gibt's auch für Windows, und den hab ich schon eine ganze Weile an Bord :)

Anhang anzeigen 47469

In ihm wird die Seite in der Tat trotz dem Aufheben der absoluten Positionierungen verheerender dargestellt, als z.B. in Firefox.

Derzeit hast du die Boxen im HTML-Code vor dem Footer notiert, obwohl sie eigentlich oben rechts neben dem Logo erscheinen sollen.

Ergo, würde ich sie im HTML-Code auch dort aufrufen, und mit Hilfe der float-Eigenschaft neben dem Logo ausrichten.

mfg Maik

Habe es so gemacht wie du gesagt hast aber dann wird es noch schlimmer.

Untitled.jpg

hier jetzt mein CSS

Code:
#rahmen {
	top: 0;
	width: 930px;
	height: auto;
	position: absolute;
	left: 50%;
	margin-left: -465px;
	border: 1px solid #000;
	background-color: #3b54fb;
}

#logo {
	background-color: #80f641;
	width: 250px;
	height: 125px;
	margin-left: 25px;
	margin-right: 25px;
}

#zusatz {
	width: 380px;
	height: 125px;
	background-color: #ca36fc;
	float: left;
}

#login {
	background-color: #d33b4e;
	width: 250px;
	height: 125px;
	float: left;
}


#navi {
	width: 250px;
	margin-left: -285px;
	background-color: #f4fd58;
	height: 40px;
	position: relative;
	top: 0;
	margin-top: 50px;
}

#navisub {
	margin-top: 5px;
	width: 250px;
	margin-left: -285px;
	background-color: #d4485b;
	height: 300px;
	position: relative;
	top: 0;
}

#suche {
	margin-top: 50px;
	width: 250px;
	margin-left: -285px;
	background-color: #90f627;
	height: 150px;
	margin-bottom: 50px;
	position: relative;
	top: 0;
}

#mitte {
	width: 610px;
	padding: 10px;
	top: 0;
	margin-top: 0;
	margin-left: 300px;
	background-color: #fff;
	height: auto;
	position: relative;
}

#inhalt {
	width: 605px;
	background-color: #d85f8d;
	margin-top: -640px;
	margin-bottom: 20px;
	height: auto;
}

#footer {
	width: auto;
	height: auto;
	background-color: #9125fb;
	padding: 5px;
	clear: both;
}

#footer a {
	text-align: left;
	border-right: 1px solid #1b0dfa;
	padding-right: 5px;
	opacity: 1;
	padding-left: 5px;
}

und mein html

Code:
<div id="rahmen">
	        <div id="logo"></div>
                        <div id="login">
            		<ul id="logintext">
                    <li><a href="{link page='cart'}">{txt key=TEXT_CART}</a></li>
                    {if $account == true}
                    <li><a href="{link page='customer' conn=SSL}">{txt key=TEXT_ACCOUNT}</a></li>
                    {/if}
                    <li><a href="{link page='checkout' paction='shipping' conn=SSL}">{txt key=TEXT_CHECKOUT}</a></li>
                    {if $account == true}
                    {if $registered_customer}
                    <li><a href="{link page='customer' paction='logoff' conn=SSL}">{txt key=TEXT_LOGOFF}</a></li>
                    {else}
                    <li><a href="{link page='customer' paction='login' conn=SSL}">{txt key=TEXT_LOGIN}</a></li>
                    {/if}
                    {/if}        
                	</ul>
			
            
          <div id="warenkorb">{box name=cart}</div>
          </div>
  <div id="zusatz"></div> 
  
            <div id="mitte">
                <div id="navi"></div>
                <div id="navisub">{box  name=categories}</div>
                <div id="suche">{box name=search}</div> 
                <div id="inhalt">
                    <div>
                    {if $show_index_boxes == 'true'}<div id="content">{else}<div id="contentfull">{/if}
                    {$content}</div>
                </div>
            </div>
  </div>
            

          
            <div id="footer"><p class="footer">
                {content block_id=6}
                {if $_content_6|count > 0}
                {foreach name=aussen item=box_data from=$_content_6}
                <a href="{$box_data.link}">{$box_data.title}</a>
                {/foreach}
                {/if}
                </p>
                [<copyright>]
                </div>
                {hook key=index_footer_tpl}
                {banner bg=banner}
                </div>
            </div>
</div>
 
Das Floaten mußt du schon mit der Box #logo beginnen, damit sie an ihrem rechten Rand von der nachfolgenden Box umflossen wird.

Und beachte: Wo gefloatet wird, muß anschliessend auch sauber "gecleart" werden, damit der nachfolgende Inhalt auch in der Zeile darunter fortgesetzt wird.

mfg Maik
 
Zurück