Anzeige

Div nebeneinander und zentriert

Div nebeneinander und zentriert | PSD-Tutorials.de

Erstellt von BlackHawk3, 10.08.2008.

  1. BlackHawk3

    BlackHawk3 Aktives Mitglied

    1
    Dabei seit:
    28.07.2006
    Beiträge:
    331
    Geschlecht:
    männlich
    Ort:
    Berlin
    Div nebeneinander und zentriert
    hey,
    ich werkle schon ne ganze weile daran rum, aber krieg irgendwie nie was anständiges hin...also mein ziel ist:
    Ich möchte 7 DIV-Boxen (die gesamt 760px breit sind, dh 6 sind 110 und eins is 100), die automatisch zentriert werden, erstellen. In den Boxen soll jeweils ein Bild rein. Und wichtig ist, dass an allen Stellen, es absolut kein durchblick gibt, also margin 0, border 0 und padding 0... . Wenn ich das versuche kommt alles mögliche bei raus nur nicht das, was ich haben möchte^^

    Hat jmd vll einen Lösungsvorschlag?

    mfg
     
    #1      
  2. Tattoomaus78

    Tattoomaus78 nemesis-artgroup.de

    654
    Dabei seit:
    23.08.2005
    Beiträge:
    5.328
    Geschlecht:
    weiblich
    Ort:
    auf und davon
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    poste mal bitte deinen bisherigen code & eine skizze/screenshot von dem wie es aussehen soll
     
    #2      
  3. BlackHawk3

    BlackHawk3 Aktives Mitglied

    1
    Dabei seit:
    28.07.2006
    Beiträge:
    331
    Geschlecht:
    männlich
    Ort:
    Berlin
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    [​IMG]

    und ein queltext für den gelben part habe ich noch nicht...hatte es mit width,height, float und text-align probiert....war aber ein totaler flop, darum hatte ich das nich gespeichert
     
    #3      
  4. augentier

    augentier ...neu

    Dabei seit:
    29.07.2006
    Beiträge:
    396
    Geschlecht:
    männlich
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    Das ist etwas komplizierter, geht aber.
    Du brauchst ein Container der zentriert ist und darin kommen deine 7 Boxe:

    HTML:
    1.  
    2. <div id="container">
    3.  <div id="box1"><img /></div>
    4.  <div id="box2"><img /></div>
    5.  <div id="box3"><img /></div>
    6.  <div id="box4"><img /></div>
    7.  <div id="box5"><img /></div>
    8.  <div id="box6"><img /></div>
    9.  <div id="box7"><img /></div>
    10. </div>
    11.  
    CSS:
    Code (Text):
    1.  
    2. #container {
    3.  width: 760px;
    4.  height: 20px;
    5.  margin: 0 auto; /*Damit zentrierst du den Container*/
    6. }
    7. #container div {  /*Damit werden alle Divs im Container angesprochen*/
    8.  float: left; /*wichtig, dass die Divs nebeneinander sind*/
    9.  margin: 0;
    10.  padding: 0;
    11. }
    12. #box1, #box2, #box3, #box4, #box5, #box6 {
    13.  width: 110px;
    14.  height: 20px;
    15. }
    16. box7 {
    17.  widht: 100px;
    18.  height: 20px;
    19. }
    20.  
    hab's nicht getestet sollte aber funktionierne.

    Noch ein paar Links, falls du sie noch nicht kennst:
    SELFHTML 8.1.2 (HTML-Dateien selbst erstellen)
    CSS 4 You - The Finest in Stylesheets
    CSS 4 You - The Finest in Stylesheets: Workshops
     
    #4      
  5. BlackHawk3

    BlackHawk3 Aktives Mitglied

    1
    Dabei seit:
    28.07.2006
    Beiträge:
    331
    Geschlecht:
    männlich
    Ort:
    Berlin
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    oha... danke schön...das sieht sehr einleuchtent aus :) werd das nachher gleich ma testen =)
     
    #5      
  6. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    falls noch links auf die Bilder gelegt werden zerreisst es das design, weil noch die border-width für die Bilder dazuzkämen, also im css:
    Code (Text):
    1.  
    2. * {
    3.    margin:0;
    4.    padding: 0;
    5. }
    6. #container img{
    7.    border: 0 none;
    8. }
    9.  
    am anfang der css notieren
     
    #6      
  7. cerialkiller

    cerialkiller Lord of the Board

    Dabei seit:
    03.07.2008
    Beiträge:
    103
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    Die Frage ist, warum denn überhaupt DIV's?
    Warum nicht nur ein DIV und darin ne Tabelle?
    Hat das irgendeinen bestimmten Grund?
    Mit ner Tabelle wäre es meiner Meinung nach wesentlich einfacher.^^
     
    #7      
  8. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    Wäre aber keine Lösung, die im Forum HTML/CSS an der richtigen Stelle wäre.
    HTML ist ja eine Auszeichnungssprache, die als Hauptaufgabe das Dokument(die Webseite) logisch beschreibt. Da sieben Bilder in einem HTML Dokument im logischen Sinn gar nichts mit einer tabellarischen Präsentation zu tun haben ist diese Lösung einfach unangebracht.
    Zudem würde man in einer Tabelle die sieben Bilder auf 7 Spalten verteilen müssen, wo sie von der Logik doch in eine Spalte gehören würden.

    In diesem Fall mag die Tabelle zunächst erst einmal als die einfachere Lösung erscheinen, aber den Sinn von HTML würde das nicht treffen.

    am einfachsten wäre in etwa diese Lösung:

    Code (Text):
    1.  
    2. <div>
    3.   <img src="bild1.jpg">
    4.   <img src="bild2.jpg">
    5.   <img src="bild3.jpg">
    6.   <img src="bild4.jpg">
    7.   <img src="bild5.jpg">
    8.   <img src="bild6.jpg">
    9.   <img src="bild7.jpg">
    10. </div>
    11.  
    Code (Text):
    1.  
    2.   img{
    3.   float:left;
    4.   border: 0 none;
    5. }
    6.  
    ich denke nicht,dass man da mit einer Tabellenkonstruktion eine Vereinfachung erreichen könnte.
     
    #8      
  9. cerialkiller

    cerialkiller Lord of the Board

    Dabei seit:
    03.07.2008
    Beiträge:
    103
    Geschlecht:
    männlich
    Software:
    Adobe Photoshop CS3
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    Naja, ob eine Tabelle nun eine schöne, HTML-Konforme Lösung ist oder nicht sei mal dahingestellt. Aber wenn einen das nicht weiter stört, ist es die einfachste Möglichkeit. Zumal man auch noch Rahmendicke und Zelleninnenabstand nach belieben anpassen kann.

    Deswegen hab ich auch gefragt, warum man es unbedingt mit DIV's machen muss. Wenn es z. B. mit einer Tabelle das Design verhagelt, kann mans ja von vornherein vergessen.^^
    Wobei, wenn die Tabelle innerhalb eines DIVs liegt, dann dürfte da eigentlich nix passieren. :D

    Ahh, egal. Ich arbeite einfach gerne mit Tabellen, auch wenns teilweise schon obsolet ist.^^
     
    #9      
  10. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert


    Nein wäre sie nicht ;)



    Die einfachste Lösung wäre dem div ne feste Breite (Summe aller Bildbreiten) zuzuordnen und dann einfach die Bilder einzusetzen (wenn es wirklich nur Bilder sind), denn der Inhalt (was Bilder ja nun mal sind) geht soweit nach rechts, wie Platz ist...

    css
    Code (Text):
    1.  
    2. #container {
    3.  width: 760px;
    4.  height: 20px;
    5.  margin: 0 auto; /*Damit zentrierst du den Container*/
    6. }
    7.  
    8.  
    9. #container img {
    10. border:0;
    11. padding:0;
    12. }
    13.  
    14. #container img.one {
    15.  width: 110px;
    16.  height: 20px;
    17. }
    18. #container img.two {
    19.  widht: 100px;
    20.  height: 20px;
    21. }
    22.  
    html
    HTML:
    1.  
    2. <div id="container"><img src="bild1.jpg" class="one" alt="text"><img src="bild2.jpg" class="one" alt="text"><img src="bild3.jpg" class="one" alt="text"><img src="bild4.jpg" class="one" alt="text"><img src="bild5.jpg" class="one" alt="text"><img src="bild6.jpg" class="one" alt="text"><img src="bild7.jpg" class="two" alt="text"></div>
    3.  
     
    #10      
  11. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert


    Entweder du formatierst alles in css oder nichts... so halb css und altes html ist ja nicht im Sinne des Erfinders ;-) und einfach(er) auch nicht...




    Die Frage ist allerdings, ob der Threadstarter mit unser Klugscheißerei überhaupt noch was anfangen kann...
     
    #11      
  12. BlackHawk3

    BlackHawk3 Aktives Mitglied

    1
    Dabei seit:
    28.07.2006
    Beiträge:
    331
    Geschlecht:
    männlich
    Ort:
    Berlin
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    omg ist man mal 24 stunden nich uptodate gerät ja hier alles aus den fugen :D

    also ich hab die seite beim erstenmal in einer tabelle gemacht... aber das ist doof wenn dir SEO was sagt...darum gleich nur css ;)

    und jetzt werd ich es erstmal in ruhe durchprobieren.... anlass es so zumachen ist übrigens ein firefox bug....
     
    #12      
  13. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    welcher bug macht es notwendig Tabellen zu benutzen?

    Kannst Du Dir in etwa vorstellen,wie die Bilder aussehen, wenn Du sie per Formatierung auf das entsprechende Mass bringst? :-D
    Ich war davon ausgegangen, dass man natürlich die Grafiken auf das Mass bringt, welches man auch am Ende benötigt.
    und die Lösung ist wirklich so simpel wie beschrieben.
    http://twoiback.de/PSD/7Bilder/
     
    #13      
  14. BlackHawk3

    BlackHawk3 Aktives Mitglied

    1
    Dabei seit:
    28.07.2006
    Beiträge:
    331
    Geschlecht:
    männlich
    Ort:
    Berlin
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    häää nein... das ich auf tabellen verzichte (mal davon abgesehn das css professioneller ist) liegt am SEO... und das ich auf die 7boxen zurückgreifen muss liegt an dem bug... im IE wirds richtig angezeigt und im FF is die seite dadurch gesprengt.... und im mom klappt gar nichts mehr^^ muss glaube dadurch meinen kompletten css code umändern :D:D:D
     
    #14      
  15. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.555
    Geschlecht:
    männlich
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert


    Du denkst inzwischen zu viel um die Ecke besser gesagt ums float... um Bilder nebeneinander anzuordnen, muß man sie nicht floaten, sie ordnen sich ganz allein nebeneinander an (wenn genug Platz da ist)


    Ich habe die Bilder nicht auf ein Maß gebracht, sondern bin davon ausgegangen, dass sie so groß sind (erster Post) Die Maßangaben sind nur der Vollständigkeit halber (falls die Bilder nicht angezeigt werden können)... wenn sie die Größe so haben, dann kann man sich sogar die Angaben per css sparen


    guckst du:

    http://whaa.de/quickstep/7Bilder.htm
     
    #15      
  16. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    lol:D
    jau, da war ich zu sehr mit den floats beschäftigt. stimmt, auch die sind überflüssig*g*
    war ja auch schon etwas offtopic (die frage eingangs war ja nach den 7 divs...)
    Ich war es nur leid zu lesen, dass Tabellen es leichter machen, und wenn man den code mal vergleicht (zumal nach deiner letzten bereinigung) kommt auch der letzte zu dem Schluss, dass das ein Trugschluss ist.

    wenn etwas im IE "Richtig" angezeigt wird, und in anderen Browsern anders, heisst das nicht, dass die anderen Browser einen Bug haben*fg*
     
    #16      
  17. 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
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    An sich müsste man die Argumentation von der anderen Seite angehen ... wenn etwas nur im IE richtig anzeigt wird zeigt das dass man Fehler im CSS oder Quelltext hat oder mit dem falschen Browser entwickelt.

    Die richtige Äußerung eines Hilfesuchenden sollte also eigentlich lauten

    "Im FF wird richtig angezeigt aber im IE siehts scheiße aus."

    Denn erst wenn man es im FF richtig hinbekommen hat (und damit für wahrscheinlich 90% aller anderen Browser) geht man daran die Fehler des IE zu beseitigen.
     
    #17      
  18. BlackHawk3

    BlackHawk3 Aktives Mitglied

    1
    Dabei seit:
    28.07.2006
    Beiträge:
    331
    Geschlecht:
    männlich
    Ort:
    Berlin
    Div nebeneinander und zentriert
    AW: Div nebeneinander und zentriert

    okay das ist schön zu hören.... ich hasse nämlich den IE ^^
    in den meisten fällen ist das nämlich so, dass es in FF schick ist und im IE nicht...^^
    aber wenn wir gerade schonmal dabei sind... mit welchen css tag kriege ich oben den rand weg.... also quasi zwischen banner und browsertaps^^ sry könnte nachgucken bin aber gerade zu faul, weil schon halb 2 :D:D:D

    übrigens... danke schön, das mit den Divs hat jetzt geklappt :)
     
    Zuletzt bearbeitet: 15.08.2008
    #18      
x
×
×
teststefan