zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Companion Columns Technik mit FootStickerAlt

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.11.2008, 15:12
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard Companion Columns Technik mit FootStickerAlt

Tach zusammen,

wie schon der Titel sagt habe ich die "Companion Columns Technik" mit FootStickerAlt" kombiniert.

"Companion Columns Technik" ist eine Alternative zur "Faux Columns Technik" kommt aber ohne Grafiken aus.
Ausführlich beschrieben ist es hier: Fortgeschrittene CSS-Techniken

Ich habe ein einfaches Beispiel für ein Tut erstellt.
Funktioniert auch in allen Browsern (FF3, IE7, Opera, Safari) zuverlässig.

Code:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="language" content="deutsch, de" />
<title>Companion Columns Technik mit FootStickerAlt</title>    
 <style type="text/css">
 *  {
     padding:0;
	 margin:0;
}
html,
body,
#umhang  {
    height:100%;
}
body  {
    color:#000;
	background-color:#dcdcdc ;
}
#umhang  {
    width:700px;
	color:#000;
	background:#696969;
	margin:0 auto;
}
#umhang_innen  {
    min-height:100%;
}
#stapel  {
    position:relative;
	z-index:1;
}
#kopf  {
    color:#000;
	background-color:#f5e274;
}
h1  {
    text-align:center;
	padding:0.5em;
}
.links  {
    float:left;
	width:200px;
	color:#000;
	background-color:#bcf1a0;
}
.rechts  {
    float:right;
    width:500px;
	color:#000;
	background-color:#a0f1e5;
}
.links p,
.rechts p  {
    padding:10px;
}
#tapete  {
    height:15px;
}
.begleiter  {
    height:15px;
	padding-top:16000px;
	margin-top:-16000px;
	position:relative;
}
#sockel  {
    clear:both;
	height:65px;
	margin-top:-65px;
}
#fuss  {
	height:50px;
       color:#000;
	background-color:#f5958e;
	text-align:center;
}
.clear  {
	clear:both;
	height:0;
	width:0;
	visibility:hidden;
	border:0;
} 
</style> 

<!--[if lte IE 7]>
  <style type="text/css">
* html #umhang_innen  {
    height:100%;
  }
  #stapel   {
             zoom:1;
         }
    #tapete  {
            position:relative;
         }	
    * html #fuss  {
	    zoom:1;
	}
  </style>
<![endif]-->  

</head>
<body id="startseite">

<div id="umhang">
<div id="umhang_innen">
<div id="stapel">
<div id="kopf">
  <h1>Hauptüberschrift</h1>
</div><!--Ende #kopfbereich-->

<div class="links">
  <p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse.</p> 
</div><!--Ende #links-->

<div class="rechts">
<p>Hunger. Stufe für Stufe schob sie sich die Treppe hinauf. Pizza Funghi Salami, Sternchen "Salami" gleich 
      Blockwurst. Die Pilze hatten sechs Monate in einem Sarg aus Blech, abgeschattet vom Sonnenlicht,
      eingeschläfert in einer Sosse aus Essig, billigem Öl und verschiedenen Geschmacksverstärkern, geruht. 
      Es war nur ein Augenblick, in dem sie die Welt erblickt hatten, dann verschwanden sie wieder in einem 450° 
      heissen Ofen. Die Pizza ruhte auf ihrer rechten Hand, und in ihrer Linken hielt sie eine jener nichtssagenden
	Plastiktüten.</p>
</div><!--Ende #rechts-->
<hr class="clear" />
</div><!-- Ende #stapel -->
</div><!-- Ende #umhang_innen -->

<div id="sockel">

<div id="tapete">
<div class="links begleiter">&nbsp;</div>
<div class="rechts begleiter">&nbsp;</div>
</div><!-- Ende #tapete -->

<div id="fuss">
  <p>Ein kurzer Fusstext</p>
</div><!--Ende #fuss-->

</div><!-- Ende #sockel -->

</div><!--Ende #umhang-->

</body>
</html>
Nur im IE6 bekomme ich einen vertikalen Scrollbalken.
Dieser verschwindet, wenn ich im Cond. Comm. folgendes zusätzlich eintrage:
Code:
* html #sockel  {
      margin-top:-69px;
}
Der 3px-Bug ist mir bekannt, von einem 4px-Bug hab ich noch nie etwas gehört.

Ich kann mir leider keinen Reim darauf machen, warum ich für den IE6 4px mehr negatives margin geben muss, damit der horiz. Scrollbalken verschwindet.

Hat jemand eine Lösung für mich?

Danke im voraus

edit. Das Beispiel ist im Moment noch "Work in flow" sozusagen, also noch etwas suboptimal.

Auf #umhang_innen kann z.B. verzichtet werden.

Die min-height:100%; bekommt einfach #stapel.
Für den IE6 wird das CC noch entsprechend angepaßt.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (07.11.2008 um 15:55 Uhr)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 07.11.2008, 16:08
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

IE < 7 erweitert Elemente, bis Text hineinpasst. 15px Höhe sind zu wenig für eine Zeile Text.

Persönliche Anmerkung: Bei einem Layout mit festen Pixelbreiten, das einfarbige gleichlange Spalten bekommen soll, ist diese Kombination IMHO Kanonen auf Spatzen.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 07.11.2008, 16:42
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hallo Corina,

danke für deine Hilfe!

Habe #tapete und .begleiter nun 20px Höhe zugewiesen, jetzt paßt es einwandfrei.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (07.11.2008 um 16:51 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 07.11.2008, 17:00
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.775
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
Habe #tapete und .begleiter nun 20px Höhe zugewiesen, jetzt paßt es einwandfrei.
Aber nur, solange niemand die Schrift vergrößert ...
Mit Zitat antworten
  #5 (permalink)  
Alt 07.11.2008, 17:26
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
Thread-Ersteller
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Hi,

Zitat:
Zitat von fricca Beitrag anzeigen
Aber nur, solange niemand die Schrift vergrößert ...
*grlmpfxgrpfl*..., stimmt auffallend, dann kommt der Scrollbalken zurück.

Aber das ist schon okay, denke ich.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
DL Navi Menu mit Image Replacment technik? toto_ee CSS 0 28.02.2006 14:27
faux columns und height:100% sind keine Lösungen Mambo_mango CSS 18 05.05.2005 20:08


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:39 Uhr.