• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

3 Bilder nebeneinander und in der mitte zentrieren

F

Florian551

Neues Mitglied
Hallo forum ;)

Ich möchte gerne 3 bilder horizontal zentrieren ( die Bilder sollen nebeneinander stehen)
Das problem ist das meine webseite ist 100% breit, also dynamisch. Ein bild bekomm ich hin, mit einer
class { margin-left: auto; margin-right: auto; } mit den anderen funktioniert das nicht, dass sie neben den bild in der mitte links und rechts stehen

ich kann das nicht so gut erklären :D

HTML: 
<div id="footer"><img class="img" src="Zurueck.png" width="" height="" border="0" alt="links"><img class="img" src="Home.png" width="" height="" border="0" alt="mitte"><img class="img" src="Multi.png" width="" height="" border="0" alt="rechts"></div>

hier die css:

#footer {
background-color: #000000;
width: 100%;
height: 35px;
bottom: 0px;
position: fixed;
-moz-border-radius: 0px;
-khtml-border-radius: 0px;
-webkit-border-radius: 0px;
box-shadow: 0px 0px 0px #333,
-0px 0px 0px #333,
0px -0px 0px #333,
-0px -0px 0px #333;
opacity: 1.0;
filter: alpha(opacity=100);
-moz-opacity: 1.0;
}

.img {
margin-left: auto;
margin-right: auto;
}

Könnt ihr den Code irgenwie vervollständigen :)

so solls zirka aussehen :

|----------[Bild][Bild][Bild]-----------|

aber bei mir sind die bilder (egal was ich versuche) durcheinander :)

Danke
 
Hallo Florian551

Versuche es mal so:
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Titel</title>
<style>
* {
    margin:0px;
    padding:0px;
}

#footer {
    background-color: #000000;
    width: 100%;
    bottom: 0px;
    position: fixed;
    -moz-border-radius: 0px;
    -khtml-border-radius: 0px;
    -webkit-border-radius: 0px;
    box-shadow: 0px 0px 0px #333,
    -0px 0px 0px #333,
    0px -0px 0px #333,
    -0px -0px 0px #333;
    opacity: 1.0;
    filter: alpha(opacity=100);
    -moz-opacity: 1.0;
    text-align:center;
}

img {
    display:inline-block;
}
</style>
</head>

<body>
    <div id="footer">
        <img src="woolly-mc.png" alt="test" />
        <img src="woolly-mc.png" alt="test" />
        <img src="woolly-mc.png" alt="test" />
    </div>
</body>
</html>



Grüsse,
soulxheart
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben