Footer mit DIV positionieren

Beitrag von **marquis** » 11.05.2005, 20:02

@sean

.clear{clear:both;} in die css und vor deinem footer im quellcode die class clear auf ein div anwenden...footer starten und fertig....

ansonsten zum einstieg resp. wenns nicht funzt, kannst dir hier z.b. mal ein zusammendremmeln;-)

https://www.csscreator.com/version2/pagelayout.php

ansonsten hier mal anlaufen:

https://barrierefrei.e-workers.de/works ... index.html

bg
m

von **Anzeige von ABAKUS** »

Beitrag von **csx** » 11.05.2005, 20:04

@sean

Ach so, du positionierst alles absolut. Das würde ich allerdings nicht machen, da es die Seite unnötig unflexibel macht (unterschiedliche Bildschirmgrößen etc pp).

Es gibt soweit ich weis keine Möglichkeit den Footer da vernünftig drunter zu bekommen, wenn die DIVs absolut positioniert sind.

Gruss
csx

Beitrag von **robo** » 11.05.2005, 20:04

Code: Alles auswählen

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
 <head>
  <title>Test</title>
  <style type="text/css">
  
body &#123;
  margin&#58; 0px;
&#125;

#head &#123;
  margin&#58; 10px 10px 10px 10px;
  padding&#58; 2px 2px 2px 2px;
  height&#58; 80px;
  border&#58; 1px solid black;
&#125;

#mitte &#123;
  margin&#58; 0px;
&#125;

#navilinks &#123;
  position&#58; absolute;
  top&#58; 100px;
  left&#58; 0px;
  margin&#58; 10px 10px 10px 10px;
  padding&#58; 2px 2px 2px 2px;
  width&#58; 180px;
  border&#58; 1px solid black;
&#125;

#navirechts &#123;
  position&#58; absolute;
  top&#58; 100px;
  right&#58; 0px;
  margin&#58; 10px 10px 10px 10px;
  padding&#58; 2px 2px 2px 2px;
  width&#58; 180px;
  border&#58; 1px solid black;
&#125;

#content &#123;
  margin&#58; 14px 210px 10px 210px;
  padding&#58; 2px 2px 2px 2px;
  border&#58; 1px solid black;
&#125;

#footer &#123;
  margin&#58; 16px 10px 10px 10px;
  padding&#58; 2px 2px 2px 2px;
  border&#58; 1px solid black;
&#125;
  
  
  </style>
 </head>
 <body>
 
  <div id="head">
   Head
  </div>
  
  <div id="mitte">
  
   <div id="navilinks">
    Navilinks
   </div>
   
   <div id="navirechts">
    Navirechts
   </div>
   
   <div id="content">
    Content
   </div>
   
  </div>
  
  <div id="footer">
   Copyright by HansWurstSalami
  </div>
  
 </body>
</html>

Wo ist das Problem?

cu, Robo

von **Anzeige von ABAKUS** »

Beitrag von **sean** » 11.05.2005, 20:04

@AnjaK

Ziel einer guten Website ist, dass DIVs da verwendet werden, wo sie den Quellcode sauber halten und gut zu designen sind.

Mache ich bisher auch so. Das ist echt klasse (<-- "class" LOL). Aber ich dachte...und dann wollte ich....und bei anderen gehts scheinbar auch....und da machte ich....und dachte nicht.....und jetzt häng ich hier

Sie jedoch mit Gewalt einzusetzen ist Dummfug,

Ich merke es. Aber ich hab im Urin dass es gehen muß! So was spürt man mit der Zeit. Nun geht mir echt die Hutschnur hoch, hab mich zuviel aufgeregt. Daher jammere ich hier um Hilfe

Gruß
sean

Beitrag von **sean** » 11.05.2005, 20:09

@unique

https://www.pixy.cz/blogg/clanky/css-3col-layout/
merci danke *freu* - juhu

Die flexible Breite in der Mitte werd ich wohl wegbekommen.

Werd mir das mal zu Herzen nehmen.

Gruß

sean

Beitrag von **unique** » 11.05.2005, 20:12

Wenn du die variable Breite nicht benötigst, gibt es doch auch schon andere Vorlagen, weil das noch einfacher ist

https://www.f078.net/sandbox/csslayout/ ... iable.html

Beitrag von **sean** » 11.05.2005, 20:21

@marquis
cool tool

Danke für den Tipp!

@csx

Es gibt soweit ich weis keine Möglichkeit den Footer da vernünftig drunter zu bekommen, wenn die DIVs absolut positioniert sind.

Danke!

*verbeug*

