Suche im Forum:
Suchen


Autor Nachricht
Beitrag20.04.2017 um 13:35 (UTC)    
Titel: <div> welches sich an Inhaltsgröße automatisch anpasst

Hallo zusammen,
ich habe diverse Banner eingebunden, die alle unterschiedliche Formate haben.
Alle sollen aber einen farbigen Rahmen bekommen und zentriert sein.
Mein aktueller Code:
Code:
div.werbunggr{
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 30px;
color: #97A7A7;
border-width: 5px;
border-style: solid;
width:738px;
height: 100px;
}

Da, wie schon geschrieben, die Bannergröße immer unterschiedlich ist, suche ich nach einer Codeänderung, damit sich die width und height automatisch am Inhalt orientieren.
Wer hat eine Idee?
______________
Gruß von Sven von

Beitrag20.04.2017 um 18:08 (UTC)    
Titel:

Hallo,

wenn du die Angabe für width und height einfach weglässt, dürften die Banner, sofern es normale Bilder sind, die nicht anderweitig formatiert werden, ihre normale, d.h. eigentliche Größe annehmen.

Falls teilweise Banner dabei sind, die dir zu breit oder zu hoch sind, kannst du die Eigenschaften max-width (maximale Breite) und/oder max-height (maximale Höhe) verwenden.
Verwendet werden die genauso wie width und height. Falls alle Banner unter den bei max-width und max-height angegebenen Maßen bleiben, sprich kleiner sind, bleiben sie unverändert und werden auch kleiner angezeigt - außer du befiehlst ihnen mit width und height etwas anderes Wink

Gruß, TransInt
______________
Kein Support per PN - Im Forum hilft es allen!

Life is what happens while you are busy making other plans.
- John Lennon
Beitrag21.04.2017 um 10:26 (UTC)    
Titel:

Das war mein erster Versuch. Allerdings wurde ein DIV dann über die ganze Contentbreite gesetzt. Sprich: der Rahmen war über die komplette Contentbreite zu sehen, aber der Inhalt, da dieser kleiner war, war linksbündig. Rechts neben dem Inhalt war dann nur leerer Hintergrund.
______________
Gruß von Sven von

Beitrag21.04.2017 um 11:56 (UTC)    
Titel:

Das liegt daran, dass DIV ein block-level Element ist und somit automatisch die volle Breite nutzt. Das kannst du beispielsweise damit ändern, dass du es auf inline-block änderst:
display: inline-block;
______________
- Signatur vom Mod Team angepasst -
Bitte keine Werbung für fremde Projekte

=> Das ist sehr schade. Ich habe mich hier im Forum über viele Jahre engagiert und einfach meine Signatur zu verändern zeugt von mangelnder Wertschätzung für meine Beiträge, die einzig den Nutzern des Homepage-Baukastens zugute kamen. Spätestens mit der Reduzierug auf max. 10 Unterseiten* sind die guten Zeiten des Baukastens ohnehin vorbei und die einst große Gremeinschaft im Forum hat sich längst aufgelöst. Nun bin ich hier offenbar auch nicht länger erwünscht. Bleibt mir nur lebewohl zu sagen, es waren schöne 14 Jahre und der Baukasten hat mir immer viel Spass gemacht - machts gut und eventuell trifft man sich ja doch nochmal an anderer Stelle im Internet. (07.06.2020)
* mittlerweile sogar nur noch 5
Beitrag24.04.2017 um 11:20 (UTC)    
Titel:

Moin,
sieht jetzt so aus:
Code:
/* Werbebanner */
div.werbung{
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 30px;
color: #97A7A7;
border-width: 5px;
border-style: solid;
display: inline-block;
}

Allerdings funktioniert jetzt die "zentrierung" nicht
______________
Gruß von Sven von

Beitrag25.04.2017 um 21:07 (UTC)    
Titel:

Hallo Sven,

haben diese DIV nur Bilder als Inhalt ? Dann kannst Du es auch Ohne DIV lösen :
Gebe deinen Bildern im HTML-Code einen Klassennamen, z.B. Rahmen
Zitat:
<img class="Rahmen" src="Grafikadresse.jpg" alt="Bildinfo">


Mit CSS bekommen diese Bilder gewünschte Eigenschaften :
Zitat:

.Rahmen {
margin: 30px auto;
border: 5px solid #97A7A7;
}


Damit sitzen sie zentriert, haben nach Oben und Unten 30 Pixel Abstand und gewünschten Rahmen Wink

Gruß Wolle
______________
Beitrag26.04.2017 um 08:19 (UTC)    
Titel:

Hallo Wolle,
wenn es nur Bilder wären... Wink
Soweit ich das überblicken kann sind das
- script async (Googlewerbung)
- iframe (Amazon Werbung)
- verlinkte img (diverse Banner nach Extern)
Daher suche ich auch nach einer Universallösung mit dem div oder ähnliches.
Soweit ich mich entsinne machen gerade google und amazon Zicken, wenn man an deren Code direkt rangeht...
______________
Gruß von Sven von

Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de