| Autor |
Nachricht |
|
|
 01.03.2017 um 13:09 (UTC)
Titel: 2x Bilder Klassen zentriert |
|
|
Hallo zusammen
ich verwende derzeit diesen Code für Standardbilder
Code: /* Standard Bilder mit Rahmen */
img.standard {
color: #2F4F4F;
border-width: 5px;
border-style: solid;
}
Jetzt möchte ich alle Bilder mit class="standard" zentrieren,
Wie müsste ich den Code ergänzen?
Des Weiteren habe ich Stellen, an denen mehrere Bilder nebeneinander stehen. Diesen müsste ich dann ja eine neue Klasse zusweisen. Auch hier sollen dann alle Bilder zusammen zentriert sein. Wie müsste ich diesen Code ändern?
Code: /* Mehrere Bilder mit Rahmen */
img.mehr {
color: #2F4F4F;
border-width: 5px;
border-style: solid;
}
Auf der Seite soll das dann später so aussehen: https://img.webme.com/pic/s/sifle/bilderklassen.JPG
Also Text bzw. normaler Code,
dann oben 3x class"mehr",
dann Text bzw. normaler Code,
dann unten 1x class"standard"
dann wieder Text bzw. normaler Code
Und die Bilder eben alle im Content zentriert. ______________ Gruß von Sven von
Zuletzt bearbeitet von sifle am 01.03.2017, 16:52, insgesamt einmal bearbeitet
|
|
|
↑
|
|
 |
