• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

im moment zu blöd für css und positionierung ... nixdurchblick

C

christd

Neues Mitglied
hello leute,

ich blick irgendwie absolut ned durch!

bin grad dabei das template für ne webseit zu schreiben und stosse im moment an meine css-grenzen weil ich irgendwie keinen durchblick mehr hab obwohls eh wahrscheinlich nur eine klitze kleinigkeit ist was ich da ned beachte ... suche im netz hat mir bisher auch nur ein bisserl weitergeholfen, aber jetzt steh ich total an!

ich hoffe ihr könnt mir helfen!

also um es kurz zu beschreiben:
die gesamte seite soll sich immer der bildschirmgrösse anpassen
die menüleiste soll immer ganz oben bleiben und die einzelnen menüs rechtsbündig
die footerleiste immer am bildschirmrand kleben und alles linksbündig
unterhalb der menüleiste links das logo
und immer zentriert in der mitte der seite dann ein feld wo der jeweilige text drinnen steht!

kann ja ned so schwierig sein, a bisserl ahnung hab ich ja wohl von css aber im moemnt hab i echt keinen durchblick mehr!

ich hab bis jetzt folgendes:


=========================================================================================================================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">

html {height:100%; margin-bottom:0px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 75%/125% arial,sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {
height:100%;
margin:0 auto;
text-align:left;
min-width:600px;
max-width:1000px;
background-color:#CCC;
}

#topmenu{
background-color:#F30;
height:42px;
}


#header {
background:#0F0;
height:100px;
width:100px;
}
#main {
background:#3F9;
}
#footer {
position:absolute;
bottom: 0px;
float:left;
width:100%;
height: 42px;
margin: 0 auto;
background-color:#F30;
}

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}



</style>

</head>

<body class="<?php echo $pageclass; ?>">

<div id="overall">

<div id="topmenu">TopMenu</div>

<div id="view">
<div id="header">Header</div>
<div id="main">Main</div>
</div>

<div id="footer">Footer</div>

</div>

<jdoc:include type="modules" name="debug" />
</body>

</html>


=========================================================================================================================

wie ihr seht ist der footer nicht ganz am bottom und auch ein vertikaler scrollbar taucht dadurch auf!
und die breite des footers stimmt ja auch ned ... sollte sich ja anpassen an die gesamtbreite die ich oben definiere!
aaaargh ... mach da jetzt schon 2 tage rum aber komm zu keiner lösung ...

vielen dank schon mal im voraus!
chris






entwurf.jpgist-status.jpgfooter-problem.jpg
 
Du zeigst hier deinen PHP-Code, vermutlich aus irgendeinem CMS. Damit kann man nichts anfangen, wenn es um Gestaltung geht. Bitte zeig daher entweder den erzeugten HTML- und CSS-Code oder (besser noch) einen Link zur Seite.

Hinweis: Eine Webseite passt man nicht an Bildschirmgrößen an. Eine Webseite kann immer nur den Bereich im Browserfenster einnehmen, das nennt sich dann Viewport.

Und eine Bitte: Verwende Code-Tags, wenn Du Quellcode hier im Forum zeigst.
 
herr moderator ... es tut mir leid das ein klitzekleines php-fragment reingerutscht ist. ... der tut aber nichts zur sache ... und auch die php kommentare tun hier nichts zu sache ... wenn man sich das wirklich angesehen hat wird man sehr schnell merken das es sich tatsächlich doch um html und css handelt und deine antwort behebt aber leider nicht mein css problem, denn wenn man den code hernimmt, so wie er oben steht, und ausprobiert sieht man es ganz deutlich, wie auf den beigefügten bildern.
...und ja ... ich habe mich mit dem editor hier im forum nicht wirklich auseinandergesetzt darum habe ich den code so reingepostet ... werd ich beim nächsten mal gerne machen wenn ich mehr zeit hab und mich nicht mit problemen wie ich oben beschrieben hab herumschlagen muss!
 
