Suche im Forum:
Suchen


Autor Nachricht
Beitrag22.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&szlig;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

Beitrag22.03.2017 um 16:13 (UTC)    
Titel:

So sieht mein erster Entwurf aus. Allerdings fehlt mir echt ein Händchen für Design... Confused
http://www.notstation.de/Notstation-Testseite.htm
______________
Gruß von Sven von

Beitrag30.03.2017 um 13:39 (UTC)    
Titel:

Keiner mit einer schönen Idee?
______________
Gruß von Sven von

Beitrag01.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 Neutral

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 &Uuml;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&szlig;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 Confused

Wer hat Lust auf Fehlersuche zu gehen? Wink
______________
Gruß von Sven von

Beitrag03.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
Beitrag03.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 Wink

Gruß Wolle
Beitrag04.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

Beitrag04.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
Beitrag04.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&auml;nder und beraten zu artgerechter Haltung. Wir sind st&auml;ndig auf der Suche nach neuen Pflegestellen und Mitgliedern, um noch vielen weiteren Schweinchen helfen zu k&ouml;nnen. N&auml;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 Wink
______________
Gruß von Sven von

Beitrag05.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
Beiträge der letzten Zeit anzeigen:   


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