Mit CSS Seite ordnen

Franky · Beitrag von **Franky** » 16.01.2009 01:19

Hi Leute, ich mach`s kurz, ich hab da ein kleines Problem mit CSS und zwar:

1.)Ich möchte eine Seite in zwei div-Bereiche aufteilen (untereinander).
Der erste Bereich hat eine feste höhe in Pixeln, der untere soll als Mindesthöhe die Gesamthöhe der Seite haben. Sprich, ich will eine Seite, die falls es nicht nötig ist keine Scrollbars hat, aber doch die ganze Seite ausfüllt.
Was kann ich aber als MinHeight angeben, wenn ich von den 100% einen festen Pixel-Wert abziehe?

2.)Da ich die untere Seite zentrieren will, mach ich das über margin:auto;, da ich dann aber ne Breite angeben muss, würd ich gerne die Breite so angeben, dass ich kein Horizontalen Scrollbalken kriege, falls nicht nötig, auch, wenn ich einen vertikalen Scrollbalken habe. width=100% klappt nicht, da die Scrollbalken ja die Seite verschmalern

Danke im Vorraus
Franky

Thalius · Beitrag von **Thalius** » 16.01.2009 13:49

Paar Anmerkungen: Min-Height funzt im IE nicht richtig und equals height.

Wegen den scrollbars probier mal:

Code: Alles auswählen

border-collapse: collapse;

dann nimm 100% für die höhe und setze das ganze mit margin und padding in ein offset. So stimmts mit allen gängigen Browsern.
und als tip bau dir ein Rahmen-div, somit hast du zum positionieren und zentrieren ein paar mehr optionen.

Cheers,
Thalius

PMV · Beitrag von **PMV** » 16.01.2009 15:08

Mach eine Tabelle mit zwei Zeilen ... in jede machst dein div und die
gesamte Tabelle machst als 100%. Dem ersten div kannst so dann den
festen Wert zuweisen und der rest wird vom Browser ermittelt.

MFG PMV

TomS · Beitrag von **TomS** » 16.01.2009 15:29

Wozu dann noch div's einfügen, wenn man eine Tabelle erstellt?

Wie ist das?
Mit mehr Text?

Thalius · Beitrag von **Thalius** » 16.01.2009 16:19

geht alles auch ohne tables.

Ist schneller, kompatibler und sauberer

XHTML + CSS + JSDOM = Sauberste Implementation imo.

PMV · Beitrag von **PMV** » 16.01.2009 22:11

stimmt, ich nutz das ja auch garnicht mehr so fällt mir grad auf ...

MFG PMV

Franky · Beitrag von **Franky** » 17.01.2009 23:00

So, erstmal sorry, dass ich mich so spät erst melde, aber ich muss immer alles alleine machen, das denk ich zumindest.

@TomS:
Danke, aber das hilft mir nicht viel weiter, denn die Sache mit dem top funktionierte ja schon ("funktioniert" heißt hier Firefox, an den IE geh ich noch garnicht dran)
Interessant wär für mich, wenn du es schaffen würdest, im ersten Beispiel den Text "fringil" ganz nach unten auf die Seite zu packen.
Da liegt nämlich mein Hauptproblem.

Also, ich muss ganz ehrlich sagen, bei CSS ist es wie ich das sehe mit der Logik nicht so weit her. Oder ich rall da einfach was nicht, was ich mir natürlich eher wünsche

Nehmen wir mal folgende Beispielseite

Dort ist dieser Quelltext zu sehen:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
        "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
 <head>
  <title> Test</title>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <style type="text/css">
html,body{
         margin:0px;
         padding:0px;
         margin-top:25px;
         background-color:#000000;
         }
     div.main{
             background-color:#FFFF00;
             position:relative;
             height:100%;
             width:100%;
             }
     div.topbar{
             background-color:#0000FF;

             position:fixed;
               top:0px;
               width:100%;
               height:25px;

             }
    div.footer{
              position:relative;
              bottom:0px;
              width:100%;
              height:20px;
             }
  </style>
 </head>

 <body>
      <div class="main">
           Ein Text so mal
           <div class="Footer">
                      der Footer
           </div>
      </div>
      <div class="topbar">
           Die Titelleiste
      </div>
 </body>

</html>

Vorhandene Fehler:
Der schlaue Mensch entdeckt bei Betrachtung der Seite:

1.)Nach der Titelleiste ist für 25px die Hauptseite zu sehen. Eigentlich sollte dort aber der "main"-div direkt anschließen, denn der "topbar"-div wird erst nachher erzeugt, hat also keine relative Bedeutung.
Zudem kann man auch an Zeile 11 des Quelltextes rumspielen und wird sehen: CSS multipliziert den angegebenen Wert mit 2
Man kann diesen Fehler zwar umgehen, indem man 13px angibt, aber ich frag mal ganz unverblümt: Woher kommt das und was soll so ein Darmprodukt?

2.)Die Seite hat Scrollbalken, was ich ja nu garnicht will, wenn`s nicht nötig ist.

