Grafiken oben bündig nebeneinander positionieren

FaFoo

Hi,
Ich hab das Problem, dass ich zwei Grafiken nebeneinander positionieren will, diese sind aber unterschieldich hoch. Nun sind die Bilder immer bündig am unteren Rand. Will sie aber oben bündig nebeneinander haben.

[Blockierte Grafik: http://img365.imageshack.us/img365/7501/mbrsgo3.png]

Hab schon mehreres ausprobiert aber ohne Erfolg.
MfG

EDIT: Sry, falsches Unterforum. Könnte ein Admin das verschieben?

admin

Schon mal mit versucht ?

Code

valign="top"

FaFoo

Jap, ich hab auch schon die Bilder in ein span Element gepackt und die größe begrenzt oder die Bilder als Hintergrund Bilder eingebunden in ein span mit fester größe. das ging aber nicht, zeigt nix an komischer Weise.

sejuma

Qulltext oder Link wären sicher hilfreich.

FaFoo

Joa dachte erst da gibts vllt einen extra CSS-Befehl für.

http://www.mbreifenservice.de/test/index.php

style.css

Code

img: { border:0; }
a:link { text-decoration:none; }
a:visited { text-decoration:none; }
a:active { text-decoration:none; }


#page {
background-image:url(img/bg.gif);
width:754px;
}


.kontakt {
padding-top: 132px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #BE0707;
text-align:left;
}


.kontakt a:hover {
text-decoration:underline;
}


.menu {
padding-top: 59px;
padding-left: 134px;
padding-right: 132px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #BE0707;
font-weight: bold;
float: left;
}


.suche {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
padding-top: 52px;
font-style: italic;
float: left;
padding-right: 10px;
}


.suche:first-letter {
color:#BE0707;
}


.suche form {
font-weight: normal;
font-style:normal;
}


.seite {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
padding-top: 59px;
font-style: normal;
float: left;
padding-right: 10px;
}






.seite:first-letter {
color:#BE0707;
}


.seite_unten {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
font-style: normal;
float: right;
padding-right: 130px;
}


.seite_unten:first-letter {
color:#BE0707;
}


#unten {
background-image: url(img/unten.gif);
width: 754px;
background-repeat:no-repeat;
background-position:bottom;
padding-bottom: 100px;
}


.ueberschrift {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
padding-top: 18px;
padding-left: 63px;
padding-right: 63px;
font-weight: bold;
margin-bottom: 2px;
text-align:left;
}


.ueberschrift:first-letter {
color:#BE0707;
}


.text {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
text-align: justify;
padding-top: 10px;
padding-left: 63px;
padding-right: 63px;
}


.text_unten {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify;
padding-top: 30px;
padding-left: 63px;
padding-right: 63px;
color:#BE0707;
}


form {
border:0;
display: inline;
}


button { 
padding:0px; 
background-color: transparent;
border: none;
}


select {
padding:0px;
background-color:transparent;
border: 1px solid #000000;
background-color:#FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000000;
font-size: 11px;
}


.auswahl {
padding-top: 50px;
height: 10px;
text-align:left;
}


.sortiment1 {
background-image: url(img/sort.gif);
height: 160px;
}


.sortiment2 {
background-image: url(img/sort3.gif);
height: 146px;
background-position:bottom;
background-repeat:no-repeat;
}


.sortiment3 {
background-image: url(img/keine.gif);
height: 54px;
background-position:bottom;
background-repeat:no-repeat;
}


h3 {
color: #be0707;
}

Alles anzeigen

sejuma

So sollte es zumindest im IE6 klappen:

Code

<div id="unten">
    <div class="text" style="margin-top:15px;">


        [img]img/angebot.gif[/img]
        [img]img/index.gif[/img]
        <div style="width:300px;position:relative;left:40px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>
    </div>
</div>

Aber im FF ist's noch falsch und damit wohl auch insgesamt.

Dein Quelltext ist mit den vielen Klassen sehr umfangreich und nicht unbedingt übersichtlich, auch nicht zweckmäßig.
Packe mal alle Angaben, die sich immer wieder wiederholen (z.B. Schriftart, Schriftgröße) in den body. Dann kannst du sie überall sonst löschen.
Für "first-letter" reicht eine Klasse aus. Das musst du nicht an jeder Stelle definieren.

Wenn dann aufgeräumt ist, kann man dann nochmal nachsehen. Momentan ist alles sehr unübersichtlich.

FaFoo

Den hab ich auch nicht geschrieben. Hab aber keine Zeit groß was zu ändern, sollte so schnell wie möglich online sein.
Aber ich lass mir was einfallen. :>
Danke erstmal.

Tags