Herr Foren-Nutzer, wenn ich mal ignoriere, dass dort über eine PHP-Variable irgendeine Klasse gesetzt werden sollte, dann müsstest Du lediglich

Code: 
* { padding: 0;margin: 0; }

ergänzen und die max- und min-Werte aus #overall entfernen. Schon passt sich das ganze an den Viewport an und der Footer ist auch unten.

Wenn Du mit

die gesamte seite soll sich immer der bildschirmgrösse anpassen
Zum Vergrößern anklicken....

allerdings meinst, dass die Seite sich eben nicht an den Viewport anpasst, dann hast Du etwas falsch formuliert. Denn das was Du schreibst passt nicht zu dem was dein HTML-/CSS-Code erzeugt.

Hinweis: Wenn Du irgendetwas absolut positionierst, dann brauchst Du kein float gleichzeitig benutzen.
 
jaaaa genau das wars fast ;)
ok vielleicht hab ich mich ein bisserl falsch ausgedrückt!
das menu soll über die ganze seite oben positioniert werden
der footer über die ganze seitenbreite unten am browserrand verankert werden.
der rest passt eh ... muss nur noch den main-container mittig positionieren...

allerdings war der footer zwar unten positioniert aber der overall container ist ja mit height 100% angegeben ... der hat mir trotzdem noch einen scrollbalken beschert ... hab jetzt einfach die height gelöscht ... wie würd ich denn das hinkriegen ? der hat nämlich mit ca 50px noch unterhalb des footers rausgeschaut und dadurch den scrollbalken verursacht!

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<style type="text/css">
* { padding: 0;margin: 0; }
html {height:100%; margin-bottom:1px; overflow-y:scroll;}
body {background-color:#fff; color:#000; font:normal normal normal 75%/125% arial,sans-serif; height:100%; text-align:center;}

/* LAYOUT
*********************************************/
#overall {
    margin:0 auto;
    text-align:left;
    min-width:600px;
    max-width:1000px;
    background-color:#CCC;
    }

    #topmenu{
    background-color:#F30;
    height:42px;
    margin:0;
    }


    #header {
        background:#0F0;
        height:100px;
        width:100px;
    }
    #main {
        margin:0 auto;
        position:absolute;
        top:50%;
        left:50%;
        margin-left:-300px;
        margin-top:-200px;
        width: 600px;
        height: 400px;
        background:#3F9;
    }
    #footer {
        position:absolute;
        bottom: 0px;
        left: 0;
        width:100%;
        height: 42px;
        margin: 0 auto;
        background-color:#F30;
        }

/* Floats */
.float-left {float:left;}
.float-right {float:right;}
.group:before, .group:after {content:""; display:table;}
.group:after {clear:both;}
.ie6 .group {zoom:1;}
.ie7 .group {zoom:1;}



</style>

</head>
    
<body class="">
    <div id="topmenu">TopMenu</div>
    
    <div id="overall">
      
          <div id="view">
            <div id="header">Header</div>
            <div id="main">Main</div>
        </div>
            
    </div>
    
    <div id="footer">Footer</div>        
</body>

</html>


...der code passt schon mal
nur sollte jetzt der overall-container noch die gesamte seitenhöhe mitnehmen ... wie schon geschrieben hatte ich vorher beim overall noch height:100%; angegeben! aber da schaute dieser container noch unterhalb des footers mit ca. 50px raus? das versteh i ned ganz weil 100% sollte ja die seitenhöhe angepasst sein und ned darüber hinaus?
 
Ergänze bei #view "height: 100%;" und bei #main ebenfalls. Dann musst Du allerdings den #footer anders Positionieren. Schau dir dazu mal die Beispiele unter dem Begriff "footer sticky alt" an, der Begriff umschreibt die Möglichkeit für genau diese Möglichkeit der Darstellung.
The Man in Blue > Experiments > footerStickAlt
Home
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben