Design mit DIV und CSS

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Design mit DIV und CSS

    hi leute,

    ich habe so einige Probleme mit dem Layout erstellen mittels DIV und CSS.

    800 px breit -> geschafft
    header und footer richtig anzeigen -> geschafft
    navigation und content richtig anzeigen -> gescheitert

    Code:
    <div id="container" align="center">
    	<div id="rahmen">
    		<div id="head">header</div>
    		<div id="navi">navigation</div>
    		<div id="content">content</div>
    		<div id="foot">footer</div>
    	</div>
    </div>
    Code:
    #container {
    	text-align:left;
    	width:800px;
    	margin:0px auto;
    }
    
    #rahmen {
    	border:1px #808080 solid;
    	margin:10px,10px,10px,10px;
    }
    
    #head {
    	padding:5px;
    	margin-top:12px;
    	border:1px #808080 solid;
    	background-color:#E8E8E8;
    }
    
    #foot {
    	padding:5px;
    	margin-bottom:12px;
    	border:1px #808080 solid;
    	background-color:#E8E8E8;
    }
    
    #navi {
    	width:100px;
    	float:left;
    	border:1px #808080 solid;
    	background-color:#E8E8E8;
    }
    
    #content {
    	float:right;
    	margin-left:120px;
    	border:1px #808080 solid;
    	background-color:#E8E8E8;
    }
    http://anime-naruto.dyndns.org/web/websites/private/

    Code:
    --------------------------------------------------------------------------
    |                                                                                          |
    |  --------------------------------------------------------------------   |
    |  |           HEADER                                                            |  |
    |  --------------------------------------------------------------------   |
    |                                                                                          |
    |  --------    ---------------------------------------------------------   |
    |  | navi |   | content                                                         |  |
    |  |        |   |                                                                      |  |
    |  |        |   |                                                                      |  |
    |  |        |   |                                                                      |  |
    |  --------    ---------------------------------------------------------   |
    |                                                                                          |
    |  --------------------------------------------------------------------   |
    |  |           footer                                                               |  |
    |  --------------------------------------------------------------------   |
    |                                                                                          |
    --------------------------------------------------------------------------
    ich würde gerne auf absolute positionen verzichten .. weiß jemand WO mein problem liegt?

    habe mir auch schon andere webseiten angeguckt (auch http://www.css4you.de/ )
    Gruß
    Uzu

    private Homepage

  • #2
    schau dir mal das hier. da wird alles erklärt.

    peter
    Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
    Meine Seite

    Kommentar


    • #3
      Original geschrieben von Kropff
      schau dir mal das hier. da wird alles erklärt.

      peter
      Danke Peter,
      nebeneinander sind sie jetzt.
      Nur wie bekomme ich jetzt die navi und den inhalt ZWISCHEN header und footer?

      #navi
      float:left;

      #content
      float:left;

      beide nebeneinander

      entferne ich bei navi float:left; sind sie nicht mehr nebeneinander .. ABER zwischen header und footer.

      Dieses ist aktuell auf der Webseite anzusehen.
      Gruß
      Uzu

      private Homepage

      Kommentar


      • #4
        Könntest du deine neue Version bitte uppen?

        ..oder ist die bereits drauf und wird bei mir im Firefox nur falsch angezeigt?

        Edit:

        float -> fließt...
        Wenn du float:left sagst, dann fließen beide links an etwas vorbei...
        -> float: right / left...

        und dir fehlt ganz klar ein clear:both;

        mfg

        Kommentar


        • #5
          Original geschrieben von Blackgreetz
          Könntest du deine neue Version bitte uppen?

          ..oder ist die bereits drauf und wird bei mir im Firefox nur falsch angezeigt?

          Edit:

          float -> fließt...
          Wenn du float:left sagst, dann fließen beide links an etwas vorbei...
          -> float: right / left...

          und dir fehlt ganz klar ein clear:both;

          mfg
          danke black
          das clear:both in footer war das was mir die lösung brachte
          uppen muss ich nichts .. ich arbeite direkt auf dem server ;-) oder besser gesagt du guckst auf meinen server der neben mir steht

          jetzt habe ich nur noch das problem, das der footer direkt an den inhalt anschließt, OBWOHL in in #footer
          Code:
          margin-top:10px;
          drinne habe

          aber er bezieht das auf GANZ oben .. und nicht auf das element das über ihm ist.
          ist dort was zu beachten?

          Code:
          #container {
          	text-align:left;
          	width:800px;
          	margin:0px auto;
          }
          
          #rahmen {
          	border:1px #808080 solid;
          	background-color:#C8C8C8;
          }
          
          #head {
          	width:95%;
          	padding:5px;
          	margin-top:10px;
          	margin-bottom:10px;
          	border:1px #808080 solid;
          	background-color:#E8E8E8;
          }
          
          #foot {
          	clear:both;
          	width:95%;
          	padding:5px;
          	margin-top:10px;
          	margin-bottom:10px;
          	border:1px #808080 solid;
          	background-color:#E8E8E8;
          }
          
          #navi {
          	float:left;
          	width:100px;
          	margin-left:14px;
          	border:1px #808080 solid;
          	background-color:#E8E8E8;
          }
          
          #content {
          	width:660px;
          	float:left;
          	margin-left:6px;
          	border:1px #808080 solid;
          	background-color:#E8E8E8;
          }
          Gruß
          Uzu

          private Homepage

          Kommentar


          • #6
            ein clear: both hat er im footer drin. ist also richtig. btw: sieht doch schon ganz ok aus. im ie 6 scheint noch der double-margin-bug eingeschlichen zu haben, aber ansonsten sieht es doch ganz gut aus.

            gruß
            peter

            EDIT:
            da war ich wohl zu langsam

            zu deinem problem. verpass navi und content ein margin-bottom:10px;. dann müsste es klappen.
            Zuletzt geändert von Kropff; 18.06.2008, 20:44.
            Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
            Meine Seite

            Kommentar


            • #7
              Original geschrieben von Kropff
              ein clear: both hat er im footer drin. ist also richtig. btw: sieht doch schon ganz ok aus. im ie 6 scheint noch der double-margin-bug eingeschlichen zu haben, aber ansonsten sieht es doch ganz gut aus.

              gruß
              peter

              EDIT:
              da war ich wohl zu langsam

              zu deinem problem. verpass navi und content ein margin-bottom:10px;. dann müsste es klappen.
              thx ... auch wenn ich ungerne BEIDEN diese option mitgebe .. naja ... divs sind eben anders als tabellen.

              wäre es möglich mir ein screen-shot vom problem aus dem ie zu senden?
              debian oder suse sind dem nicht sehr zugetan
              Gruß
              Uzu

              private Homepage

              Kommentar


              • #8
                hier ist er. obgleich mal ohne den ie6 eigentlich keine seiten entwickeln sollte.

                peter
                Angehängte Dateien
                Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                Meine Seite

                Kommentar


                • #9
                  tipp: http://browsershots.org/ ,-)
                  INFO: Erst suchen, dann posten![color=red] | [/color]MANUAL(s): PHP | MySQL | HTML/JS/CSS[color=red] | [/color]NICE: GNOME Do | TESTS: Gästebuch[color=red] | [/color]IM: Jabber.org |


                  Kommentar


                  • #10
                    Original geschrieben von Abraxax
                    tipp: http://browsershots.org/ ,-)
                    die seite ist ja gold wert

                    ---

                    thx peter
                    Gruß
                    Uzu

                    private Homepage

                    Kommentar


                    • #11
                      jetzt komme ich zu einem neuen problem.

                      ich möchte jetzt gerne unter der navigation noch einen block einfügen.
                      soweit kein problem

                      Code:
                      <div id="container">
                      
                         <div id="rahmen" align="center">
                      
                            <div id="head">{header}</div>
                            <div id="navi">{navi}</div>
                            <div id="cert">{cert}</div>
                            <div id="content"></div>
                            <div id="foot">{footer}</div>
                      
                         </div>
                      
                      </div>
                      wird der content neben cert angezeigt

                      Code:
                      <div id="container">
                         <div id="rahmen" align="center">
                            <div id="head">{header}</div>
                            <div id="navi">{navi}</div>      		
                            <div id="cert">{cert}</div>		
                            <div id="content"></div>	
                            <div id="foot">{footer}</div>
                         </div>
                      </div>
                      wandert cert mit, sobald content länger wird.

                      habt ihr eine lösung für das problem?

                      habe auch schon versucht navi und cert in ein div zu schachteln, brachte aber auch nichts
                      Gruß
                      Uzu

                      private Homepage

                      Kommentar


                      • #12
                        habe auch schon versucht navi und cert in ein div zu schachteln, brachte aber auch nichts
                        das sollte aber der richtige weg sein. wie sieht der versuch aus?

                        peter
                        Nukular, das Wort ist N-u-k-u-l-a-r (Homer Simpson)
                        Meine Seite

                        Kommentar


                        • #13
                          Original geschrieben von Kropff
                          das sollte aber der richtige weg sein. wie sieht der versuch aus?

                          peter
                          Code:
                          <div id="container">
                             <div id="rahmen" align="center">
                                <div id="head">{header}</div>
                                <div>
                                   <div id="navi">{navi}</div>      		
                                   <div id="cert">{cert}</div>		
                                </div>
                                <div id="content"></div>	
                                <div id="foot">{footer}</div>
                             </div>
                          </div>
                          Gruß
                          Uzu

                          private Homepage

                          Kommentar


                          • #14
                            funkt jetzt

                            aus #navi und #vert habe ich float:left; entfernt
                            und der "schachtel" habe ich dann float:left; gegeben.

                            Code:
                            <div id="container">
                            
                               <div id="rahmen" align="center">
                            
                                  <div id="head">{header}</div>
                                  <div id="left-side">
                                     <div id="navi">{navi}</div>
                                     <div id="cert">{cert}</div>      
                                  </div>      
                                  <div id="content"></div>
                                  <div id="foot">{footer}</div>
                            
                               </div>
                            
                            </div>
                            Gruß
                            Uzu

                            private Homepage

                            Kommentar


                            • #15
                              hi,

                              da ich validierten quellcode schreiben möchte, kann ich div ids nicht erneut verwenden.

                              aber jetzt habe ich das "problem", das ich auf diese methode zurückgreifen müsste, wenn ich meine css datei kurz und übersichtlich halten möchte.

                              ich habe eine navigation in verschiedene blöcke unterteilt und jetzt möchte ich für alle blöcke ein einheitliches aussehen haben.

                              Code:
                              |----------------|
                              |  BLOCK-TITEL   |
                              |----------------|
                              |  BlOCK-INHALT  |
                              |                |
                              |----------------|
                              gibt es da irgendeine möglichkeit dafür, das die blöcke immer einen gleichen aufbau haben, ohne alles "neu" zu erstellen?

                              css
                              Code:
                              #block_navi {
                                 color: #000;
                                 width:130px;
                                 margin-left:19px;
                                 margin-bottom:10px;
                                 border:1px #808080 solid;
                                 background-color:#E8E8E8;
                              }
                              
                              #block_navi_title {
                                 color: #FFF;
                                 font-weight:bold;
                                 background-color:#81848B;
                                 padding: 5px;
                              }
                              
                              #block_navi_content {
                                 padding: 5px;
                              }
                              
                              #block_login {
                                 color: #000;
                                 width:130px;
                                 margin-left:19px;
                                 margin-bottom:10px;
                                 border:1px #808080 solid;
                                 background-color:#E8E8E8;
                              }
                              
                              #block_login_title {
                                 color: #FFF;
                                 font-weight:bold;
                                 background-color:#81848B;
                                 padding: 5px;
                              }
                              
                              #block_login_content {
                                 padding: 5px;
                              }
                              html
                              Code:
                              <div id="left-side">
                                 <div id="block_navi" align="left">
                                    <div id="block_navi_title">Navigation</div>
                                    <div id="block_navi_content">
                                       [...]
                                    </div>
                                 </div>
                                 <div id="block_login" align="left">
                                    <div id="block_login_title">Login</div>
                                    <div id="block_login_content">
                                       [...]
                                    </div>
                                 </div>
                              </div>
                              Gruß
                              Uzu

                              private Homepage

                              Kommentar

                              Lädt...
                              X