kostenloser Webspace werbefrei: lima-city

CSS POSITION

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

auto blocken browser code dank display dokument header http index inhalt kopf moderne browser position positionieren problem profi text url verhindert umbruch
  1. Autor dieses Themas

    finch

    Kostenloser Webspace von finch, auf Homepage erstellen warten

    finch hat kostenlosen Webspace.

    10:14, 18.3.2010
    Hallo leute hab schon wie wild herumprobiert und bekomms nicht hin. Ich würd gern mit Css folgendes realisieren:

    <div id="site">
 <div id="header">Kopf</div>
<div id="content">Inhalt</div>
 <div id="footer">Fußzeile</div>
</div>


    site soll variable mit dem content mitwachsen, kopf soll oben positioniert werden und Fußzeile unten.
    Ich schaffe es nicht die Elemente richtig zu positionieren, bitte helft mir…

  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. nerdinator

    Kostenloser Webspace von nerdinator, auf Homepage erstellen warten

    nerdinator hat kostenlosen Webspace.

    10:58, 18.3.2010
    Was du da hast, ist ein 3-Zeilen-Layout.

    Tendenziell würde ich sagen: Site auf position:absolute; header auf display:block; content auf display:block; und footer auf position:absolute; und bottom:0px; (bottom muss eventuell angepasst werden, auf die höhe der Fußzeile.

    Alternativ wäre die nutzung der "display:table", "display:table-cell" usw. methoden möglich, was am Ende dann praktisch wie eine Tabelle verwendet werden kann.

    Ansonsten: Mal googlen ;) Gibt viele Beiträge über dieses Problem.

  4. juerch

    Kostenloser Webspace von juerch

    juerch hat kostenlosen Webspace.

    11:41, 18.3.2010
    Versuche es mal so (Inhalt css Datei):

    #header{
        position: absolute;
        color: white;
        background-color: red;
        width: 100%;
        left: 0px;
        top: 0px;
        height: 135px;
}
#content{
        position: absolute;
        overflow: auto;
        color: yellow;
        background-color: green;
        width: 100%;
        left: 0px;
        top: 135px;
        bottom: 20px;
}
#footer{
        position:absolute;
        color: orange;
        background-color: blue;
        width: 100%;
        left: 0px;
        bottom: 0px;
        height: 20px;
}


    -Header bleibt jederzeit sichtbar
    -Footer bleibt jederzeit sichtbar
    -Content bekommt einen Scrollbalken wenn der Inhalt zu groß ist.

    Farbauswahl nur zur Veranschaulichung.

    Gruß
    Juerch
  5. Autor dieses Themas

    finch

    Kostenloser Webspace von finch, auf Homepage erstellen warten

    finch hat kostenlosen Webspace.

    12:57, 18.3.2010
    hmm jo fast jedoch möchte ich in der mitte keinen scrollbalken, die seite soll einfach größer werden bzw scrollbalken ganz rechts am browser

  6. buechsdeluxe

    buechsdeluxe hat kostenlosen Webspace.

    13:19, 18.3.2010
    einfach in #content folgendes weglassen: overflow: auto;

    Beitrag zuletzt geändert: 18.3.2010 13:19:54 von buechsdeluxe

  7. juerch

    Kostenloser Webspace von juerch

    juerch hat kostenlosen Webspace.

    14:27, 18.3.2010
    Der Vollständigkeit halber:

    body, p a{
        background-color: green;
        font-family: Arial,sans-serif;
        min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
}
html>body #header{       /*für moderne Browser*/
        position:fixed;
}
#header{
        position: static;
        color: white;
        background-color: red;
        width: 100%;
        left: 0px;
        top: 0px;
        height: 135px;
        z-index:1;
}
#content{
        position: absolute;
        color: yellow;
        background-color: green;
        right: 0px;
        left: 0px;
        top: 135px;
        padding-left: 140px;
}
html>body #footer{           /*für moderne Browser*/
        position:fixed;
}
#footer{
        position:static;
        color: orange;
        background-color: blue;
        width: 100%;
        left: 0px;
        bottom: 0px;
        height: 20px;
}


    -Header bleibt jederzeit sichtbar (fixed, z-index)
    -Footer bleibt jederzeit sichtbar (fixed)
    -Content ohne overflow und bottom
    -Browserfenster bekommt einen Scrollbalken wenn der Inhalt zu groß ist.

    Am besten lernt man wenn man damit spielt. Also probier einfach mal damit herum. Ein sehr gutes online Handbuch findest Du hier: http://de.selfhtml.org/

    Gruß
    Juerch

    edit: Browserweiche hinzugefügt (ältere Browser kennen fixed nicht)

    Beitrag zuletzt geändert: 18.3.2010 14:35:30 von juerch
  8. Autor dieses Themas

    finch

    Kostenloser Webspace von finch, auf Homepage erstellen warten

    finch hat kostenlosen Webspace.

    17:02, 18.3.2010
    danke, jedoch ists noch immer nicht ganz das was ich haben will. die fusszeile soll nicht unten kleben sondern mit dem inhalt mitrunter wandern also:

    kopf hat fixe höhe

    dann der variable inhalt

    fuss mit fixer höhe

    und (site) alle 3 sollen zb auf zentriert und breite soll fix 600 oder so sein.
    es soll nichts static werden

    Problem: Der Fuss lässt sich nicht mitbewegen, so ein kack

  9. juerch

    Kostenloser Webspace von juerch

    juerch hat kostenlosen Webspace.

    19:57, 18.3.2010
    Das ist simpel:

    body, p a{
        color: grey;
        background-color: black;
        font-family: Arial,sans-serif;
        min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
        margin:0px;
}
#site{
        margin-left: auto;
        margin-right: auto;
        width: 600px;
}
#header{
        color: white;
        background-color: red;
        width: 100%;
        text-align:center;
        height: 100px;
}
#content{
        color: yellow;
        background-color: green;
        width:100%;
}
#footer{
        color: orange;
        background-color: blue;
        width: 100%;
        height: 20px;
}


    -keine fixen Elemente
    -Feste Breite der div-container (hier 600px)
    -Header mit fester Höhe (hier 100px)
    -Footer mit fester Höhe (hier 20px)
    -Content-Höhe ist vom Inhalt abhängig (Browser-Scrollbalken kommt automatisch)
    -alles zentriert

    Jetzt hast Du reichlich Stoff zum experimentieren. Viel Erfolg!

    Gruß
    Juerch


    Beitrag zuletzt geändert: 18.3.2010 19:58:38 von juerch
  10. Autor dieses Themas

    finch

    Kostenloser Webspace von finch, auf Homepage erstellen warten

    finch hat kostenlosen Webspace.

    20:59, 18.3.2010
    danke sieht schon fast perfekt aus: Jetzt für css profis ich möchte nun den content auch noch in 2 teile zerlegen der linke teil klebt links oben beim content und der rechte teil mit etwas abstand nach rechts verschoben und bestimmt zugleich den inhalt

    hier der fast richtige code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style media="screen">
