kostenloser Webspace werbefrei: lima-city


[CSS] Bild nach oben verschieben

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    nilsmargotti

    Kostenloser Webspace von nilsmargotti

    nilsmargotti hat kostenlosen Webspace.

    Ich möchte auf dieser Seite[http://nilsmargotti.lima-city.de/images.php] das Bild auf der gleichen Höhe haben wie die Text-box das ganze sollte mit
    position: relative;

    funktionierne weil ansonsten sollte ich mehr Bilder reinstelle der große Rahmen (grau) nicht mitwächst.
    ich habe es schon mit
    top: -145px;

    versucht aber sobald ich noch eine Textbox hinklatsche ist das bild wieder zu weit unten.
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

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

  3. karlsve

    Moderator Kostenloser Webspace von karlsve

    karlsve hat kostenlosen Webspace.

    Hey,
    versuch es doch simpler mit einem

    float: left;

    bei dem Text und einem

    float: right;

    Abschließend dann noch ein

    <br class="clear" />

    und im CSS ein

    .clear {
    clear: both;
    }


    Edit:
    und deine Farbwahl ist sehr extravagant (Tut mir in den Augen weh)

    Beitrag zuletzt geändert: 5.5.2012 13:51:08 von karlsve
  4. Außerdem evtl das Bild und den Text in den gleichen Container packen
  5. Autor dieses Themas

    nilsmargotti

    Kostenloser Webspace von nilsmargotti

    nilsmargotti hat kostenlosen Webspace.

    Funktioniert leider nicht
  6. Ich möchte noch anmerken, dass deine Seite erstmal wirklich Augenkrebs verursacht! Außerdem solltest du auf javascript bei so einfahc dingen wie dem Menü oder dem Auskpalppen verzichten, jemand mit deaktivierten JAvascript guckt in die Röhre.

    Das geht 100%
    HTML+
    CSS
    <!DOCTYPE html>
    <html>
    
    <head>
        <title>Titel</title>
    
        <meta charset="UTF-8">
        <meta name="description" content="">
        <meta name="author" content="">
        <meta name="keywords" content="">
        <style>
        .container{
            padding: 10px 10px 10px 10px;
            margin: 1em;
            width:500px;
            height:auto;
            background-color: #c0c0c0;
    }
    .text{
         width:280px;
        height:auto;
        float:left;
    }
    .imgs{
        width:180px;
    
        float:right;
    
    }
    .clear{
      clear:both;
    }</style>
    </head>
    
    <body>
      <div class="container" >
            <div class="text">
            <h3>Hallo</h3>
            <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore </p>
           </div>
           <div class="imgs">
            <img src="http://lorempixel.com/output/abstract-q-c-200-200-1.jpg" alt="">
           </div>
          <br class="clear">
    </div>
    </body>
    </html>

  7. 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!