Ich weiß mit dieser scheiß Sprache einfach nicht mehr weiter

Danke für Eure Hilfe schonmal im Vorraus.

Franky

Thalius · Beitrag von **Thalius** » 18.01.2009 00:02

Genrelle CSS Regeln:

Wird von oben nach unten und links nach rechts geparsed.

Elemente haben verschiedene Gewichtungen und werden in einem DOM dargestellt ( Baumstruktur ).

Desto mehr verweise ein Element besitzt desto höher ist seine Gewichtung - somit lassen sich auch klassen und IDs ( die dinger mit dem # davor ) überschreiben. IDs wiegen schwerer als Klassen.

und um ein element zt auf die dyn seitengrösse zu verschieben kannst du das auch mit einem JS machen ( zt nötig da IE die min-height nicht richtig interpretiert ).

Wenns bis nächste woche ned gelöst hast fix ich dir ein beispiel - am weekend hab ich sowas von keine lust mehr auf php/css - da ich schon seit geraumer zeit an einem riesigen projekt damit involviert bin ... Weekend code ich lieber ALLES andere *gg*

Hier das JS um ein class element auf die seitengrösse zu resizen ( mit oberem element von margin 250px ).

Code: Alles auswählen

<script type="text/javascript" language="JavaScript">
<!--
window.onresize=function(){
		//sleep(10);
		resizeWin();
	}
var stopit = 0
function resizeWin () {
	var h;
	// all except Explorer
	if (self.innerHeight) { h = self.innerHeight; }
	// Explorer 6 Strict Mode
	else if (document.documentElement && document.documentElement.clientHeight) {
			h = document.documentElement.clientHeight;
	}
	// other Explorers
	else if (document.body) { 
		h = document.body.clientHeight; 
	}
	
	var newHeight = h-192;
	// limit min
	if (newHeight<250) {
	newHeight = 250;
	}
	var obj1=document.getElementById("page_content_classname");
	obj1.style.height = newHeight+"px";
}
//-->
	</script>

Cheers,
Thalius

TomS · Beitrag von **TomS** » 18.01.2009 00:16

@Franky
Ok, hatte dich dann falsch verstanden, aber jetzt weiß ich glaub ich, was du meinst. Ich schau mal ob ich's hinkrieg.

Ansonsten würde ich doch eher zu Tabellen raten. Es ist ja dann ein fixes Layout, dass nicht floaten muss (Floatverhalten: Bei geringer Browserbreite ordnen sich Elemente untereinander an, bei großer Breite nebeneinander).

Alt und missbraucht hin oder her. Es ist immer noch besser als alles gleich mit JS lösen zu wollen. Barrierefreiheit und so.

PMV · Beitrag von **PMV** » 18.01.2009 00:54

ich weis ja nicht, wie gut du dich jetzt damit auskennst, aber das
Problem, eine Fußleiste zu erstellen hatte ich auch schon ... allerdings
hatte ich eine Vorlage der ich nachgeeifert bin ... das Ergebnis ist
unteranderem das hier:

http://pmv.pytalhost.com/FPPS/R3_Markts ... g_1968.htm

Da das ganze keine Bilder verwendet und automatisch erzeugt wird, ist
das für dich jetzt natürlich total unübersichtlich, aber wenn du z.B. den
oberen Hintergrund raus machst bzw. alles einrückst, hilft es dir bestimmt

MFG PMV