Tobias P.: Bilder nebeneinander

Hallo,

ich möchte eine Seite erstellen, da sollen in den "grafischen" Head zwei Bilder nebeneinander.

Dies möchte ich mit CSS verwirklichen, aber ich schaffe es nicht, die Beiden nebeneinander zu bekommen.

Ich muss auch anmerken, dass dies meine erste komplette CSS Website werden soll und noch einiges an Erfahrung brauche ;)

Hier der Code, wie ich es versucht habe:

CSS:
#main
{
border: 1px solid #000000;
background-color: transparent;
margin-left: -350px;
margin-top: 10px;
position:absolute;
left: 50%;
width: 700px;
}

#head_image
{
background-image:url(images/head_welt.gif);
background-color: transparent;
background-repeat:no-repeat;
width: 350px;
height: 195px;
}

#head_background
{
background-image:url(images/head_background.gif);
background-color: transparent;
background-repeat:no-repeat;
position:relative;
left:350px;
top:0px;
width: 350px;
height: 195px;
}

HTML:
<body>
<div id="main">

<div id="head_image"></div>

<div id="head_background"></div>

</div>
</body>

Die ganze Seite soll 700px breit werden und da sollen die beiden Grafiken in den Head nebeneinander mit jeweils 350px.

Kann mir jemand helfen? Ist bestimmt banal *schäm*

MfG Tobias

  1. Hi,

    wenn ich dich richtig verstehe, musst du erstes bild float:left und zweites bild floeat:right angeben ;)

    viel spass,
    Inita

  2. ich möchte eine Seite erstellen, da sollen in den "grafischen" Head zwei Bilder nebeneinander.

    Wo ist das Problem:

    <img src="pic1.jpg" alt=""><img src="pic1.jpg" alt="">

    Ich muss auch anmerken, dass dies meine erste komplette CSS Website werden soll und noch einiges an Erfahrung brauche ;)

    sieht man.

    #main
    {
    border: 1px solid #000000;
    background-color: transparent;
    margin-left: -350px;
    margin-top: 10px;
    position:absolute;
    left: 50%;
    width: 700px;
    }

    wüst, wieso positioniert du main?
    Du machst es dir damit i.d.R. schwerer

    Die ganze Seite soll 700px breit werden und da sollen die beiden Grafiken in den Head nebeneinander mit jeweils 350px.

    Eine feste Breite halte ich auch nicht für gutes Webdesign, man kann sehr schön mit HTML/CSS Layouts entwickeln, die sich an die Gegebenheiten beim User anpassen. 700px sehen bei einem grossen Browserfesnter ziemlich leer aus, bei einem kleinen sind horizontale Scrollbalken vorhanden.

    Struppi.

    --
    Javascript ist toll (Perl auch!)
    1. Hi,

      ich mag aber besser feste breiten, im netz sind ja auch viel mehr webseiten mit den festen breiten. Naja vielleicht kommt an was fuer ne webseite und was fuer ein design. Ich denke, um sehr gute webseite mit nicht feste breite zu machen, man muss bissel muehe geben, mit min-width usw

      1. ich mag aber besser feste breiten, im netz sind ja auch viel mehr webseiten mit den festen breiten. Naja vielleicht kommt an was fuer ne webseite und was fuer ein design. Ich denke, um sehr gute webseite mit nicht feste breite zu machen, man muss bissel muehe geben, mit min-width usw

        Warum sollte man. Wenn es um Fließtext geht ist eine Breite von ca. 55em durchaus sinnvoll. für allen anderen Bereiche reicht mir %.

        Die meisten Seiten die eine fixe Breite haben, haben diese, weil das Logo eine Grafik mit einer festen Breite ist. Mal abgesehen von dem Sinn eines häufig riesigen Logos (ich sitze oft vor einem 15" Monitor und bin genervt, wenn das Logo 1/3 und mehr des Platzes der zu Verfügung steht einimmt) auf jeder Seite, ist es durchaus möglich auch ein Logo flexibel zu gestalten.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
  3. #head_image
    {
    background-image:url(images/head_welt.gif);
    background-color: transparent;
    background-repeat:no-repeat;
    width: 350px;
    height: 195px;
    }

    #head_background
    {
    background-image:url(images/head_background.gif);
    background-color: transparent;
    background-repeat:no-repeat;
    position:relative;
    left:350px;
    top:0px;
    width: 350px;
    height: 195px;
    }

    Servus,

    jeweils ein margin:0px rein evtl