kostenloser Webspace werbefrei: lima-city


Nebeneinander ?

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    yugato

    Kostenloser Webspace von yugato, auf Homepage erstellen warten

    yugato hat kostenlosen Webspace.

    Ich habe versucht 2 Objekte auf meiner Seite nebeneinander zu Platzieren, habe es mit float versucht nur werden diese "Schief" angezeigt.

    Meine Website www.yugato.de

    Die Elemte die ich nebeneinader haben möchte sind

    Partner und User des Monats

    Hoffentlich habe ich mich verständlcih ausgedrückt.

    Beitrag zuletzt geändert: 7.2.2010 19:02:47 von yugato
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Du musst beiden "Objekten" (ich gehe mal von div-Elementen aus) float:left; geben.
    Dann funktioniert das auch.
  4. yugato schrieb:
    Ich habe versucht 2 Objekte auf meiner Seite nebeneinander zu Platzieren, habe es mit float versucht nur werden diese "Schief" angezeigt.

    Meine Website www.yugato.de

    Die Elemte die ich nebeneinader haben möchte sind

    Partner und User des Monats

    Hoffentlich habe ich mich verständlcih ausgedrückt.


    Gib " User des Monats" eine andere ID und "style="float: left;"

    "Partner" und "User des Monats" haben beide dieselbe ID (trow4)

    so sieht das aus wenn ich die id zu "trow5" ändere & ein style="float: left;" hinzufüge.
    Musst also dann noch die restlichen css-attribute einfügen.
    Bzw wäre sowieso besser wenn du ein "class"-namen vergibst anstatt über die id zu arbeiten.

    .headerboxen {blabla}
    </style>
    </head>
    <bod>
    <div class="headerboxen"></div>



    Beitrag zuletzt geändert: 7.2.2010 19:22:32 von simuliertes
  5. Autor dieses Themas

    yugato

    Kostenloser Webspace von yugato, auf Homepage erstellen warten

    yugato hat kostenlosen Webspace.

    simuliertes schrieb:
    yugato schrieb:
    Ich habe versucht 2 Objekte auf meiner Seite nebeneinander zu Platzieren, habe es mit float versucht nur werden diese "Schief" angezeigt.

    Meine Website www.yugato.de

    Die Elemte die ich nebeneinader haben möchte sind

    Partner und User des Monats

    Hoffentlich habe ich mich verständlcih ausgedrückt.


    Gib " User des Monats" eine andere ID und "style="float: left;"

    "Partner" und "User des Monats" haben beide dieselbe ID (trow4)

    so sieht das aus wenn ich die id zu "trow5" ändere & ein style="float: left;" hinzufüge.
    Musst also dann noch die restlichen css-attribute einfügen.
    Bzw wäre sowieso besser wenn du ein "class"-namen vergibst anstatt über die id zu arbeiten.

    .headerboxen {blabla}
    </style>
    </head>
    <bod>
    <div class="headerboxen"></div>




    Ich will nicht das es so aussieht !
    Ich will das die zwei Boxen NEBENEINANDER PLATZIERT sind.
    Habe beide mit float: left; probiert kommt aber wieder dasselbe Ergebnis.

    http://yugato.lima-city.de/images/screen5.png

    Es ist zwar so in der Richtung, nur das die Zwei im Dunkelviolett Bereich sein sollen, dieser ist hier eingerückt.
  6. Float halte ich für eine prinzipiell beschissene Lösung, da dadurch genau der beschriebene Effekt zustande kommt. Versuche es mit "display:inline".

    EDIT
    Korrektur: display:inline-block;

    Beitrag zuletzt geändert: 7.2.2010 21:49:58 von nerdinator
  7. Autor dieses Themas

    yugato

    Kostenloser Webspace von yugato, auf Homepage erstellen warten

    yugato hat kostenlosen Webspace.

    Also display:inline-block; in meine CSS Date an die zwei divs ranhängen ?

    Funktioniert nicht...
    So habe ich es gemacht

    #trow4 {
    background: #6B4668;
            color: #fff;
    border: 1px solid #000;
    height: auto;
    padding: 10px;
    width: 150px;
    display:inline-block;
    
    }
    #trow5 {
    background: #6B4668;
            color: #fff;
    border: 1px solid #000;
    height: auto;
    padding: 10px;
    width: 150px;
    display:inline-block;
    
    }


    <div id="trow4">bla bla</div>
    <div id="trow5">bla bla</div>

    Was ist falsch ?
  8. nerdinator schrieb:
    Float halte ich für eine prinzipiell beschissene Lösung, da dadurch genau der beschriebene Effekt zustande kommt. Versuche es mit "display:inline".

    EDIT
    Korrektur: display:inline-block;

    Die Korrektur kannst du wieder entfernen ;)
    Außerdem ist die CSS-Eigenschaft float dazu da, div-Container auszurichten.
    Die Angabe inline ist korrekt. Inline-block wird von Browsern wie z.B. Internet Explorer nicht korrekt dargestellt.
    Gruß,
    dex
  9. karlsve

    Moderator Kostenloser Webspace von karlsve

    karlsve hat kostenlosen Webspace.

    Du hast da ein <br>-Tag dazwischen den musst du entfernen.
  10. kaetzle7

    Moderator Kostenloser Webspace von kaetzle7

    kaetzle7 hat kostenlosen Webspace.

    Wenn du es so machst, werden beide nebeneinander angezeigt ;-):

    #trow4 {
    -moz-background-clip:border;
    -moz-background-inline-policy:continuous;
    -moz-background-origin:padding;
    -moz-border-radius-bottomleft:10px;
    -moz-border-radius-bottomright:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-topright:10px;
    background:#6B4668 url(http://yugato.lima-city.de/images/perfectbrush3.png) no-repeat fixed right bottom;
    border:1px solid #000000;
    color:#FFFFFF;
    display:inline;
    height:auto;
    padding:10px;
    width:150px;
    float:left;
    }
  11. karlsve

    Moderator Kostenloser Webspace von karlsve

    karlsve hat kostenlosen Webspace.

    Einfachere und bessere lösung:

    ein <br style="clear:both"> vor dem ende des panels einfügen.
    #trow4 {
    background-attachment: fixed;
    background: #6B4668 url(http://yugato.lima-city.de/images/perfectbrush3.png) no-repeat fixed 100% 100%;
    background-image: url(http://yugato.lima-city.de/images/perfectbrush3.png);
    background-position: 100% 100%;
    background-repeat: no-repeat;
    border: 1px solid black;
    color: white;
    display: inline-block;
    height: auto;
    padding: 10px;
    width: 150px;
    float: left;
    }


    und das wars. natürlich noch das <br> zwischen den divs entfernen.

    edit:
    Natürlich noch die ganzen firefox sachen aber die wirken bei anderen browsern ja eh nicht.
    such dir dazu mal die für andere raus. webkit usw.

    Beitrag zuletzt geändert: 8.2.2010 15:00:31 von karlsve
  12. qap2 schrieb:
    nerdinator schrieb:
    Float halte ich für eine prinzipiell beschissene Lösung, da dadurch genau der beschriebene Effekt zustande kommt. Versuche es mit "display:inline".

    EDIT
    Korrektur: display:inline-block;

    Die Korrektur kannst du wieder entfernen ;)
    Außerdem ist die CSS-Eigenschaft float dazu da, div-Container auszurichten.
    Die Angabe inline ist korrekt. Inline-block wird von Browsern wie z.B. Internet Explorer nicht korrekt dargestellt.
    Gruß,
    dex
    Schwachsinn, Float ist für (text)umfluss, für div-positionierung gibt es die display-funktion. :rolleyes:
  13. yugato schrieb:
    Ich will nicht das es so aussieht !
    Ich will das die zwei Boxen NEBENEINANDER PLATZIERT sind.
    Habe beide mit float: left; probiert kommt aber wieder dasselbe Ergebnis.

    http://yugato.lima-city.de/images/screen5.png

    Es ist zwar so in der Richtung, nur das die Zwei im Dunkelviolett Bereich sein sollen, dieser ist hier eingerückt.

    Wenn DU Dir die mühe machen würdest meinen Text auch mal zu lesen dann wüsstest Du das sie NEBENEINANDER PLAZIERT SIND!

    Du willst das es so aussieht?
    Steht alles in meinem Beitrag wie Du es machen musst.
    Übrigens solltest Du Dir mal anschauen wie Deine Seite in anderen Browsern aussieht.
    Nämlich mal so zum Beispiel.

  14. simuliertes schrieb:
    Wenn DU Dir die mühe machen würdest meinen Text auch mal zu lesen dann wüsstest Du das sie NEBENEINANDER PLAZIERT SIND!

    Du willst das es so aussieht?
    Steht alles in meinem Beitrag wie Du es machen musst.
    Übrigens solltest Du Dir mal anschauen wie Deine Seite in anderen Browsern aussieht.
    Nämlich mal so zum Beispiel.


    Wenn DU dir die Mühe machen würdest, seinen Text zu lesen, ist sein Problem, dass bei float:left; die entsprechenden Bereiche nicht mehr im div#panel stehen, bzw. das div#panel annimmt, dass kein inhalt vorhanden ist.

    Die float-Eigenschaft ist nicht zur Div-Positionierung gedacht, sondern wie der Name schon sagt für den Textumfluss zuständig. Diese Funktion zu zweckentfremden, verzerrt die Darstellung nur.

    Deine Antwort war also schlicht falsch.
  15. nerdinator schrieb:
    Wenn DU dir die Mühe machen würdest, seinen Text zu lesen, ist sein Problem, dass bei float:left; die entsprechenden Bereiche nicht mehr im div#panel stehen, bzw. das div#panel annimmt, dass kein inhalt vorhanden ist.

    Die float-Eigenschaft ist nicht zur Div-Positionierung gedacht, sondern wie der Name schon sagt für den Textumfluss zuständig. Diese Funktion zu zweckentfremden, verzerrt die Darstellung nur.

    Deine Antwort war also schlicht falsch.


    selfHTML schrieb:
    Sie können für einen Bereich oder ein Element bestimmen, dass nachfolgende Elemente diesen Bereich bzw. dieses Element umfließen.


    Diese Lösung von mir ist jedenfalls mit float gemacht.
    Da es aber immer mehrere Wege zum Ziel gibt möchte ich mir nicht anmaßen zu sagen das es anders nicht auch geht.

    EDIT:
    Hier kannst Du Dir das ergebnis anschauen.
    einzig geänderte Zeile:
    <div id="trow4" style="float: left;">


    Sollte diese Positionierung nicht dem entsprechen was Yugato wollte oder in irgendeinem Browser nicht so angezeigt werden erhelle mich.



    Beitrag zuletzt geändert: 8.2.2010 15:08:49 von simuliertes
  16. Es bleibt noch immer eine Zweckentfremdung der Funktion.

    Diese Lösung ist auf jeden Fall falsch. Zu dieser Lösung kann ich nichts sagen, da ich den Quellcode nicht sehe.

    Float ist zum Umfluss da. Das hat noch immer so gut wie nichts mit der positionierung zu tun. Mehr dazu irgendwo hier. Mir ist die Diskussion jetzt gerade zu müßig. Fakt ist: Float ist an der Stelle schlicht falsch, selbst wenn es zum gewünschten Ergebnis führt. Basta.
  17. nerdinator schrieb:
    Es bleibt noch immer eine Zweckentfremdung der Funktion.

    Diese Lösung ist auf jeden Fall falsch. Zu dieser Lösung kann ich nichts sagen, da ich den Quellcode nicht sehe.

    Float ist zum Umfluss da. Das hat noch immer so gut wie nichts mit der positionierung zu tun. Mehr dazu irgendwo hier. Mir ist die Diskussion jetzt gerade zu müßig. Fakt ist: Float ist an der Stelle schlicht falsch, selbst wenn es zum gewünschten Ergebnis führt. Basta.


    Thema hat sich eh erledigt, will hier auch keinen Diskussionsthreat draus machen, der Threadersteller doktort anscheinend weiter fröhlich an seiner Seite herum ohne das hier zu lesen.
    nerdinator kann es sein das Du die links vertauscht hast und es genau andersherum meintest ? :biggrin:
    However , selbst mein html-beispiel (das hier ) kann nicht mehr nachvollzogen werden weil ich auf die (nun gelöschte) original css-Datei http://www.yugato.de/fstyle.css verwiesen habe...

    Edit: btw Der eine link von mir (das Bild) war nur ein Screenshot vom anderen Link.


    Beitrag zuletzt geändert: 8.2.2010 16:49:44 von simuliertes
  18. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!