CSS: DIV-Positionierung

Einklappen
Dieses Thema ist geschlossen.
X
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS: DIV-Positionierung

    hi!

    ich würde gerne langsam von tabellen-layouts wegkommen. der folgende screenshot zeigt ein design, das auf tabellen basiert und nun in css "übersetzt" werden soll:



    meine probleme: wie schaff ich es, dass ich blöcke nebeneinander anordnen kann, ohne sie absolut zu positionieren? ich weise auch explizit auf die kleinen zwischenräume zwischen den blöcken hin. wie krieg ich die rein? padding greift in diesem fall ja nur im umgebenden block (oben und unten mit einer schwarzen linie gekennzeichnet).

    wäre zu dank verbunden.
    Angehängte Dateien

  • #2
    für jedes der grauen Vierecke ein div, und dann ist "float" dein Freund
    TBT

    Die zwei wichtigsten Regeln für eine berufliche Karriere:
    1. Verrate niemals alles was du weißt!


    PHP 2 AllPatrizier II Browsergame

    Kommentar


    • #3
      margin und float helfen dir dabei. ;-)

      such mal hier. irgendwo hatte ich zu einem ähnlichen problem bereits eine lösung gepostet gehabt. habe jetzt keine lust, dass noch einmal zu machen.
      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


      • #4
        danke für eure hilfe euch beiden, ich werd mal nach den genannten stichwörtern suchen!

        Kommentar


        • #5
          oh mann, ich komm da einfach nicht weiter. kann mir bitte jemand dabei helfen?

          im moment hab ich das hier und es schaut einfach furchtbar aus:
          Code:
          <?xml version="1.0" encoding="UTF-8"?>
          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
          <title>Testseite</title>
          <style type="text/css">
          <!--
          .posting {
          	position:relative;
          	border-top-width: 1px;
          	border-bottom-width: 1px;
          	border-top-style: solid;
          	border-bottom-style: solid;
          	width: 660px;
          }
          .signature {
          	width: 100px;
          	height: 100%;
          	background-color:#CCCCCC;	
          	float: left;
          }
          .nickname {
          	font-weight: bold;
          }
          .subject {
          	width: 450px;
          	height: 20px;
          	background-color:#DDDDDD;
          	float: left;
          }
          .answer {
          	text-align:center;
          	width: 100px;
          	height: 20px;
          	background-color:#CCCCCC;
          	float: right;
          }
          .text {
          	float: left;
          	padding: 3px;
          }
          -->
          </style>
          </head>
          
          <body>
          <div class="posting">
            <div class="signature"><span class="nickname">Nickname</span></div> 
            <div class="subject">Re: Betreffzeile</div>
            <div class="answer">antworten</div>    
            <div class="text">Hier steht der Postingtext.</div>   
          </div>
          </body>
          </html>
          wie muss ich die einzelnen blöcke ineinander verschachteln, sodass das gesamte aussieht wie im screenshot oben?

          Kommentar


          • #6
            Original geschrieben von php_rookie
            im moment hab ich das hier und es schaut einfach furchtbar aus
            ja, und ob es das tut.

            das ist keine semantisch sinnvoll aufgebaute HTML-seite, sondern einfach nur "tag soup".

            so gut wie jedes beleibige element lässt sich per CSS formatieren - also wieso zum henker klatschst du alles ohne sinn und verstand in divs?
            I don't believe in rebirth. Actually, I never did in my whole lives.

            Kommentar


            • #7
              also wieso zum henker klatschst du alles [...] in divs?
              weil mir das oben empfohlen wurde:
              für jedes der grauen Vierecke ein div, und dann ist "float" dein Freund
              wie kann ich es besser machen?

              Kommentar


              • #8
                schau mal bei CSS4you vorbei - Link ist hier im Forum festgetackert. Da findest du eine ausführliche Erklärung unter der Rubrik Workshops, Boxmodel

                Kommentar


                • #9
                  danke, das hilft mir aber nur bedingt weiter :-(

                  mir gehts mehr um die positionierung der blöcke als die abstände mit padding und margin. die bau ich ein, wenn das grundgerüst erst mal steht.

                  Kommentar


                  • #10
                    Code:
                    <?xml version="1.0" encoding="UTF-8"?>
                    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
                    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
                    <head>
                    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
                    <title>Testseite</title>
                    <style type="text/css">
                    <!--
                    .posting {
                    	position:relative;
                    	border-top-width: 1px;
                    	border-bottom-width: 1px;
                    	border-top-style: solid;
                    	border-bottom-style: solid;
                    	width: 700px;
                    }
                    .signature {
                    	width: 100px;
                    	height: 100%;
                    	background-color:#CCCCCC;	
                    	float: left;
                    	text-align:center;
                    }
                    .nickname {
                    	font-weight: bold;
                    }
                    .subject {
                    	height: 20px;
                    	width:400px;
                    	background-color:#DDDDDD;
                    	float: left;
                    }
                    .answer {
                    	width:100px;
                    	text-align:center;
                    	height: 20px;
                    	background-color:#CCCCCC;
                    	float:left;
                    }
                    .edit {
                    	width:100px;
                    	text-align:center;
                    	height: 20px;
                    	background-color:#CCCCCC;
                    	float: left;
                    }
                    .text {
                    	text-align:left;
                    	padding:3px;
                    	float:none;
                    }
                    .textblock {
                    	width:600px;
                    	float:left;
                    	text-align:left;
                    	}
                    -->
                    </style>
                    </head>
                    <div class="posting">
                    	<div class="signature">
                    		<span class="nickname">Nickname</span>
                    		<img border="1" width="60" height="60" style="vertical-align:middle;"><br>
                    		(12312)
                    	</div>
                      <div class="textblock">
                    		<div class="subject">Subject</div><div class="edit">Editieren</div><div class="answer">Antworten</div><br />
                    		<div  class="text">Hier steht der Postingtext.</div>
                      </div>
                    </div>
                    </body>
                    </html>
                    Hat mich selbst interessiert, deshalb hab ichs ma gemacht

                    Kommentar


                    • #11
                      super, danke! ist schon mal ein guter anfang.

                      leider schaut es nur im ie6 so aus, wie man erwartet. in ff 0.93, opera 5.12 und netscape 6.2 wirkt es verzerrt. opera kapiert die 100% höhenangabe nicht, bei firefox fehlt die untere zeile und netscape stellt das padding nicht richtig dar :-(

                      Kommentar


                      • #12
                        Original geschrieben von php_rookie
                        opera kapiert die 100% höhenangabe nicht
                        nein, vermutlich hast du höhenangaben noch nicht verstanden, und meinst das, was der IE draus macht, wäre richtig ...
                        I don't believe in rebirth. Actually, I never did in my whole lives.

                        Kommentar


                        • #13
                          und meinst das, was der IE draus macht, wäre richtig ...
                          darauf antworte ich jetzt schlichtweg einfach nicht..... *grml* opera ist nicht das gelbe vom ei, das hat sich mehrfach bewiesen. wenn sich ein browser an die w3c-standards hält, dann mozilla bzw. firefox.

                          Kommentar


                          • #14
                            eine gewagte Behauptung ... IMHO hält sich keiner von den Browser richtig dran

                            Kommentar


                            • #15
                              @php_rookie: auf CSS4YOU steht alles was du brauchst - unter Workshops, Boxmodel werden auch divs entsprechend ausgerichtet und positioniert. Vielleicht nicht genau so wie du es brauchst, aber das Prinziep wird erklärt.

                              Zu den einzelnen Eigenschaften wird angegeben welcher Browser was unterstützt und meistens sogar Lösungen ... also mit etwas Aufwand kannst du deine Seite sicher noch optimieren.

                              Kommentar

                              Lädt...
                              X