Listenformatierung korrigieren

chris1

hallo,

auf dieser Seite...
habe ich ein Beispiel.

Irgendwie lässt sich der Abstand der Listenüberschrift zum Text nicht verändern. Der Abstand ist einfach zu groß. Normalerweise sollte die Liste gleich unter der Überschrift anfangen.

Auch das Ende der Liste verhält sich nicht normal. br und p funktionieren nicht wie gewohnt.
Ich vermute, dass das an der style.css Datei liegt.
Was muss ich ändern, damit sich die Liste wieder normal verhält?

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

maxe

Zitat

Irgendwie lässt sich der Abstand der Listenüberschrift zum Text nicht verändern

Code

#sidebars h2 {
color:#FFFFFF;
font-size:11pt;
font-weight:normal;
letter-spacing:-1px;
margin:0;
padding:0 0 [COLOR=Red]8px[/COLOR];
}

Zitat

Auch das Ende der Liste verhält sich nicht normal. br und p funktionieren nicht wie gewohnt.

Code

#sidebars li {
font-size:9pt;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin-bottom:[COLOR=Red]20px[/COLOR];
}

chris1

hallo und vielen Dank für die Antwort. Ich hab Deine Änderungen probiert... da ändert sich nichts.
Der erste Teil sieht bei mir so aus:

Code

#sidebars h2 {
  margin: 0;
  padding: 0 0 8px 0;
  font-weight: normal;
  font-size: 11pt;
  color: #fff;
  letter-spacing: -1px;
  }

meint... ist identisch, oder?

Der Zweite Teil so:

Code

#sidebars ul {
  margin: 0;
  padding: 0 0 5px 0;
  }


#sidebars li {
  margin-bottom: 20px;
  list-style: none;
  font-size: 9pt;
  }


#sidebars li ul {
  padding: 0;
  }


#sidebars ul ul li {
  margin: 0;
  padding: 2px 2px 2px 16px;
  color: #eee;
  background: url(images/bullet.gif) left 8px no-repeat;
  line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
  }

Alles anzeigen

Wobei ich nicht verstehe, warum ich bei den sidebars was ändern muss, wenn der Text, den ich formatieren will doch eigentlich im Post steht.

maxe

ach so, du meinst nicht die Listenpunkte in der Sidebar, sondern im Text. Sag das doch ;-)

Dann ist es der Abstand beim normalen p-Tag:

Code

p {
margin:0 0 20px;




}

chris1

Vielen Dank für die Antwort...
das steht da auch schon drin... hier ist die style.css Teil 1
vielleicht siehst Du ja was:

Code

/*  
Theme Name: Pixel
Theme URI: http://samk.ca/freebies/free-wordpress-theme-pixeled/
Description: Dark WP theme with 2-3 column layout, dropdown categories menu, multiple widget-ready placement and feedburner email form integrated, easy to customize. Created by <a href="http://samk.ca/">samk</a>. Enjoy!
Author: sam
Author URI: http://samk.ca/
Version: 1.9.1
Tags: black, blue, three-columns, two-columns, threaded-comments, fixed-width, theme-options, right-sidebar
.
Released under the <a href="http://www.opensource.org/licenses/gpl-license.php">GPL</a>.
.
*/


/* Defaults */


* {
  margin: 0;
  padding: 0;
  }


h1 {
  padding: 0 0 10px 0;
} 
h2 {
  font-size: 11pt;
  padding: 0 20px 0px 0;
} 
h3 {
  font-size: 9pt;
  padding: 0 20px 0px 0;
} 
h4, h5, h6, {
  font-size: 8pt;
  padding: 0 20px 10px 0; 
}
a {
  font-size: 9pt;
}
p {
margin:0 0 20px 0;
} 


h1, h2, h3, h4, h5, h6 {
  font-family: Verdana;
  }


hr {
  color: #333;
  border: 1px solid #121212;
  }


pre {
  height: auto; 
  overflow-x:scroll;
  }


fieldset {
  margin: 0;
  padding: 0; 
  border: 0;
  }


dd {
  padding-left: 15px;
  }




p {
  font-size: 9pt;
  }


a {
  color: #6598b8;
  text-decoration: none;
  }


a:hover {
  color: #222;
  text-decoration: underline;
  }


a img {
  border: none;  
  }


blockquote {
  background: #070707;
  border: 1px solid #060606;
  padding: 5px 15px;
  margin: 10px 10px 5px 15px;
  font-style: italic;
  color: #fff;
  }


code {
  color: #3366cc;
  font-style: italic;
  }


strong {
  font-size: 110%;
  }


body {
  text-align: center;
  margin: 0;
  padding: 0 0 15px 0;
  font-family: trebuchet ms, arial, helvetica, sans-serif;
  background: #000 url(images/bgbody.jpg) top center no-repeat;
  }




/* Header and wrapper */
#wrapper {
  margin: 0 auto;
  width: 960px;
  text-align: left;
  padding: 0;
  }


#header {
  padding: 0;
  margin: 0;
  height: 80px;
  }


#header #topright {
  text-align: right;
  float: right;
  width: 600px;
  margin: 5px 0 0 0;
}
#header #topright ul {
  list-style: none;
  padding: 0;
  margin: 0;
  }
#header #topright li {
  display: inline;
  }
#header #topright li a {
  color: #fff;
  font-size: 9pt;
  padding: 0 0 0 25px;
  text-transform: lowercase;
  }
#header #topright li a:hover {
  color: #000;
  text-decoration: none;
  }


#header #logo {
  float: left;
  width: 350px;
  margin: 25px 0 0 0;
  padding: 0;
}
#header #logo {
  padding: 0;
  margin: 0;
  }
#header #logo a {
  color: #fff;
  font-size: 17pt;
  font-weight: bold;
  font-family: verdana;
  text-decoration: none;
  }
#header #logo a:hover {
  color: #eee;
  text-decoration: none;
  }
#header span {
  padding: 0;
  color: #111;
  font-size: 11pt;
  }




/* Menu */


#catnav {
  margin: 20px 0 0 0;
  padding: 0;
  clear: both;
  height: 44px;
  width: 960px;
  }


#nav {
  list-style: none;
  margin: 0;
  padding: 0;
  }
    
#nav ul {
  margin: 0;
  padding: 0;
  }


#nav li {
  float: left;
  margin: 0;
  padding: 0;
  }


#nav a {
  display: block;
  line-height: 44px;
  margin: 0;
  padding: 0 20px 0 15px;
  font-size: 10pt;
  color: #fff;
  letter-spacing: -1px;
  }


#nav li a:hover {
  color: #6598b8;
  text-decoration: none;
  display: block;
  }


#nav li ul {
  list-style: none;
  position: absolute;
  width: 150px;
  left: -999em;
  }


#nav li:hover ul, #nav li.sfhover ul {
  left: auto;
  }
    
#nav li li {
  float: left;
  margin: 0;
  padding: 0;
  width: 150px;
  }
    
#nav li li a {
  width: 150px;
  height: 24px;
  line-height: 24px;
  color: #fff;
  border-top: 1px solid #131f27;
  background: #040404;
  margin: 0;
  padding: 5px 20px 5px 15px;
  }
    
#nav li li a:hover {
  border-top: 1px solid #131f27;
  background: #000;
  padding: 5px 20px 5px 15px;
  }


#nav li:hover, #nav li.sfhover { /* prevents IE7 drop-down menu bug (focus on a page element prevents nested menus from disappearing) */
  position: static;
  }


#toprss {
  float: right;
  margin: 10px 15px 0 0;
  display: inline;
  width: 65px;
  line-height: 41px;
  }






/* Top Content */


#main {
  margin: 5px 15px 0 15px;
  clear: both;
  width: 930px;
  padding-bottom: 5px;
  }
#contentwrapper {
  float:left;
  width: 560px;
  margin: 0 0 15px 0;
  padding: 0;
  }
#contentwrapper2 {
  float:left;
  width: 900px;  margin: 0 0 15px 0;
  padding: 0;
  }
#contentwrapper .pageTitle, #contentwrapper2 .pageTitle {
  margin: 15px 0 10px 0;
  font-size: 14pt;
  letter-spacing: -1px;
  color: #fff;
  font-weight: normal;
  background: url(images/bg-trans.png) repeat;
  padding: 5px;
  }
.topPost {
  margin: 0;
  padding: 0;
  font-size: 9pt;
  }
.topPost h1.topTitle a {
  font-size: 14pt;
  font-weight: bold;
  color: #fff;
  letter-spacing: 0px;
  }
.topPost h1.topTitle a:hover {
  text-decoration: none;
  color: #abd1ea;
  }
.topPost p.topMeta {
  padding: 0;
  margin: -10px 0 0 0;
  font-size: 9pt;
  color: #cdcdcd;  
  }
.topPost p.topMeta a {
  text-decoration: underline;
  color: #fff;
  }
.topPost p.topMeta a:hover {
  color: #ccc;
  }
.topPost div.topContent {
  font-size: 9pt;
  color: #efefef;
  margin: 8px 0;
  }
.topPost div.topContent a {
  text-decoration: underline;
  color: #fff;
  }
.topPost div.topContent a:hover {
  text-decoration: underline;
  color: #ff9933;
  }


.topPost div.topContent ul, .topPost div.topContent ol {
  padding: 0 0 0 30px;
  }
.topPost div.topContent ul li, .topPost div.topContent ol li {
  color: #eee;
  }
.topPost span.topComments, .topPost span.topMore, .topPost span.topTags {
  font-size: 9pt;
  font-style: italic;
  background: url(images/bg-trans.png) repeat;
  padding: 8px 10px;
  margin-right: 5px;
  line-height: 27pt;
  color: #fff;
  border: 1px solid #111;
  }
.topPost span.linkpages {
  font-size: 9pt;
  font-style: italic;
  color: #fff;
  margin-bottom: 10px; display:block;
  }
.topPost span.linkpages a:hover {
  color: #ddd;
  }
.topPost span.topComments:hover, .topPost span.topMore:hover, .topPost span.topTags:hover {
  background: #040404;
  }
.topPost span.topComments a {
  color: #fff;
  background: url(images/comments.gif) left no-repeat;
  padding-left: 20px;
  line-height: 27pt;
  vertical-align: middle;
  }
.topPost span.topMore a {
  color: #fff;
  background: url(images/more.gif) left no-repeat;
  padding-left: 20px;
  line-height: 27pt;
  vertical-align: middle;
  }
.topPost span.topTags em {
  background: url(images/tags.gif) left no-repeat;
  padding-left: 20px;
  line-height: 27pt;
  vertical-align: middle;
  color: #0a0a0a;
  }
.topPost span.topTags a {
  color: #fff;
  line-height: 27pt;
  vertical-align: middle;
  }
.topPost span.topComments a:hover, .topPost span.topMore a:hover, .topPost span.topTags a:hover {
  color: #fff;
  text-decoration: underline;
  }


#nextprevious {
  margin: 10px 0 5px 0;
  }
#nextprevious a {
  color: #83adc8;
  text-transform: lowercase;
  text-decoration: underline;
  }
#nextprevious a:hover {
  color: #fff;
  }




/* Comments */


#comment {
  margin-bottom: 10px;
  margin-top: 15px;
  background: #040404;
  width: 530px; /* fixes bug in IE7 where putting focus on the text makes it disappear behind the background. yeah, weird. they call it a dimensional bug. */
  border: 1px solid #090909;
  padding: 0px 15px 10px 15px;
  color: #fff;
  }
#comment h3 {
  font-size: 10pt;
  font-weight: normal;
  color: #fff;
  margin: 15px 0;
  padding: 0;
  }
#comment p a {
  color: #6598b8;
  }
#comment p a:hover {
  color: #fff;
  }
#comment p {
  padding:0;
  margin: 7px 0;
  }
ul.commentlist, ul.trackback  {
  list-style-type: none;
  margin: 10px 0;
  font-size: 9pt;
  }
.commentlist li, .trackback li {
  margin: 10px 0 15px 0;
  padding: 10px;
  background: #080808;
  border: 1px solid #040404;
  list-style-type: none;
  }
.commentlist li.alt {
  background: #000;
  border: 1px solid #020202;
  border: none;
  margin-top:10px;
  }
.commentlist li.cleared {
  background: transparent;
  border: none;
  }
.commentlist a:hover {
  color: #eee;
  }