body, p a{
        color: grey;
        background-color: black;
        font-family: Arial,sans-serif;
        min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
        margin:0px;
}
#site{
        margin-left: auto;
        margin-right: auto;
        width: 600px;
}
#header{
        color: white;
        background-color: red;
        width: 100%;
        text-align:center;
        height: 100px;
}
#content{
        color: yellow;
        background-color: green;
        width:100%;
}
#contentleft
{
		color:#399;
		width:100px;		
}
#contentright
{
		color:#690;
		position:relative;
		left:120px;		
}
#footer{
        color: orange;
        background-color: blue;
        width: 100%;
        height: 20px;
}
</style>
</head>

<body>
<center>
<div id="site">
 <div id="header">Kopf</div>

<div id="content">

<div id="contentleft">
asaaadf<br>
asffdf<br>
asadf<br>
asdsdff
</div>

<div id="contentright">
Inhalt asdf asd ga <br>asd ga <br>asd gadas
fsgafgagfadfgadgagf <br>asdfasdfasdgasdfg<br>asdf
asdfasdgh<br>asdfasdfasdgadfg<br>asdfasdfasdga
df<br>asdfasdfasdggasdfgasdfgasdgasdgasdfgasdfg
asdfg
</div>

</div>

<div id="footer">Fußzeile</div>
</div>
</center>
</body>
</html>

  11. juerch

    Kostenloser Webspace von juerch

    juerch hat kostenlosen Webspace.

    8:38, 19.3.2010
    finch schrieb: Jetzt für css profis
    :cool: Haha super Versuch! Mach doch mal selber, ist gar nicht so schwierig. Ich hab dir doch alles schon vorgekaut. Ich glaube Du willst Dir von uns nur dein Seitenkonstrukt erstellen lassen. Mit dem was ich Dir bisher geschrieben habe solltest Du den Rest alleine hinkriegen.

    Tip:
    Divs im Elternelement Positionieren (Top, Width, position, right, left,)

    Einen Code werde ich jetzt nicht mehr schreiben.

    Mit enttäuschten Grüßen
    Juerch

  12. thomasba

    Co-Admin Kostenloser Webspace von thomasba

    thomasba hat kostenlosen Webspace.

    9:08, 19.3.2010
    Für mehrere Spalten kann man auch float verwenden ;)

    Ein beispiel findest du hier: http://www.css4you.de/trickkiste/tr00011.html
  13. Autor dieses Themas

    finch

    Kostenloser Webspace von finch, auf Homepage erstellen warten

    finch hat kostenlosen Webspace.

    10:08, 19.3.2010
    So es haut nun hin jedoch die fußzeile stimmt nicht mehr sie ist hinter dem content obwohl der text unten steht:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unbenanntes Dokument</title>
<style media="screen">
body, p a{
        color: grey;
        background-color: black;
        font-family: Arial,sans-serif;
        min-width: 40em; /* Mindestbreite verhindert Umbruch und Anzeigefehler in modernen Browsern */
        margin:0px;
}
#site{
        margin-left: auto;
        margin-right: auto;
        width: 600px;
}
#header{
        color: white;
        background-color: red;
        width: 100%;
        text-align:center;
        height: 100px;
}
#content{
        color: yellow;
        background-color: green;
        width:100%;
float:left;
}
#content
{
		color:#399;
		float:left;
				
}
#footer{
        color: orange;
        background-color: blue;
        width: 100%;
        height: 20px;
}
</style>
</head>

<body>
<center>
<div id="site">
 <div id="header">Kopf</div>

<div id="content" style="width:40%;">
asaaadf<br>
asffdf<br>
asadf<br>
asdsdff
</div>

<div id="content" style="width:60%;">
Inhalt asdf asd ga <br>asd ga <br>asd gadas
fsgafgagfadfgadgagf <br>asdfasdfasdgasdfg<br>asdf
asdfasdgh<br>asdfasdfasdgadfg<br>asdfasdfasdga
df<br>asdfasdfasdggasdfgasdfgasdgasdgasdfgasdfg
asdfg
</div>

<div id="footer">Fusszeile</div>
</div>
</center>
</body>
</html>

  14. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!