Anzeige

Positionierung CSS <div

Positionierung CSS <div | PSD-Tutorials.de

Erstellt von Can_nim, 28.07.2008.

  1. Can_nim

    Can_nim Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2008
    Beiträge:
    53
    Geschlecht:
    männlich
    Positionierung CSS <div
    Ich fange an mich mit CSS zu beschäftigen und habe bisschen probleme dabei..

    Ich soll leere <div>-Elemente erstellen, so dass es den Containern entsprechen. Zum Beispiel:

    1. <div id="container">
    2. <div id="header"></div>
    3. <div id="mainnav"></div>
    4. <div id="menu"></div>
    5. <div id="contents"></div>
    6. <div id="footer"></div>
    7. </div> <!-- /container -->
    so sieht es dann aus

    [​IMG]


    doch jetzt weiß ich nicht wie ich die einzelenen Container positionieren soll

    wie auf dieser sieite beschrieben wird >> Ein CSS-Layout erstellen (Webdesign) | andreas-kalt.de

    später sieht es dann so aus

    [​IMG]

    Was soll ich machen...brauche halt hilfe
     
    Zuletzt von einem Moderator bearbeitet: 29.07.2008
    #1      
  2. Der_Ritter

    Der_Ritter Nicht mehr ganz neu hier

    Dabei seit:
    04.03.2008
    Beiträge:
    101
    Geschlecht:
    männlich
    Positionierung CSS <div
    AW: Positionierung CSS <div

    Was weißt du bereits von CSS?
    Cascading Style Sheets. Dort beschreibst du, wie die einzelnen DIVisions (Also Bereiche) angeordnet, welche Größe, welche Hintergrundfarbe und so weiter haben sollen.
    Hast du dich bereits mit CSS beschäftigt und wenn ja, wie weit bist du gekommen (Code)?

    Gruß
    Der_Ritter
     
    #2      
  3. Kiya

    Kiya Nicht mehr ganz neu hier

    Dabei seit:
    28.09.2007
    Beiträge:
    55
    Geschlecht:
    weiblich
    Ort:
    Chemnitz
    Software:
    Photoshop CS3
    Kameratyp:
    Canon eos450D mit Kit Objektiv
    Positionierung CSS <div
    AW: Positionierung CSS <div

    wie ich sehe arbeitest du mit dramweaver. da kannst die div container doch einfach mit der maus verschieben. die pixelposition schreibt es dann automatisch in deinen code. da kannste noch feintuning machen.
    ich erstell für jeden div meinst ne eigene css klasse (gibts aber sicher noch bessere möglichkeiten) und schreib da mit div { position:absolute; margin:0px; padding:0px; height:xx px; width:xx px; }

    dann kannste noch werte für right und left definieren.
    versuchs einfach mal. ist ne so schwer.
     
    #3      
  4. Can_nim

    Can_nim Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2008
    Beiträge:
    53
    Geschlecht:
    männlich
    Positionierung CSS <div
    AW: Positionierung CSS <div

    @KIYA einfach klasse idee!!! warum nicht gleich so ;D
    aber hab noch paar probleme..

    also ich hab 2 divs erstellt

    Code:

    <body>

    <div id="container">Container</div>
    <div id="header">Header</div>

    </body>

    Das problem:


    ich kann die beiden nicht einzelnd positionieren, weil sie aufeinander liegen

    es sieht dann so aus:

    [​IMG]

    wenn man genau hinschaut sieht man das hinterm <div Header den <div Contens (ich hab paar bustaben hinzugefügt damit man das erkennt)


    und dann das CSS code eingeben wie Kiyra das geschrieben hat

    div#container {
    position:absolute;
    margin:50px;
    padding:0px;
    height:619px;
    width:703px;
    top: -47px;
    left: -5px;

    und so sieht es dan in CSS aus (weiß nicht ob das eine liste ist was auch immer:

    [​IMG]


    ps:
    was heißt id? das nach <div kommt also <div id""

    und wie kann ich zu den <div hintergrundfarbe geben? z.b

    div#container {
    position:absolute;
    margin:50px;
    padding:0px;
    height:619px;
    width:703px;
    top: -47px;
    left: -5px;
    <--------->WO UND WELCHEN CODE MUSS ICH FÜR DIESEN HINTERGUND HIER EINGEBEN?<

    und was heißt in dem CSS margin, pedding und die positionen we absolute fixed und so weiter?


    DANKE DANKE DANKEEE im voraus
     
    Zuletzt bearbeitet: 29.07.2008
    #4      
  5. serverhombre

    serverhombre Guest

    Positionierung CSS <div
    AW: Positionierung CSS <div

    Hallo,
    so wie ich das sehe solltest du dich erstmal mit den Grundlagen von (x)html und css vertraut machen.:hmpf:

    SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
    CSS 4 You - The Finest in Stylesheets

    Hintergrund-Bild bzw. Farbe mit Beispielen:
    SELFHTML: Stylesheets / CSS-Eigenschaften / Hintergrundfarben und -bilder

    Außenrand und Abstand:
    SELFHTML: Stylesheets / CSS-Eigenschaften / Außenrand und Abstand

    Positionierung und Anzeige:
    SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen


    PS: im Forum gibt es auch einen extra Bereich für (x)html bzw. css Fragen.
     
    #5      
  6. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Positionierung CSS <div
    Zuletzt bearbeitet: 29.07.2008
    #6      
  7. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Positionierung CSS <div
    AW: Positionierung CSS <div

    WICHTIG!
    BITTE VERGISS GLEICH WIEDER ELEMENTE ABSOLUT ZU POSITIONIEREN!


    Das macht dir später nur Probleme!
    Bitte gewöhne dir auch an CSS und HTML Code hier in ...

    [HTML'] und [/HTML']

    (ohne hochkomma) zu setzen.
    Das macht das ganze übersichtlicher.

    Bezüglich der Positionierung von CSS Boxen empfehle ich dir
    Floats.

    Ansonsten arbeite dich bitte durch die von Serverhombre und Tattoomaus78
    angegebenen Links.

    MfG

    jAcK
     
    #7      
  8. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Positionierung CSS <div
    AW: Positionierung CSS <div

    Ich hab mir nochmal etwas Zeit genommen
    ... dein obiges Beispiel setzt sich wie folgt um.
    HTML:
    1.  
    2. <div id="container">
    3.  <div id="header">
    4.   Inhalt des Kopfes
    5.  </div>
    6.  <div id="mainnav">
    7.   Hier kommen dann Navigationselemente hinein.
    8.  </div>
    9.  <div id="menu">
    10.   Hier wohl auch
    11.  </div>
    12.  <div id="contents">
    13.   INHALTINHALTINHALTINHALTINHALTINHALTINHALTINHALT
    14.   INHALTINHALTINHALTINHALTINHALTINHALTINHALTINHALT
    15.  </div>
    16.  <div id="footer">
    17.   Der Fuß der Seite
    18.  </div>
    19. </div>
    20.  
    Und das CSS dazu (alles zwischen "/*" und "*/" sind kommentare.

    HTML:
    1.  
    2.   body {
    3.      /* wir wählen das element body aus*/
    4.   background-color: #ccc; /*grau*/
    5.   margin: 0;
    6.     /* wir entfernen alle ränder*/
    7.   padding: 0;
    8.     /* wir entfernen alle Innenabstände */
    9.   text-align: center;
    10.     /* ausrichtung zentriert ...
    11.      für IE wichtig um den Container zu zentrieren */
    12.  }
    13.  div {
    14.    /*wir wählen jedes div Element aus */
    15.   display: block;
    16.    /* wie der name schon sagt Element wird als Block dargestellt */
    17.   }
    18.  #container {
    19.     /* wir wählen das Element mit der ID container aus */
    20.  
    21.   background-color: #f00;
    22.     /* da ist rot es geht auch statt #f00 -> red*/
    23.  
    24.   width: 768px;
    25.     /* breite des Containers ... wird auch bei niedrigen
    26.     Auflösungen komplett in voller breite sichtbar sein*/
    27.  
    28.   margin-top: 50px;
    29.     /* abstand nach oben 50px; */
    30.   margin-left: auto;
    31.    /* maximaler abstand nach links */
    32.   margin-right: auto;
    33.    /* maximaler abstand nach rechts ...
    34.    da rechts und links maximaler abstand ...
    35.    schiebt sich der conatiner in die Mitte.
    36.   */
    37.  }
    38. #container #header {
    39.    /* folgendes gilt für die ID header welche im Element container ist */
    40.   background-color: #F401FD;
    41.   display: block;
    42.   height: 50px;
    43.    /* 50px höhe */
    44. }
    45. #conatiner #mainnav, #mainnav {
    46. /*das wählt beides das gleich Element aus, nur das wir mit Komme trennen
    47. können wenn wir mehrere Elemnte wählen wollen. würde nach dem komma
    48. z.B. #footer stehen würde folgendes auf für den Footer gelten */
    49.    background-color: green;
    50.    display: block;
    51.    height: 20px;
    52. }
    53. #menu {
    54.   background-color: #FFFF00;
    55.   display: block;
    56.   width: 200px; /* nur 200px breit */
    57.   height: 150px;
    58.   float: right; /* rechts ausgerichtet alles andere fließt links davon herum */
    59. }
    60. #contents {
    61.     /* na was wählt das wohl aus? */
    62.   background-color: #07FFE3;
    63.   margin-left: 20px;
    64.    /* abstand links 20px */
    65.   margin-right: 20px;
    66.    /* abstand links 20px */
    67.   margin: 0 20px 0 20px;
    68.    /* sagte das gleiche wie die Angaben darüber nur in einer aussage
    69.    dabei gilt folgende reihenfolge oben-rechts-unten-links (also Uhrzeiger Sinn).
    70.    Bei 0 muss keine einheit, hier px, mit angegeben werden.
    71.    */
    72.   height: 400px;
    73. }
    74. #footer {
    75.     background-color: #00FF00;
    76.     height: 30px;
    77. }
    78.  
    Fügst du das ganze in deine Dreamweaver code Ansicht ein,
    hast du das gewünschte Layout. Spiel einfach etwas mit
    den werten um zu sehen was sie machen.

    Viel Spaß weiterhin und viel Erfolg.

    MfG

    jAcK
     
    #8      
  9. Can_nim

    Can_nim Nicht mehr ganz neu hier

    Dabei seit:
    27.03.2008
    Beiträge:
    53
    Geschlecht:
    männlich
    Positionierung CSS <div
    AW: Positionierung CSS <div

    Ohje...

    wenn ich das mit Absolute vergessen soll war die mühe bis hierhin völlig umsonst:motz:

    denn ich hab so einiges zusammen gestellt:

    so sieht es um browser aus
    [​IMG]

    so sieht es im html aus
    [​IMG]

    und der CSS code so:
    [​IMG]


    ist das jetzt falsch??? sagt was dazu

    und wie ist das mit absolut so ein nachteil????
     
    #9      
  10. jackprince

    jackprince xHTML & CSS Junkie

    Dabei seit:
    12.07.2007
    Beiträge:
    528
    Geschlecht:
    männlich
    Ort:
    Leipzig
    Software:
    Putty, PS, DW, N++, Filezilla, Editor, ID, AI
    Kameratyp:
    Lumix
    Positionierung CSS <div
    AW: Positionierung CSS <div

    Falsch ist es nicht, aber es macht dir die Arbeit früher oder später schwer.
    Und warum nicht gleich die vielleicht etwas schwierigere Technik lernen die
    du aber irgendwann so oder so angehen würdest.

    Warum absolut Positionierung ein Nachteil ist?

    Stell dir mal folgendes Beispiel vor:

    Du hast ein Menü was aufgrund der einzelnen Menüpunkte eine höhe von sagen wir 150px beansprucht (10 punkte a 15px).
    Unter den Menü hast du absolut eine Wetterbox oder eine Bild oder was
    auch immer positioniert.

    Was passiert wenn ich dir aber sage leg einen neuen Menüpunkt an, oder gleich mehrere aber wieviel genau weiß ich nicht. Aber mach halt bitte so
    das ich beliebig viele Menüpunkte anlegen kann.

    Verstehst du was ich meine?

    Wärend du wenn du dich an floats gewöhnt hast und damit layouts umsetzen kannst, layouts sehr "flüßig" gestalten kannst, ist die absolute positionierung sehr statisch und sobald etwas an einer Stelle im layout geändert werden soll (schlimmsten falls im Kopf) kann das Einfluß auf alle
    anderen Elemente haben.

    Ändere einfach mal ein paar werte (top, left, height) in deinem letzten Beispiel. Und du verstehst vielleicht besser was ich meine.

    Hast du denn die Kommentierung in der CSS alle soweit verstanden?
     
    #10      
x
×
×
teststefan