.commentlist a.gravatar {
  float: left;
  margin: 0 15px 10px 0;
  width: 60px;
  }
.commentlist .commentbody {
  margin: 0;
  padding: 0;
  }
.commentlist .commentbody p a {
  text-decoration: underline;
  }
.commentlist cite {
  font-size: 10pt;
  font-style: normal;
  color: #ddd;
  }
.commentlist small.commentmetadata a {
  color: #666;
  }
.commentlist p {
  color: #dedede;
  }
#respond {
  clear: both;
  margin-top: 15px;
  }
textarea#comment {
  width: 450px;
  background: #fff;
  color: #111;
  padding: 10px;
  }
#comment #submit {
  margin: 0;
  }
#extrastuff a {color:#222; font-size:0.8em;}
#extrastuff a:hover {color:#6598b8; text-decoration:none;}
#extrastuff #rssleft {float:left; width:250px;}
#extrastuff #trackright {float:right; width:180px; text-align:right;}

Alles anzeigen

chris1

style.css Teil2

Code

/* Welcome section */


#main #welcome {
  margin: 0 0 20px 0;
  padding: 0 0 5px 0;
  background: url(images/bg-trans.png) repeat;
  }
#main #welcome h2 {
  font-size: 12pt;
  font-weight: bold;


  color: #fff;
  letter-spacing: 0px;
  margin: 0 10px;
  padding: 10px 0 3px 0;
  }
#main #welcome p {
  font-size: 9pt;
  color: #eee;  
  margin: 0 10px;
  padding: 6px 0;
  }
#main #welcome a {
  text-decoration: underline;
  color: #ff9933;
  }
#main #welcome a:hover {
  color: #6598b8;
  }
#main #welcome form {
  margin: -5px 0 0 0;
  background: transparent; /* required for IE */
  }
#main #welcome #feedbox {
  border: 1px solid #ccc;
  padding: 2px 1px;
  width: 180px;
  }
.submitbutton {
  margin: -5px 0 0 5px;
  background: #010101;
  color: #fff;
  font-size: 8pt;
  padding: 3px 6px;
  vertical-align: middle;
  border: 1px solid #111;
  }
.submitbutton:hover {
  cursor: pointer;
  background: #050505;
  }




/* Sidebars */
#sidebars {
  margin: 15px 0 0 0;
  float: right;
  width: 340px;
  color: #eee;
  }
#sidebars .sidebarbox {
  background: url(images/bg-trans.png) repeat;
  padding: 8px 15px;
  }


#sidebar_full {
  padding: 0;
  margin: 0;
  }


#sidebar_left {
  float: left;
  width: 160px;
  }


#sidebar_right {
  float: right;
  width: 160px;
  }


#sidebars h2 {
  margin: 0;
  padding: 0 0 8px 0;
  font-weight: normal;
  font-size: 11pt;
  color: #fff;
  letter-spacing: -1px;
  }


#sidebars table {
  width: 130px;
  }


#sidebars ul {
  margin: 0;
  padding: 0 0 5px 0;
  }


#sidebars li {
  margin-bottom: 20px;
  list-style: none;
  font-size: 9pt;
  }


#sidebars li ul {
  padding: 0;
  }


#sidebars ul ul li {
  margin: 0;
  padding: 2px 2px 2px 16px;
  color: #eee;
  background: url(images/bullet.gif) left 8px no-repeat;
  line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
  }


#sidebars a {
  display: inline;
  color: #eee;
  }
#sidebars a:hover {
  color: #6598b8;
  text-decoration: underline;
  }


#sidebars p {
  padding: 2px 0;
  font-size: 9pt;
  color: #eee;
  }


#tag_cloud a {
  display: inline;
  }


