Benutzerdefinierte Suche

Positionierung von Bildern und Text mit css

  1. minbo

    minbo Thread StarterMacUser Mitglied

    Mitglied seit:
    30.05.2003
    Beiträge:
    1.168
    Zustimmungen:
    1
    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
     
    minbo, 02.01.2005
  2. schildkroeter

    schildkroeterMacUser Mitglied

    Mitglied seit:
    26.12.2004
    Beiträge:
    1.772
    Zustimmungen:
    15
    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
     
    schildkroeter, 02.01.2005
  3. Faser

    FaserMacUser Mitglied

    Mitglied seit:
    20.08.2003
    Beiträge:
    1.012
    Zustimmungen:
    0
    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.
     
    Faser, 02.01.2005
  4. Nickless

    Nickless

    <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.
     
    Nickless, 02.01.2005
  5. minbo

    minbo Thread StarterMacUser Mitglied

    Mitglied seit:
    30.05.2003
    Beiträge:
    1.168
    Zustimmungen:
    1
    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.
     
    minbo, 04.01.2005
  6. Nickless

    Nickless

    Zeige bitte mal den vollständigen Code.

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

    minbo Thread StarterMacUser Mitglied

    Mitglied seit:
    30.05.2003
    Beiträge:
    1.168
    Zustimmungen:
    1
    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.
     
    minbo, 04.01.2005
  8. Nickless

    Nickless

    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.
     
    Nickless, 04.01.2005
  9. minbo

    minbo Thread StarterMacUser Mitglied

    Mitglied seit:
    30.05.2003
    Beiträge:
    1.168
    Zustimmungen:
    1
    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...
     
    minbo, 04.01.2005
  10. minbo

    minbo Thread StarterMacUser Mitglied

    Mitglied seit:
    30.05.2003
    Beiträge:
    1.168
    Zustimmungen:
    1
    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.
     
    minbo, 08.01.2005
Die Seite wird geladen...