-
clean-test
Premium
Wohnort: Uphusum
|
04.03.2017 um 19:53 (UTC)
Titel: |
|
|
Hallo,
alle einzelnen Bilder, die ja bereits class=standard haben,
bekommen im CSS-Code bei img.standard zusätzlich ein margin: auto;
damit sie sich mittig ausrichten.
Die Bilder mit class="standard" , welche nebeneinander sitzen sollen,
bekommen zusätzlich einen zweiten Klassennamen im HTML-Code dazu.
Den Klassennamen können wir uns ausdenken. Zum Beispiel nebeneinander
Zitat:
<img class="standard nebeneinander" src="Grafikadresse" alt="Bildinfo">
Mit dem CSS-Code bekommt diese Klasse gewünschte Eigenschaften:
- ein float: left; damit sie nebeneinander stehen
- ein margin-left: 10px; für Abstand nach Links
- ein margin-right: 10px; für Abstand nach Rechts
- mit diesen beiden Werten richtest Du diese Bilder mittig aus
Zitat:
.nebeneinander {
float: left;
margin-left: 10px !important;
margin-right: 10px !important;
}
Wichtig
Nach dem letzten Bild (nebeneinander) das float:left wieder aufheben (beenden) mit
Zitat:
<br style="clear: left;">
damit sich der folgende Inhalt nicht rechts neben den Bildern platziert,
sondern wie gewünscht wieder darunter 
Gruß Wolle |
|
|
↑
|
|
|
|
|
07.03.2017 um 15:34 (UTC)
Titel: |
|
|
Forum war kaputt - doppelpost gelöscht ______________ Gruß von Sven von
Zuletzt bearbeitet von sifle am 08.03.2017, 15:53, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
07.03.2017 um 15:38 (UTC)
Titel: |
|
|
Forum war kaputt - doppelpost gelöscht ______________ Gruß von Sven von
Zuletzt bearbeitet von sifle am 08.03.2017, 15:52, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
07.03.2017 um 15:59 (UTC)
Titel: |
|
|
Forum war kaputt - doppelpost gelöscht ______________ Gruß von Sven von
Zuletzt bearbeitet von sifle am 08.03.2017, 15:53, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
07.03.2017 um 16:05 (UTC)
Titel: |
|
|
Forum war kaputt - doppelpost gelöscht ______________ Gruß von Sven von
Zuletzt bearbeitet von sifle am 08.03.2017, 15:53, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
07.03.2017 um 16:16 (UTC)
Titel: |
|
|
Moin,
ich habe das hier mal getestet: http://sifletest.de.tl/Flummi-Test.htm
Bei den 3 Bildern klappt es und man merkt es nicht.
Allerdings sieht es bei den 2 Bildern nicht so prall aus. Liegt wahrscheinlich daran, dass die nicht das passende Format haben...
Ich könnte ja theoretisch noch eine Klasse erstellen...
Code: .2 nebeneinander {
float: left;
margin-left: 20px !important;
margin-right: 20px !important;
}
Allerdings vermute ich, dass gerade viele ältere Bilder formattechnisch nicht so gut passen. Ich muss mal probieren das dann durch witdth="passende breite" anzupassen...
Oder gibt es noch eine andere Lösung als die Bilder zu floaten? ______________ Gruß von Sven von
|
|
|
↑
|
|
|
|
|
08.03.2017 um 15:14 (UTC)
Titel: |
|
|
Hallo zusammen,
margin auto funktioniert nicht: http://www.sifle.de/Aurin.htm 
DIe Codes sehen jetzt so aus: Code: /* Standard Bilder mit Rahmen */
img.standard {
color: #2F4F4F;
border-width: 5px;
border-style: solid;
margin: auto;
}
/* Mehrere Standard Bilder mit Rahmen */
img.mehrbilder{
float: left;
margin-left: 20px !important;
margin-right: 10px !important;
color: #2F4F4F;
border-width: 5px;
border-style: solid;
}
Woran liegt es? ______________ Gruß von Sven von
|
|
|
↑
|
|
|
-
MyHeimseite
|
09.03.2017 um 00:27 (UTC)
Titel: |
|
|
Nomalerweise zentriert man nebeneinander stehende Bilder immer mit display inline block.
So mache ich das immer auf meiner richtigen Webseite:
Code:
<style type="text/css">
.div {
width: 100%;
height: auto;
text-align: center; }
.div img {
width: 150px;
height: auto;
display: inline-block;
margin: 0px 2% 0px 2%;
border: 1px solid #111111; }
</style>
<div class="div"><img src="Bild-Url.jpg" alt="Bildbeschreibung" /> <img src="Bild-Url.jpg" alt="Bildbeschreibung" /> <img src="Bild-Url.jpg" alt="Bildbeschreibung" /></div>
Ich hoffe ich konnte ein wenig helfen 
Zuletzt bearbeitet von MyHeimseite am 09.03.2017, 01:32, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
|
|
09.03.2017 um 15:20 (UTC)
Titel: |
|
|
Irgendwie gefällt mir beides nicht so richtig. Wobei das floaten nioch aktzeptabel ist.
Versteh auch nicht wirklich, warum das so schwer ist. Der Laie in mir sagt, dass sowas doch nicht so aussergewöhnlich sein kann... 
Zu der Floatgeschichte: Warum funzt das auf dieser Seite nicht?
Hier wird ja gar nicht gefloatet und trotzdem hat das anscheinend einfluss auf die Standardbilder...
http://www.sifle.de/aurin.htm______________ Gruß von Sven von
Zuletzt bearbeitet von sifle am 09.03.2017, 16:29, insgesamt 2-mal bearbeitet
|
|
|
↑
|
|
|
|
|
09.03.2017 um 20:53 (UTC)
Titel: |
|
|
Moin,
wenn du den Code von MyHeimseite übernommen hast, kann sich der in der Tat auf andere Bilder auswirken.
In diesem Code werden nämlich alle Bilder angesprochen. Wenn diese Eigenschaften nicht wieder überschrieben werden, werden sie vom Browser umgesetzt und es kann zu Veränderungen kommen.
Das lässt sich leicht durch Hinzufügen von Klassen beheben:
Zitat: <style type="text/css">
.div {
width: 100%;
height: auto;
text-align: center; }
.div img .beliebig {
width: 150px;
height: auto;
display: inline-block;
margin: 0px 2% 0px 2%;
border: 1px solid #111111; }
</style>
<div class="div"><img class=" beliebig" src="Bild-Url.jpg" alt="Bildbeschreibung" /> <img class=" beliebig" src="Bild-Url.jpg" alt="Bildbeschreibung" /> <img class=" beliebig" src="Bild-Url.jpg" alt="Bildbeschreibung" /></div>
Damit sollte der Code dann nur auf die Bilder wirken, auf die er auch wirken soll
Gruß, TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon
Zuletzt bearbeitet von transint am 09.03.2017, 21:54, insgesamt einmal bearbeitet
|
|
|
↑
|
|
|
|
|
10.03.2017 um 05:50 (UTC)
Titel: |
|
|
Nee, das ist ein Missverständnis
Der Code ist immer noch dieser hier:
Code: /* Standard Bilder mit Rahmen */
img.standard {
color: #2F4F4F;
border-width: 5px;
border-style: solid;
margin: auto;
}
/* Mehrere Standard Bilder mit Rahmen */
img.mehrbilder{
float: left;
margin-left: 20px !important;
margin-right: 10px !important;
color: #2F4F4F;
border-width: 5px;
border-style: solid;
}
Aber er wirkt sich nicht aus. Alle Standard sind nicht zentriert: http://www.sifle.de/aurin.htm
Warum nicht? ______________ Gruß von Sven von
|
|
|
↑
|
|
|
|
|
10.03.2017 um 20:51 (UTC)
Titel: |
|
|
Moin,
ich habe das mal ausprobiert. Letzten Endes liegt das daran, dass die Angabe display: block; fehlt.
Wenn du bei img.standard noch ein display: block; ergänzt, sollte das wie gewünscht funktionieren
Gruß, TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
|
↑
|
|
|
|
|
11.03.2017 um 15:57 (UTC)
Titel: |
|
|
Supi, jetzt klappt es. 
Jetzt darf ich alle <center> und </center> entfernen 
Dank euch! ______________ Gruß von Sven von
|
|
|
↑
|
|
|
|