@robo
danke dir, hab noch den middle content auf 530 und den right auf 200 gesetzt. Klappt prima

*verbeug*

So, dann werd ich jetzt mal weiterbasteln. Es geht ja nichts über ein gutes Grundgerüst. Ich danke euch. Puls und Blutdruck sind bei mir wieder normal

Ach ja, Linien zischen den drei Spalten, ähh Containern, als eigene DIVs?

Gruß

sean

Beitrag von **sean** » 11.05.2005, 20:22

@unique

hmm, warum ist das so easy? Lach....

sean

Beitrag von **robo** » 11.05.2005, 20:26

sean:

Hmmm ... gerade merke ich, irgendwo ist in meinem Gerüst noch der Wurm drin ... wenn eines der navi-Elemente höher ist als der Content, überschneidet es sich mit dem Footer ... dafür sollte eigentlich #mitte da sein, klappt so aber nicht ... aber das ist sicher auch noch in den Griff zu bekommen ...

cu, Robo

Beitrag von **sean** » 11.05.2005, 20:34

ja, hab ich auch gerade gemerkt

Ich werd mal sehn. lol. Ich werd jetzt erstmal Päuschen machen.....

Gruß

sean

Beitrag von **unique** » 11.05.2005, 20:34

Naja, eine flexible Spalte in der Mitte ist viel komplizierter zu erstellen, da diese meist in verschiedenen Browsern anders dargestellt wird und man evtl. auf sogenannte "Hacks" zurückgreifen muss, damit z.B. kein vertikaler Scrollbalken im IE entsteht.

Bei einem Spaltendesign mit fester Breite kann man (vorausgesetzt man positioniert nicht absolut, sondern arbeitet mit float) per clear:both einen Footer unten anhängen, der nicht vom vorausgehenden Inhalt beeinflusst wird

Beitrag von **psiu** » 11.05.2005, 20:48

@sean

die div reihenfolge ist egal es kommt nur auf die css an.

Code: Alles auswählen


<STYLE TYPE="text/css"> 


   #header &#123; 
    border-top&#58; 1px solid gray;
    border-bottom&#58;1px solid gray;
    padding&#58; 10px 10px 10px 10px
   &#125; 
#header h1&#123; font-size&#58; 16px&#125;

    
   #mainleft &#123; 
      position&#58;absolute; 
      left&#58;0px; 
      top&#58;65px; 
      width&#58;25%
   &#125; 

   #mainmiddle &#123; 
 
margin&#58; 100px 25% 0px 25%;
   &#125; 
    
   #mainright &#123; 
      position&#58;absolute; 
      right&#58;0px
      top&#58;65px; 
      width&#58;25%px; 
  

   &#125; 
    
   #footer &#123; 
margin&#58; 50% 25% 0px 25%;
       
   &#125; 
    
</STYLE>

Beitrag von **Litronic** » 11.05.2005, 20:51

hi hab mal schnell was im browser zusammengestopselt im firefox gehts habs aber noch net mitm ie probiert

Code: Alles auswählen

#header &#123;
		height&#58;65px;
                background-color&#58; #4fffc6;
	&#125;
	
	#mainleft &#123;
            position&#58; absolute;
            top&#58; 100px;
            left&#58; 10px;
            width&#58; 160px;
            height&#58; 300px;
            background-color&#58; #ffcc00;
	&#125;

	#mainmiddle &#123;
          width&#58; auto;
          margin&#58; 50px 180px;
          background-color&#58; #ffffc6;
	&#125;
	
	#mainright &#123;
	  position&#58; absolute;
          top&#58; 100px;
          right&#58; 10px;
          width&#58; 160px;
          height&#58; 300px;
          background-color&#58; #ffcc00;

	&#125;

	
	#footer &#123;
		 clear&#58;both;
                 background-color&#58; #ffcc00;
&#125;

Beitrag von **sean** » 11.05.2005, 21:18

also, ich gebs auf. Hab noch ein paar Layout Tests gemacht und im Netzt gestöbert. Mag sein dass das irgendwie geht, aber es ist nicht Cross-Browser sicher. Nun ja, ist ja kein Beinbruch ein Table-Gerüst zu verwenden. AnajK wird lachen

Zugegeben, für einfache Seiten ist das schon praktisch.....

Gruß und nochmals Danke für die rege Beteiligung!

sean

Beitrag von **hoedlspacenetwork** » 11.05.2005, 21:57

Hallo Leute,

Ich habe einen CSS Layout Generator (no Tables) gefunden.
https://www.csscreator.com/version2/pagelayout.php