Autor |
Nachricht |
|
22.03.2017 um 15:19 (UTC) Titel: "Steckbrief" mit CSS oder bessere Idee gesucht (Ic |
|
|
Hallo zusammen,
ich bin auf der Suche, meine Einträge schöner und vor allem übersichtlicher zu gestalten.
Hier mal ein Beispiel, wie das aktuell ausschaut: http://www.notstation.de/PLZ-3xxxx.htm
Hier der Code eines einzelnen Eintrags: Code: <a name="schweinchenhilfed"></a>
<h3>
Schweinchenhilfe - Meerschweinchen-Notstation Dresden
</h3>
<p>
Postleitzahl: 01219
<br>
Stadt: Dresden
<br>
Region: Radebeul, Pirna, Meißen
<br>
Bundesland: Sachsen
<br>
Gelistet seit: 30.11.2011
<br>
Kurzbeschreibung: Ich betreibe seit November 2011 eine private Meerschweinchen-Notstation.<br>
Meerschweinchen, die von Ihrem vorherigen Besitzer nicht mehr gehalten werden können, finden bei mir ein Zuhause auf Zeit.<br>
Ich versuche diese Meerschweine dann in ein liebevolles und artgerechtes Zuhause zu vermitteln.<br>
Ausserdem stehe ich allen Meerschweinchenhaltern gern beratend zur Seite.
</p>
<center>
<a href="http://www.schweinchenhilfe.de" TARGET="_blank">
<img alt="Schweinchenhilfe - Meerschweinchen-Notstation Dresden" width="700px" src="//img.webme.com/pic/n/notstation/dresden.jpg"></a>
</center>
Ich tendiere derzeit zu einem schönen CSS DIV. Wäre aber auch für andere Ideen offen.
Eine Definitionsliste habe ich auch schon Probiert, aber das sieht optisch nicht so prall aus. Auch auf Tabellen möchte ich möglichst verzichten...
Was mir aktuell nicht gefällt ist hauptsächlich die Optik und der mmn. zu lange Code.
Habt ihr Ideen oder Suchmaschinenkeywords für mich? ______________ Gruß von Sven von
|
|
↑
|
|
|
|
|
↑
|
|
|
|
30.03.2017 um 13:39 (UTC) Titel: |
|
|
Keiner mit einer schönen Idee? ______________ Gruß von Sven von
|
|
↑
|
|
|
|
01.04.2017 um 18:15 (UTC) Titel: |
|
|
Hallo zusammen,
ich habe mir das inzwischen so zurechtgefummelt: http://www.notstation.de/Notstation-Testseite.htm
Allerdings will bei mir einfach nicht der Abstand mancher divs gleich bleiben
Hier zu sehen: https://img.webme.com/pic/n/notstation/divabstand.JPG
Hier das CSS: Code: <style type="text/css">
<!--
/* Werbebanner*/
div.googlewerbung{
margin-right: auto;
margin-left: auto;
margin-top: 30px;
margin-bottom: 30px;
color: #A52A2A;
border-width: 5px;
border-style: solid;
width:728px;
height: 90px;
}
/* Beginn Notstation Eintrag */
div.notstation{
width: 720px;
font-size: 15px;
font-family: verdana;
color: #000000;
line-height:1.5em;
background-color: #e1bf93;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
margin-top: 40px;
padding: 20px;
border-color: #A52A2A;
border-width: 5px;
border-style: solid;
box-sizing: border-box;
border-radius: 3px 15px 5px 30px;
box-shadow: 8px 8px 14px #877258;
}
/* Beginn Notstation h1 DIV */
div.notstation2{
width: 630px;
font-size: 15px;
font-family: verdana;
color: #000000;
line-height:3em;
background-color: #E1BF93;
background-image:url(none);
margin-right: auto;
margin-left: auto;
margin-bottom: 30px;
margin-top: 30px;
padding-right: 10px;
padding-left: 15px;
border-color: #A52A2A;
border-width: 5px;
border-style: solid;
box-sizing: border-box;
border-radius: 30px 30px 30px 30px;
box-shadow: 8px 8px 14px #877258;
}
/* Beginn Notstation h2 DIV */
div.notstation3{
font-family: verdana;
color: #000000;
background-color: #E1BF93;
background-image:url(none);
margin-left: 20px;
margin-right: 5px;
margin-bottom: 10px;
margin-top: 10px;
padding-right: 5px;
padding-left: 5px;
border-color: #A52A2A;
border-width: 5px;
border-style: solid;
width: 200px;
height: 60px;
box-sizing: border-box;
box-shadow: 8px 8px 14px #877258;
}
/* Werbebanner 2*/
div.googlewerbung2{
float:right;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 20px;
margin-left: 20px;
color: #A52A2A;
border-width: 5px;
border-style: solid;
width:468px;
height: 60px;
box-sizing: border-box;
border-radius: 3px 3px 3px 3px;
box-shadow: 8px 8px 14px #877258;
}
/* Bild rechts*/
img.rechts{
float:right;
margin-right: 20px;
margin-left: 20px;
margin-bottom: 20px;
color: #A52A2A;
border-width: 5px;
border-style: solid;
width: 350px;
}
/* Bild rechts 2*/
img.rechts2{
float:right;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 10px;
margin-top: 10px;
width: 100px;
}
/* Bild rechts 3*/
img.rechts3{
float:right;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 5px;
margin-top: 5px;
width: 40px;
}
/* ENDE Notstation Eintrag */
/* H2 Textfarbe - Schriftart - Textgröße */
H2 {
color: #000000;
font-size: 25px;
font-family: verdana;
margin-bottom: 5px;
margin-top: 10px;
}
-->
</style>
Und hier der Bereich aus dem Screenshot:
Code: <div class="notstation2">
<img class="rechts2" alt="Meerschweinchen Frieda" title="Kleines Bild von Meerschweinchen Frieda neben der Überschrift" src="https://img.webme.com/pic/n/notstation/ftr.png" />
<h1>Notstationen für Meerschweinchen in Deutschland mit Postleitzahl 0
</h1>
</div>
<br style="clear: both;">
<div class="googlewerbung2">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px"
data-ad-client="ca-pub-9258997337326984"
data-ad-slot="1308942555"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="notstation3">
<img class="rechts3" alt="BILDBESCHREIBUNGFUERBLINDE" title="GRUNDFÜRDASBILD" src="https://img.webme.com/pic/n/notstation/ftr.png" />
<h2>PLZ 42...</h2>
</div>
<br style="clear: both;">
<div class="notstation">
<a name="schweinchenhilfed"></a>
<h3>
Schweinchenhilfe - Meerschweinchen-Notstation Dresden
</h3>
<a href="http://www.schweinchenhilfe.de" TARGET="_blank">
<img class="rechts" alt="Schweinchenhilfe e. V. Sachsen - Pflegestelle Leipzig" src="//img.webme.com/pic/n/notstation/heuwusler.jpg"></a>
<strong>Postleitzahl</strong> 01219
<br>
<strong>Stadt:</strong> Dresden
<br>
<strong>Region:</strong> Radebeul, Pirna, Meißen
<br>
<strong>Bundesland:</strong> Sachsen
<br>
<strong>gelistet seit:</strong> 30.11.2011
<br>
<strong>Kurzbeschreibung:</strong>
<br>
Ich betreibe seit November 2011 eine private Meerschweinchen-Notstation.
Meerschweinchen, die von Ihrem vorherigen Besitzer nicht mehr gehalten werden können, finden bei mir ein Zuhause auf Zeit. Ich versuche diese Meerschweine dann in ein liebevolles und artgerechtes Zuhause zu vermitteln.
Ausserdem stehe ich allen Meerschweinchenhaltern gern beratend zur Seite.
<br>
<strong>Link zu</strong>: <a href="http://www.schweinchenhilfe.de" TARGET="_blank">Schweinchenhilfe.de</a>
<br style="clear: both;">
</div>
<div class="googlewerbung2">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:inline-block;width:468px;height:60px"
data-ad-client="ca-pub-9258997337326984"
data-ad-slot="1308942555"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div class="notstation3">
<img class="rechts3" alt="BILDBESCHREIBUNGFUERBLINDE" title="GRUNDFÜRDASBILD" src="https://img.webme.com/pic/n/notstation/ftr.png" />
<h2>PLZ 94...</h2>
</div>
<br style="clear: both;">
Die beiden obereren Divs (PLZ42 und Werbebanner) sind passend (beide in einer Flucht). Aber trotz gleichem Code wollen die unten einfach nicht in eine Flucht gehen
Wer hat Lust auf Fehlersuche zu gehen? ______________ Gruß von Sven von
|
|
↑
|
|
|
|
03.04.2017 um 10:13 (UTC) Titel: |
|
|
Moin,
zu diesem Phänomen kommt es wegen des margin-bottom des "Steckbrief-Divs" darüber.
Der beeinflusst das "Werbe-Div" anders als das "Postleitzahlen-Div".
Warum das so ist kann ich dir noch nicht sagen, da muss ich erst nachher am PC ein bisschen experimentieren. Aber womöglich hat es was mit dem Floaten der Divs zu tun.
Gruß, TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
-
clean-test
Premium
Wohnort: Uphusum
|
03.04.2017 um 12:21 (UTC) Titel: |
|
|
Hallo
du hast den obigen CSS Code doppelt im Quellcode stehen.
Einmal im Feld "Text Über Design" und einmal im Seiteninhalt.
Hab nun nicht geschaut, ob sie unterschiedliche Eigenschaften enthalten,
wird aber bei der Fehlersuche hilfreich sein, einen davon zu entfernen
Gruß Wolle |
|
↑
|
|
|
|
04.04.2017 um 04:37 (UTC) Titel: |
|
|
Jo, danke. Hab es jetzt einigermaßen passend zusammengeschoben. Besser bekomm ich es nicht hin, aber passt schon: http://www.notstation.de/-Oe-sterreich.htm______________ Gruß von Sven von
|
|
↑
|
|
|
|
04.04.2017 um 17:05 (UTC) Titel: |
|
|
Moin,
sonst gib .notstation3 doch ein float:left; und setze dessen margin-right auf 0px sowie den margin-left der Google-Werbung ebenfalls auf 0px.
Dann kannst du auch bei diesen Elementen mit margin-top arbeiten und musst nicht den Umweg mit dem margin-bottom anderer Elemente gehen.
Warum der margin-top nicht wirkt, wenn das Element nicht floatet, ist mir ein Rätsel.
Gruß, TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
|
04.04.2017 um 17:53 (UTC) Titel: |
|
|
Passt jetzt so einigermaßen, wie wir uns das optisch vorgestellt haben. Das Einzige, was mich noch nervt ist das HTML eines einzelnen Eintrags:
Code: <!-- BEGINN NOTSTATION EINTRAG -->
<div class="notstation">
<a name="schweinchenhilfel"></a>
<h3>
Schweinchenhilfe e. V. - Pflegestelle Zschepplin
</h3>
<a href="http://www.schweinchenhilfe.de" TARGET="_blank">
<img class="rechts" alt="Schweinchenhilfe e. V. Sachsen - Pflegestelle Zschepplin" src="//img.webme.com/pic/n/notstation/schweinchenhilfesachsen.JPG"></a>
<strong>Postleitzahl: </strong>
04838
<br>
<strong>Stadt: </strong>
Zschepplin
<br>
<strong>Region: </strong>
Halle, Bitterfeld, Leipzig
<br>
<strong>Bundesland: </strong>
Sachsen
<br>
<strong>gelistet seit: </strong>
31.03.2015
<br>
<strong>Kurzbeschreibung: </strong>
<br>
Wir sind ein Meerschweinchenschutzverein mit verschiedenen Pflegestellen in ganz Sachsen. Wir vermitteln Notmeerschweinchen in Sachsen und die angrenzenden Bundesländer und beraten zu artgerechter Haltung. Wir sind ständig auf der Suche nach neuen Pflegestellen und Mitgliedern, um noch vielen weiteren Schweinchen helfen zu können. Nähere Infos erhaltet Ihr auf unserer Homepage.
<br>
<strong>Link: </strong>
<a href="http://www.schweinchenhilfe.de" TARGET="_blank">schweinchenhilfe.de</a>
</br>
<strong>Alternative Adresse: </strong><a href="http://notmeeris-vermittlung.webnode.com/" title="Gebrauchtschweinchen Deutschland">notmeeris-vermittlung.webnode.com</a>
<br style="clear: both;">
</div>
<!-- ENDE NOTSTATION EINTRAG -->
Ich finde die <strong> Lösung nicht so prall. Irgendwie viel zu viel unnötiger code. Das <b> fand ich besser. Aber ist schon OK so. Fühlt sich nur für mich als Laien immer noch sehr unprofessionell an ______________ Gruß von Sven von
|
|
↑
|
|
|
|
05.04.2017 um 10:59 (UTC) Titel: |
|
|
Dann kannst du auch weiterhin <b> verwenden.
Laut dieser Seite werden bei HTML5 mit <b></b> ausgezeichnete Elemente zwar optisch hervorgehoben, inhaltlich sind sie allerdings nicht wichtiger als der restliche Text. Irgendwie sagt da auch jeder was anderes...
http://t3n.de/news/html5-neue-aufgaben-elemente-small-340838/
Gruß, TransInt ______________ Kein Support per PN - Im Forum hilft es allen!
Life is what happens while you are busy making other plans.
- John Lennon |
|
↑
|
|
|
|