Prgrmmrgrl
Neues Mitglied
Hallo Zusammen,
ich habe eine BilderGalerie nach folgendem Schema gebaut:
<ul>
<div id="galerie">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<li><img src="{{media url="wysiwyg/wedding-1.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-2.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-3.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-4.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-5.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-6.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-7.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-8.jpg"}}" alt="name">name</li>
</ul>
<div style="clear: both;"></div>
</div>
hier die CSS dazu:
#galerie li
{
float: left;
text-align: center;
list-style-type: none;
font-size: 20px;
margin: 0;
}
#galerie img
{
width: 280px;
height: auto;
display: block;
padding: 6px;
}
#galerie img:hover
{
background-color: #3c3c3b;
}
Sie funktioniert auch so wie ich es brauche und sie sieht auch gut aus, jedoch schaue ich sie mir auf dem Smartphone an und drehe den Bildschirm quer ist sie links versetzt, was an dem float:left; Befehl liegt, der wird gebraucht um die Bilder nebeneinander "aufzulisten". Hat jemand von euch eine Idee wie ich sie zentriert bekomme?
Danke im Voraus!
ich habe eine BilderGalerie nach folgendem Schema gebaut:
<ul>
<div id="galerie">
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<li><img src="{{media url="wysiwyg/wedding-1.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-2.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-3.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-4.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-5.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-6.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-7.jpg"}}" alt="name">name</li>
<li><img src="{{media url="wysiwyg/wedding-8.jpg"}}" alt="name">name</li>
</ul>
<div style="clear: both;"></div>
</div>
hier die CSS dazu:
#galerie li
{
float: left;
text-align: center;
list-style-type: none;
font-size: 20px;
margin: 0;
}
#galerie img
{
width: 280px;
height: auto;
display: block;
padding: 6px;
}
#galerie img:hover
{
background-color: #3c3c3b;
}
Sie funktioniert auch so wie ich es brauche und sie sieht auch gut aus, jedoch schaue ich sie mir auf dem Smartphone an und drehe den Bildschirm quer ist sie links versetzt, was an dem float:left; Befehl liegt, der wird gebraucht um die Bilder nebeneinander "aufzulisten". Hat jemand von euch eine Idee wie ich sie zentriert bekomme?
Danke im Voraus!