Abstand zum Text unter dem Header verringern... wie?

chris1

Hi,
bitte schaut mal hier...

Der Abstand unter dem jeweiligen Header ist zu groß. Wie kann ich diesen Abstand verringern?

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

Whoppy

Schau dir mal mit Firebug deine Seite an und du wirst das ganz schnell selber sehen, Stichwort padding.

Gruß Whoppy

chris1

Vielen Dank für die Antwort.
Firebug kannte ich bisher nicht. Vielen Dank für den Hinweis.

Ich versteh es nicht. Da fehlt mir wohl Info bzw. Wissen.
Ich sehe in firebug, dass padding durchgestrichen ist, aber was bedeutet das?

Was habe ich für Möglichkeiten den Abstand des Headers zum Text zu verringern?

Momentan sieht der Code in der style.css so aus:

Code

/* Defaults */


* {
  margin: 0;
  padding: 0;
  }


h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  margin-bottom:-2;
  padding: 10px 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;
  }

Alles anzeigen

Nachdem ich bei selfhtml geschaut hab, hab ich ganz oben unter h1,h2,h3,h4,h5
margin-bottom:-2;
eingesetzt.
Kein Effekt.

Was mache ich falsch?

Morris

Wenn eine CSS-Deklaration durchgestrichen ist, dann bedeutet das, dass diese von einer anderen überschrieben wird.

Gruß
Mo

chris1

Vielen Dank für den Hinweis... das war wichtig.

Jetzt hab ich rausgefunden... wenn ich unter:
h1,h2,h3,h4,h5
statt
margin: 0;

margin-bottom: -12px
schreibe.

Verschiebt sich der Abstand, den ich bearbeiten wollte.
Das passiert dann allerdings für alle header gleichzeitig.

Ziel ist:
h1: Abstand soll so bleiben wie er ist
h2: Abstand soll geringer sein
h3: Abstand soll noch geringer als bei h2 sein

wie geht das? bzw. was muss ich dafür abändern?

Whoppy

Momentan sprichst du ja alle Überschriften h1 bis h6 gleichzeitig an. Willst du sie nun einzeln formatieren musst du sie auch einzeln ansprechen.

Beispiel:

PHP

h1 {
padding:15px;
}

PHP

h2, h3 {
padding:10px;
}

PHP

h4, h5, h6 {
 padding:5px;
 }

Gruß Whoppy

chris1

Vielen Dank... das war ein großer Schritt.
Jetzt sieht es so aus...

Code

h1 {
  padding: 0 0 10px 0;
} 
h2, p {
  font-size: 11pt;
  padding: 0 0 0px 0;
} 


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

Alles anzeigen

Jetzt muss nur noch der Abstand von h4, h5, h6 zum darunterliegendem Text verringert werden.
Hab schon alles ausprobiert mit padding und margin... irgendwie klappt es nie.
Was mache ich falsch?

Whoppy

Nimm mal das "p" raus, dann kannst du auch den padding-Wert für h4-h6 vernünftig angeben.

Gruß Whoppy

chris1

Das hatte ich schon probiert.
Daraufhin schiebt sich wieder alles zusammen:
ohne p für h4-6 sieht es so aus...

Whoppy

Jetzt hast du ja gar keine Werte für h4-h6 angegeben :confused:.

Formatiere deine Absätze "p" und deine Überschriften "h1-h6" separat.

Beispiel:

PHP

p {
margin:0 0 15px;
}


h4, h5, h6 {
padding:10px 0;
}

Gruß Whoppy

chris1

Puh... vielen Dank... nun ist auf jeden Fall der Post-Bereich gut.

Zwischendurch ist aber in der Sidebar der normale Text geschrumpft. Hab schon versucht einiges rückgängig zu machen... funktioniert nicht.

Der Text unter den Kategorien soll dieselbe Größe haben wie der Post - Text und der Willkommenstext.

Ich hab eigentlich nichts verändert außer den besprochenen Sachen.
Schau hier...

Was mach ich jetzt noch falsch?

Der aktuelle Code der style.css:

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, {
  padding: 0 20px 10px 0;
} 
h2, a {
  font-size: 11pt;
} 
h3, {
  padding: 0 20px 10px 0;
} 
h3, a {
  font-size: 9pt;
} 
h4, h5, h6, {
  font-size: 8pt;
  padding: 0 20px 10px 0; 
}
h4, h5, h6, a {
  font-size: 8pt;
}
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;}




/* 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: normal;

Alles anzeigen

Code musste ich kürzen

maxe

das kommt von dem a:

Code

h4, h5, h6, [COLOR=Red]a[/COLOR] {
font-size:8pt;




}

Das a solltest du wieder gesondert formatieren.

chris1

wenn ich das a bzw. diese drei Code-Schnipsel rausnehme,

Code

h2, a {
  font-size: 11pt;
} 


h3, a {
  font-size: 9pt;
} 


h4, h5, h6, a {
  font-size: 8pt;
}

Alles anzeigen

verändert sich wieder die Schriftgröße der Header.
Wo genau muss ich denn das gesondert formatieren?

maxe

nein, du sollst nicht 3x das a formatieren ;-) sondern das a extra formatieren:

Code

h4, h5, h6 {
font-size:8pt;
}


a {
font-size:9pt;
}

chris1

ich liebe Euch alle :oops:

es klappt. (Jetzt reichts mir auch erstmal mit der style.css)

Whoppy

Wir lieben dich auch...

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Abstand zum Text unter dem Header verringern... wie?

Jetzt mitmachen!