Positionierung von Bildern und Text mit css

Diskutiere mit über: Positionierung von Bildern und Text mit css im Web Page Design Forum

  1. minbo

    minbo Thread Starter MacUser Mitglied

    Beiträge:
    1.168
    Zustimmungen:
    1
    Registriert seit:
    30.05.2003
    Ich möchte zwei Bilder nebeneinander haben und rechts daneben einen Text.
    Bei einer Tabelle würde ich eine dreispaltige erstellen und einfach die Bilder und den Text in jeweils eine Spalte einfügen, soweit ich weiss geht es auch mit css, aber wie?
    Kann jemand auf die schnelle mal was runtertippen, dass ich übernehmen kann?
    edit: Es soll so ähnlich sein wie hier
    danke
     
    Zuletzt bearbeitet: 02.01.2005
  2. schildkroeter

    schildkroeter MacUser Mitglied

    Beiträge:
    1.771
    Zustimmungen:
    15
    Registriert seit:
    26.12.2004
    Such doch mal im Quelltext von der Seite, wie die das da gemacht haben, und filter das heraus was du brauchen kannst...
    Das ist ja kein Bild, dann werden die das wahrscheinlich auch mit CSS gemacht haben!

    MfG, Jonny
     
  3. Faser

    Faser MacUser Mitglied

    Beiträge:
    1.012
    Zustimmungen:
    0
    Registriert seit:
    20.08.2003
    Hallo,

    ich würde es ersteinmal so probieren: Die beiden Bilder solltest du problemlos nebeneinander setzen können (also im Code einfach ohne Abtrennung untereinander schreiben), da "img" eigentlich ein Inline-Element ist. Wenn das nicht funktioniert musst du eins aus denen machen (das geht mit "display: inline;" in der CSS bzw. im style-Atrribut).

    Anschließend machst du eine "div"-Box auf und definierst sie mit "float: right;", was den gleichen Effekt hat, wie wenn du bei einem Bild 'align="right"' angibst.

    Habe es jetzt nicht getestet, aber prinzipiell sollte es so funktionieren.
     
  4. Nickless

    Nickless Gast

    <img> Kann definitiv nebeneinander gesetzt werden. Von float kann ich nur abraten. Bringt immer Probleme mit sich. Es gibt jede Menge andere Möglichkeiten: statt den <div>'s lieber <span> Container z.B., die Du wie Deinen Tabellenzellen verwenden kannst. Oder wie in Deinem Beispiel feste bzw. relative Positionierung der <div>'s (mit CSS style="position:relative; top:100px; left:300px") per CSS. Ganz altmodisch wäre das align-Attribut im <img> Tag (<img align="right">) Dann windet sich der Text um das rechts angeordnete Bild. Sieht aber nie so aus, wie man es will.
     
  5. minbo

    minbo Thread Starter MacUser Mitglied

    Beiträge:
    1.168
    Zustimmungen:
    1
    Registriert seit:
    30.05.2003
    Es klappt bei mir nicht, der Text wird entweder über die Bilder gelegt oder darunter.
    <div><div style="position: relative;left:0;">bilder</div><div style="position: relative;left:100;">text</div></div>
    der Text wird nicht rechts neben den Bildern gelegt, sondern eine Zeile drunter.
    Ich muss die beiden Bilder rechts nebeneinander haben und den Text rechts daneben.
     
  6. Nickless

    Nickless Gast

    Zeige bitte mal den vollständigen Code.

    Du meinst die Bilder links und den Text rechts oder?
     
  7. minbo

    minbo Thread Starter MacUser Mitglied

    Beiträge:
    1.168
    Zustimmungen:
    1
    Registriert seit:
    30.05.2003
    ok gerne,
    bedenke bitte, das ich eigentlich gar keine Ahnung davon habe und alles zusammen gewürfelt und für mich geändert habe.
    der html-teil
    PHP:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
    >
    <
    html lang="de">
    <
    head>
    <
    title>W&auml;rmelehre</title>
    <
    meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
    <
    meta http-equiv="Content-Style-Type" content="text/css" />
    <
    link rel="stylesheet" type="text/css" href="main.css" />
    <
    style type="text/css">
    <!--
    @
    import url(main.css);
    -->
    </
    style>
    </
    head>
    <
    body>
    <
    div id="container">
    <
    div id="head">
        <
    center>
            <
    h2>Überschrift </h2>
        </
    center>
    </
    div>
    <
    div id="menu">
    <
    ul>
        <
    li><a href="index.htm">Wärmelehre</a></li>
        <
    li><a href="Energie.htm">Was ist Energie</a></li>
        <
    li><a href="#">W&auml;rmen K&uuml;hlen</a></li>
        <
    li><a href="#">Messverfahren</a></li>    
        <
    li><a href="Kraftwerk.htm">Kraftwerk Mensch</a>
    </
    ul>
    </
    div>

    <
    div id="submenu">
    <
    ul>
        <
    li>&nbsp;<a href="energiearten.htm">Energieformen</a></li>
        <
    li>&nbsp;<a href="eumwandlung.htm">Energieumwandlung</a></li>
        <
    li>&nbsp;<a href="eeinheiten.htm">Energieeinheit</a></li>
    </
    ul>
    </
    div>

    <
    div id="content">
    <
    h1>Überschrift 2 </h1>
            <
    div style="position:absolute; top: 230;left:0">
              <
    img src="bilder/eschoko.jpg">&nbsp;<img src="bilder/ewasser.jpg">
            </
    div>
              <
    div style="position: absolute; top:160px; left:310px;">
                <
    p>text</p>
        </
    div>
    </
    div>
    <
    center>
      </
    p>
    </
    center>
    <
    b></b></div>
    <
    div id="foot">
    <
    p>Impressum</p>
    </
    div>

    </
    div>
    </
    body>
    </
    html>
    und der css-teil
    PHP:
    body{
        
    color:black;
        
    background:#E3E2DC;
        
    font:13px verdanasans-serif;
        
    margin:0px 0px 0px 0px;
    }


    #container{
        
    background:#C4C4C1;
        
    padding:0;
        
    margin:0000%;
    }

    #container head{
        
    text-align:center;
    }


    #container h2{
        
    margin-top:0px;
        
    padding-top:5px;
    }

    #head{
        
    height:60px;
        
    background:#A6A6A3;
    }


    #menu{
        
    margin:0;
        
    padding:0;
        
    border-top:1px solid white;
        
    border-bottom:1px solid black;
        
    text-align:center;
    }

    #menu ul{
        
    background:#003366;
        
    margin:0;
        
    padding:5px;
        list-
    style:none;
        
    white-spacenowrap;
    }
    #menu li{
        
    display:inline;
    }

    #menu a{
        
    color:#ffffff;
        
    background:#84847F;
        
    padding:2px 20px 2px 20px;
        
    border:1px solid black;
        
    font:bold 12px verdanasans-serif;
        
    text-decoration:none;
        
    text-align:center;
    }

    #menu a:hover{
        
    color:#84847F;
        
    background:#ffffff;
        
    text-decoration:underline;
    }

    #menu a:active {
        
    color:#84847F;
        
    background:#ffffff;
         
    }
    #submenu{
        
    margin:0;
        
    padding:0;
        
    border-top:1px solid white;
        
    border-bottom:1px solid black;
        
    text-align:center;
    }

    #submenu ul{
        
    height:20px;
        
    background:#333333;
        
    margin:0;
        
    padding:5px;
        list-
    style:none;
        
    white-spacenowrap;
    }

    #submenu li{
        
    display:inline
    }
    #submenu aktiv{
        
    color:#989878;
        
    background-color:#f98989;
    }
    #submenu a{
        
    color:#ffffff;
        
    background:#003366;
        
    padding:2px 20px 2px 20px;
        
    border:1px solid black;
        
    font:bold 12px verdanasans-serif;
        
    text-decoration:none;
        
    text-align:center;
    }
    #submenu a:hover{
        
    color:#003366;
        
    background:#ffffff;
        
    text-decoration:underline;
    }
    #submenu a:active {
        
    color:#003366;
        
    background:#ffffff;
         
    }
    #submenu p{
        
    font-weight:bold;
        
    font-size:12px;
        
    padding:10px 0 10px 0px;
        
    margin:0;
    }

    #content{
        
    height:480px;
        
    color:black;
        
    background:white;
        
    padding:40px 20px 20px 20px;
        
    margin:0 0 0 0px;
    }

    #content h1{
        
    margin:0 0 10px 0;
        
    padding:2px 0 2px 5px;
        
    font:bold 16px verdanasans-serif;
        
    border-left:10px solid #000066;
        
    border-bottom:1px solid #000066;
    }

    #content h2{
        
    margin:25px 0 10px 0;
        
    padding:2px 0 2px 5px;
        
    font:bold 14px verdanasans-serif;
        
    border-bottom:1px solid #003399;
    }

    #content h3{
        
    margin:25px 0 10px 0;
        
    padding:2px 0 2px 5px;
        
    font:bold 12px verdanasans-serif;
        
    border-bottom:1px solid #003399;
    }
    #content p{
        
    padding:15px;
    }

    #innen{ 
        
    height:300px;
        
    margin:0 10 1%;
    }
    #marginblock{
        
    margin:'margin-top' 'margin-right' 'margin-bottom'300px;
        
    height:350px;
        
    width:670px;
    }
    #foot{
        
    color:white;
        
    background:#98bed1;
        
    padding:0;
        
    margin:0;
        
    border-top:1px solid black;
    }

    #foot p{
        
    margin:0;
        
    padding:4px;
        
    text-align:right;
    }
    die diversen Höhenangaben, also Top-Werte, kommen daher, da ich bei gleicher Höhenangabe ein unterschiedliches Ergebnis hatte und damit rumgespielt habe, bis es bei safari passte, dafür dann nicht bei ie.
     
    Zuletzt bearbeitet: 04.01.2005
  8. Nickless

    Nickless Gast

    oh man ... wenn die Bilder wenigstens width und height Angaben hätten ... Mal etwas grundsätzliches: position:absolute beudetet, dass Du die Bilder pixelgenau auf der Website positionieren kannst. Wenn es also über oder unter der Schrift liegt, verändere den Wert der Koordinaten für left und top so lange, bis es passt. Das selbe machst Du mit dem Text dann natürlich auch. Eine bessere Hilfe fällt mir im Moment nicht ein. Du müsstest Dich erst mal grundsätzlich mit HTML/CSS vertraut machen fürchte ich.
     
  9. minbo

    minbo Thread Starter MacUser Mitglied

    Beiträge:
    1.168
    Zustimmungen:
    1
    Registriert seit:
    30.05.2003
    Die Angaben für die Bilder habe ich hinzugefügt ohne eine Verbesserung oder auch bloss eine Veränderung wahr zu nehmen.
    Ich kann die Angaben verändern, dass ist nicht das Problem, mein Problem ist, dass die Sachen hauptsächlich auf den ie laufen sollen und dort und nur dort werden sie anders dargestellt als auf Firefox und Safari.
    Also wie kann ich das Problem lösen, ich kann doch nicht für ein paar Seiten css/html komplett auswendig lernen...
     
  10. minbo

    minbo Thread Starter MacUser Mitglied

    Beiträge:
    1.168
    Zustimmungen:
    1
    Registriert seit:
    30.05.2003
    jetzt habe ich endlich mal deinen Tipp verfolgt und es hat sich für mich ideal hervorgetan. Funktionert auf allen Browsern. So sollte es sein.
     
Die Seite wird geladen...
Ähnliche Themen - Positionierung Bildern Text Forum Datum
Probleme mit Hover und Positionierung der Navigation /CSS Web Page Design 19.06.2011
CSS - Problem bei Positionierung eines Bildes Web Page Design 30.11.2008
habe Probleme mit Positionierung von "background: url();" in Listen Web Page Design 17.05.2008
"Dynamische" positionierung von Layern Web Page Design 30.06.2005
Probleme mit Transparenz und Positionierung mit IE! Web Page Design 14.06.2005

Diese Seite empfehlen

Benutzerdefinierte Suche