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

Div mit Bildern "responive" zentrieren

mote

Mitglied
Hallo,

hab ein kleines Problem bei einer Positionierung eines Divs.

Hab ein Hauptdiv mit einem weiteren Div das zwei Bilder enthält. Der folgende Code funktioniert am PC, jedoch schlagt sich das natürlich am Handy bzw. Ipad. Es ist ganz klar warum, nämlich wegen der fixen px Angabe im im #content. Jedoch wie mache ich das sonst? Die zwei Bilder sind im Originalem 574px lang.


Kann mir jemand helfen? Vielen Dank!

HTML:
<div id="content">


<div id="wrapper">


<a href="#"><img src="/img/reis.jpg" /></a>

<a href="#"><img src="/img/schokoladen.jpg"  /></a>
<br class="clearfix" />
</div>


</div>


mit folgendem CSS

Code:
#content{
    position: relative;
    background-color:#FFF;
    width:1150px;
    height:100%;
    margin:0 auto;
  
}



#wrapper img {float:left;}
#wrapper .clearfix {clear:both;}
 
Werbung:
Hallo,

hast du mal einen Link zu der Seite?

Und wie sollen die Bilder sich denn überhaupt verhalten?

Warum benutzt du kein HTML5?

Wie groß sind die Bilder?

Gruss

MrMurphy
 
Hallo,

die Bilder sollen bei Verkleinerung der Seite auch kleiner werden.

Habe leider seit längerem nichts mehr mit Webseiten gemacht, deswegen habe ich ein Defizit in Html 5. Könntest du mir hier bitte auf die Sprünge helfen?

Ein Bild ist genau 574 × 297


LG
 
Werbung:
HTML5 und CSS musst du schon selber lernen, und ich prophezeie dir, dass du ohne ein entsprechendes Framework wie Bootstrap an einer responsiven, fluiden Seite scheitern wirst.

Was die Frage betrifft. Der Wrapper sollte eine width in Prozent besitzen. Das darin liegende Bild bekommt keine Pixelabmessungen, sondern: max-width: 100%; height: auto;
 
Und falls die beiden Bilder nebeneinander sitzen sollen, packst du jeweils ein div drum oder nimmst die a-tags und floatest sie und gibst jeweils eine prozentuale breite
 
Vielen Dank euch, genau nach dem habe ich gesucht. Funktioniert!

Bin schon seit langem weg vom Webdesign und bei Java gelandet, aber wollte für einen Blog ein paar Sachen selbst hinzufügen die es mit Widgets nicht gegeben hat. Also keine Angst, ich starte schon keine große selbst gemachte Seite :D

Habe aber trotzdem vor mich in den Sommerferien endlich in HTML5 und CSS3 einzulesen. Kleine Offtopic Frage noch zum Abschluss: könnt ihr mir hierzu ein aktuelles Buch empfehlen?
 
Werbung:
Jop, ich habe mir vor ein paar Wochen ein Buch namens CSS/Das umfassende Handbuch gekauft..... Ca. 35€. Der Auto ist Kai laborenz. Herausgeber galileo computing.

Das Buch ist sehr übersichtlich, man kriegt sogar einen schnellen, aber auch ausführlichen einstieg in html 5.

Ein Referenzen Heft ist auch mit allen Auflistungen der Browser Unterstützungen für einzelne Eigenschaften dabei.

Ein kleinen Mangel gibt es. Die Bilder sind schwarz weiß. Kann man aber verkraften. ;)

Sorry für die Grammatik Fehler, etc..... Schreibe vom Handy....


Bei fragen über das Buch einfach mich anschreiben ;)


Gute Nacht
 
Zuletzt bearbeitet:
Zurück
Oben