#sidebars ul.children li {border-bottom:none;}
#sidebars ul.children {margin-bottom:0;}




 
 /* Before footer */
 
 #morefoot {
   background: #000 url(images/bggrad.jpg) top left repeat-x;
   border: 1px solid #070707;
   padding: 15px;
   color: #dfdfdf;
   margin: 0 0 10px 0;
   }
 #morefoot p {
   margin: 5px 0;
   padding: 5px 0;
   }
 #morefoot ul {
   list-style-type: none;
   margin-top: 5px;
   }
 #morefoot ul li, #morefoot p {
   font-size: 9pt;
   }
 #morefoot a {
   text-decoration: underline;
   color: #ddd;
   }
 #morefoot a:hover {
   text-decoration: underline;
   color: #6598b8;
   }
 #morefoot h3 {
   font-size: 12pt;
   font-weight: normal;
   color: #dfdfdf;
   letter-spacing: -1px;
   border-bottom: 1px dotted #444;
   margin: 0;
   padding: 0 0 2px 0;
   }
 #morefoot #searchbox {
   padding: 1px;
   width: 180px;
   }
 #morefoot .col1 {
   float: left;
   width: 340px;
   }
 #morefoot .col2 {
   margin: 0 25px;
   }
 #morefoot .col2, #morefoot .col3 {
   float: left;
   width: 260px;
   }
 #morefoot li {
   padding-left: 20px;
   margin-bottom: 5px;
   background: url(images/more.gif) left 2px no-repeat;
   line-height: 17px; /* Required for cross-browser consistency; cross-browser defaults vary. */
   }
 
 
 /* footer*/
 #footer {
   clear: both;
   background: #000;
   border: 1px solid #070707;
   padding: 15px 15px 10px 15px;
   }
 #footer p {
   font-size: 9pt;
   color: #bbb;
   padding: 0;
   }
 #footer a {
   color: #bbb;
   text-decoration: underline;
   }
 #footer a:hover {
   color: #fff;
   }
 #footerleft {
   float: left;
   width: 500px;
   }
 #footerright {
   float: right;
   width: 300px;
   text-align: right;
   }
 
 
 
 /* Misc */
 
 .highlight {
   color: #222;
   font-weight: bold;
   }
 
 .cleared {
   margin: 0;
   padding: 0;
   clear: both;
   }
 
 .alignleft {
   float: left;
   margin: 5px 10px 5px 0;
   }
 .alignright {
   float: right;
   margin: 5px 0 5px 10px;
   }
 .aligncenter,
 div.aligncenter {
   margin: 10px auto;
   text-align: center;
   display: block;
   }
 
 img.alignleft {
   float: left;
   margin: 5px 10px 5px 0;
   }
 img.alignright {
   float: right;
   margin: 5px 0 5px 10px;
   }
 img.aligncenter {
   margin: 10px auto;
   text-align: center;
   display: block;
   }
 
 .wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
 
   padding-top: 4px;
 
   /* optional rounded corners for browsers that support it */
 
   -moz-border-radius: 3px;
 
   -khtml-border-radius: 3px;
 
   -webkit-border-radius: 3px;
   border-radius: 3px;
   }
 
 .wp-caption img {
   margin: 0;
   padding: 0;
   border: none;
   }
 
 .wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
   color: #111;
   }
 /* Credits footer (must be included) */
 div#credits span.credits{
     color: #000000;
     }
     
 div#credits span.credits a, 
 div#credits span.credits a:visited{
     color: #000000;
     font-weight: bold;
     text-decoration: none;
     }
     
 div#credits span.credits a:hover{
     text-decoration: underline;
     }

Alles anzeigen

Monika

wenn du statt 20px nur 3px hineinschreibst an der Stelle, die maxe beschrieb ändert sich das Verhalten ;)

chris1

vielen Dank für die Antwort.
Ja es ändert sich und nun sind alle Absätze superklein, was ja auch logisch ist. Allerdings auch da, wo ich im Post nie ein Absatztag p gesetzt hab. Komischerweise auch vor den Headern, wobei doch die Headertags eigentlich sowieso einen integrierten Absatz haben sollten.

Ich möchte es gern verstehen, denn so geht es nicht.
Irgendwie ist die Einstellung hier so, dass:
- ein p Absatztag im Post keinen Effekt hat
- das p Absatztag anscheinend nur über die style.css verändert werden kann
- wenn ich die Returntaste im Post drücke manchmal anscheinend ein p Absatztag initiiert wird, manchmal nicht

Eigentlich soll nur das p Absatztag im Post ganz normal funktionieren... ich will es einfach einsetzen können... genauso wie das br (das funktioniert auch nicht.)

Also wie kann ich das erreichen?

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Listenformatierung korrigieren

Jetzt mitmachen!