Anzeige

wiso klappt dan nicht...

wiso klappt dan nicht... | PSD-Tutorials.de

Erstellt von Thomas2704, 02.09.2008.

  1. Thomas2704

    Thomas2704 looser

    Dabei seit:
    19.02.2007
    Beiträge:
    579
    Geschlecht:
    männlich
    Ort:
    Rollag - Norwegen
    wiso klappt dan nicht...
    wiso klappt das nicht...

    huhu ich teste gerade mal ne html und ne css,aber irgendwie sitzen die divs nicht so wie ich die haben will.ich will nicht mit przentangabe arbeiten.

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="screen.css" rel="stylesheet" type="text/css" />
    <title>Unbenanntes Dokument</title>
    </head>

    <body>


    <div class="body">
    <div class="header">header</div>
    <div class="navi1">navi1</div>
    <div class="contest">"contest"</div>

    <div class="navi2">Raum für den Inhalt von class "navi2"</div>
    </div>
    </body>
    </html>



    css



    .body {
    width:1200px;
    min-height:720px;
    background-color: #99FFFF;
    margin: 0px 0px 0px 0px;
    }
    .header {
    width: 1100px;
    height: 150px;
    background-color: #00FF66;
    margin: 20px 0p 50px 0px;
    }
    .contest {
    background-color: #33CCFF;
    width: 600px;
    min-height: 500px;
    float: left;
    margin: 10px 0px 0px 0px;
    }
    .navi2 {
    background-color: #0099FF;
    width: 150px;
    min-height: 300px;
    margin: -20px 10px 0px 100px;
    }


    .navi1 {
    width: 150px;
    min-height: 300px;
    background-color: #00FF99;
    margin: -20px 0px 0px 100px;


    der header soll mittig sitzen.dann untendrunter die navi, daneben der contest und daneben die navi1..
    }
     
    Zuletzt bearbeitet: 02.09.2008
    #1      
  2. BigBilly

    BigBilly Nicht mehr ganz neu hier

    111
    Dabei seit:
    21.01.2008
    Beiträge:
    211
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    CS6, TYPO3
    Kameratyp:
    Canon EOS 600D
    wiso klappt dan nicht...
    AW: wiso klappt dan nicht...

    Erstens kappiert man überhaupt nicht was du willst.
    Und zweitens hast du eine schöne Überschrift gewählt...
     
    #2      
  3. Engelskind

    Engelskind Noch nicht viel geschrieben

    Dabei seit:
    08.06.2008
    Beiträge:
    17
    Geschlecht:
    weiblich
    Ort:
    Austria
    Software:
    Photoshop, Illustrator, InDesign, Corel Painter, Maya, ZBrush, After Effects, Flex
    Kameratyp:
    Nikon D3000
    wiso klappt dan nicht...
    AW: wiso klappt dan nicht...

    Wenn du deine DIV-Container an bestimmten Stellen positionieren willst, dann musst du mit positions arbeiten und dementsprechend mit left, right, top oder bottom dein div verschieben.

    Näheres dazu findest du hier.
     
    #3      
  4. Thomas2704

    Thomas2704 looser

    Dabei seit:
    19.02.2007
    Beiträge:
    579
    Geschlecht:
    männlich
    Ort:
    Rollag - Norwegen
    wiso klappt dan nicht...
    AW: wiso klappt dan nicht...

    ja nee.. ich hab das noch nicht hochgeladen..kann ich aber erst heute abend,da ich malochen bin

    ich hab das problem das die divs nicht so dargestrellt werden wie ich das møchte...
     
    #4      
  5. Engelskind

    Engelskind Noch nicht viel geschrieben

    Dabei seit:
    08.06.2008
    Beiträge:
    17
    Geschlecht:
    weiblich
    Ort:
    Austria
    Software:
    Photoshop, Illustrator, InDesign, Corel Painter, Maya, ZBrush, After Effects, Flex
    Kameratyp:
    Nikon D3000
    wiso klappt dan nicht...
    AW: wiso klappt das nicht...

    Ja klar dass die divs nicht so angezeigt werden, wie du willst. Ich sagte ja schon mit position und left, right, bottom und top verschiebst du deine gesamten div-container an die stelle wo das alles stehen soll. Und dabei arbeitest du mit Pixelangaben.

    In deinen div-Klassen hast du bisher ja nur angegeben, dass es eine maximale Höhe und Weite gibt, und dass xx Pixel Abstand von oben sein sollen und so viele von rechts, etc., Hintergrundfarbe.

    Du willst zb das der Header mittig sitzt.
    Damit der Header mittig sitzt, sagt man dass egal bei welcher Bildschirmauflösung der Außenabstand links und rechts automatisch ist.

    Das heißt folgende Änderung wäre:

    .header {
    width: 1100px;
    height: 150px;
    background-color: #00FF66;
    margin-left: auto;
    margin-right: auto;
    }

    Wenn du den Text im Header auch noch mittig haben willst, dann setzt du noch ein "text-align: center;" dazu.

    Dann kommt die navi. Da du keine Position bisher angegeben hast siehst du wie sich die Navigation anzeigen lässt. Zb so:

    .navi {
    position: absolute;
    left: 200px;
    top: 30px;
    }

    hier entsteht eine absolute Position, die nen Abstand links mit 200px hat und von oben 30px. (Musst das dann eben so anpassen, dass die navi unter dem header ist)

    Mehr kann ich dir leider nicht helfen, weil ich nicht weiß wie du was dargestellt haben willst. Wenn es nur um die Positionierung der Divs geht, dann guck dir das mit den positions an. Wenn es einfach nur darum geht, dass das div die und die Schriftart hat, und so viel Innenabstand, etc. dann solltest du dich mit CSS beschäftigen.
     
    #5      
  6. Thomas2704

    Thomas2704 looser

    Dabei seit:
    19.02.2007
    Beiträge:
    579
    Geschlecht:
    männlich
    Ort:
    Rollag - Norwegen
    wiso klappt dan nicht...
    AW: wiso klappt dan nicht...

    huhu..

    ich hab das mal so gemacht und es geht ganz gut ,danke.
    nur hab ich jetz das problem das sich der footer nicht atuomatisch mit verschiebt.

    wie mach ich das jetz?

    testseite

    css:

    .body {
    width:1200px;
    min-height:720px;
    background-color: #99FFFF;
    margin: 0px 0px 0px 0px;

    }
    .header {
    width: 1200px;
    height: 150px;
    background-color: #00FF66;
    margin-left:auto;
    margin-right:auto;
    margin-top:30px;
    z-index: 1;

    }
    .navbarheader {
    position: absolute;
    width: 900px;
    height: 20px;
    margin-left: 200px;
    margin-top: -20px;
    background-color: #330000;
    z-index: 2;
    }

    .navi1 {
    position:absolute;
    width: 200px;
    min-height: 500px;
    background-color: #00FF99;
    margin-top:0px;

    }
    .randlinks {
    position:absolute;
    background-color: #000066;
    width: 20px;
    min-height: 500px;
    margin-left: 200px;
    }
    .contest {
    position:absolute;
    background-color: #33CCFF;
    width: 840px;
    min-height: 500px;
    margin-left:220px;
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;

    }
    .randrechts {
    position:absolute;
    background-color: #000066;
    width: 20px;
    min-height: 500px;
    margin-left: 1080px;
    }



    .navi2 {
    position:absolute;
    background-color: #0099FF;
    width: 100px;
    height: 500px;
    margin-left:1100px;
    margin-top:0px;

    }


    .footer {
    position:absolute;
    background-color: #0033FF;
    width:1200px;
    height:40px;
    margin-top:500px;
    }
     
    #6      
x
×
×
teststefan