Abstände verschwinden lassen
-
Tach,
ich beschäftige mich erst seit wenigen Stunden mit CSS und brauche Hilfe. Fummle schon die ganze Zeit am Code herum, klappt aber nicht.
Meine Problemchen:
1.) Über dem Header sind noch ca. 10 Pixel „Luft“, die ich nicht wegbekomme. Habe ich die padding/margin-Befehle möglicherweise falsch eingefügt?
2.) Ebenfalls „störende Pixel“ sind zwischen dem Header und dem Menü. Man sieht das ganz gut an dem Comicmännchen rechts; eigentlich sollte sein Körper auf der Trennlinie darunter enden. Aber auch hier sind ein paar Pixel zu viel – an der Grafikdatei liegt es nicht, die passt.
3.) Unten steht ja dieser WordPress-Hinweis: Ich möchte den selbstverständlich stehenlassen, würde aber auch gern ein wenig eigenen Text dadrüber schreiben. Geht das irgendwie oder habe ich da keinen Zugriff drauf?
4.) Auch den Inhalt der einzelnen Seiten würde ich gerne ein paar Pixel nach oben verschieben, wie stelle ich das an?
Es geht um:
http://www.herrsalami.wordpress.deWürde mich über Hilfe freuen!
Gruß
JohannesDer Blog bei dem ich Hilfe benötige heißt (nur für angemeldete Benutzer sichtbar).
-
Hallo Johannes,
- Bin momentan ratlos, wo die herkommen. Es hat allerdings den Anschein, als ob das „clear:both“ etwas damit zu tun hat. Sobald ich das im Firebug deaktiviere, verschwindet der Abstand.
Du hast lt. Firebug übrigens drei Header ID Definitionen im CSS Code. Einmal die vom Theme und dann zweimal in deinem eigenen CSS Code. In deinen beiden Definitionen steht beides mal das gleiche drin.
Wir arbeitest du denn mit CustomCSS? Normalerweise fügt man im Editor nur die Definitionen hinzu, die man ändern möchte und lässt den Rest vom Stylesheet des Themes erledigen.
- Das liegt am „vertical-align:baseline“. Versuch mal eine CSS Definition für das Bild im Header, mit einem „vertical-align:bottom“
#header a img { vertical-align:bottom; } - Nachdem du auf WordPress.com keinen Zugriff auf den PHP Code bzw. das Template hast, sieht es schlecht aus.
Wenn du da unten Text haben möchtest, wäre vielleicht ein Wechsel zu einem Theme mit einem Widgetbereich im Footer eine Alternative. - Ohne genau zu wissen, was du meinst, wäre mein Tipp, an den „margins“ der IDs „primary-content“ und „secondary-content“ zu drehen. Hier ist im Moment bei beiden ein Wert von 10px eingestellt.
#primary-content { ... margin: 10px 24px 0 0; ... }#secondary-content, #secondary-home { margin-top: 10px; ... }
Gruß
Martin(IQ) - Bin momentan ratlos, wo die herkommen. Es hat allerdings den Anschein, als ob das „clear:both“ etwas damit zu tun hat. Sobald ich das im Firebug deaktiviere, verschwindet der Abstand.
-
Danke erstmal!
1.) Ich vermute mal, ich habe da im CSS-Editor selbst was verbockt. Hier mal alles, was ich im Stylesheet-Editor eingefügt habe, da müsste dann wahrscheinlich irgendwo der Fehler sein:
#header {
clear:both;
margin:0;
overflow:hidden;
word-wrap:break-word;
height:auto!important;
padding:0;
width:auto;
}#primary-content {
clear:both;
display:inline;
float:left;
margin:10px 24px 0 0;
padding:0;
width:625px;
}#secondary-content,#secondary-home {
margin-top:10px;
padding:10px;
}.comments {
top:10px;
right:10px;
}#secondary-content ul {
margin:0 0 0 10px;
padding-left:0;
}#top-menu {
padding:0;
font:1.21em/1em Courier;
position:relative;
text-transform:uppercase;
width:945px;
z-index:2;
}#top-menu li {
float:left;
list-style:none;
margin:0;
padding:0;
position:relative;
}#top-menu ul:first-child > li {
margin:5px 25px 5px 0;
}body {
line-height:1;
color:#C4C4C4;
font:1em/1.4em Geneva, Verdana, sans-serif;
text-align:justify;
}#top-menu li a:hover {
color:#C4C4C4;
text-decoration:none;
}#top-menu li.current_page_item a,#top-menu li.current-menu-item a {
color:#FFFFFF;
display:block;
text-align:center;
}#header {
height:auto!important;
padding:0;
width:auto;
clear:both;
margin:0;
overflow:hidden;
word-wrap:break-word;
}#primary-content h1.post-title a,#primary-content h2.post-title a {
float:left;
font-size:0;
padding:0;
text-shadow:0 0 #fff;
width:0;
word-wrap:break-word;
}#primary-content h1.post-title,#primary-content h2.post-title {
background:url('images/border.png') 0 0 repeat-x;
display:inline-block;
min-height:0;
padding:0;
width:0;
}#primary-content h1.post-title a,#primary-content h2.post-title a {
line-height:0;
width:0;
}div.post-wrap {
font-size:11px;
line-height:26px;
margin-bottom:20px;
}#secondary-content h3 {
font:2em/1.4em Marvel, Arial, sans-serif;
text-shadow:0 0 #fff;
}#primary-content img,#secondary-content img {
background:none repeat scroll 0 0 #fff;
border:0 solid #e2d8Ba;
height:auto;
padding:0;
max-width:99%;
}table {
border-collapse:collapse;
border-spacing:0;
margin-bottom:5px;
width:100%;
}th {
border-bottom:1px solid #aaa;
padding:10px 10px 5px;
}td {
border-top:1px solid #c3c3c3;
padding:10px;
}td a {
color:#334759;
}dl {
padding-bottom:5px;
}dt {
color:#334759;
font-weight:bold;
}dd {
margin:0 0 15px 15px;
}2.) Prima, hat geklappt!
3.) Okay, danke.
4.) Ich meine diese hier:
-
Verzeihung, ist durch den Code ein wenig lang geworden, aber ich dachte, wenn ich das ganze Übel poste, fällt die Fehlerfindung leichter.
Und noch etwas: Es ist nicht möglich, die Verlinkung des Headers zu entfernen, richtig?
-
Wäre wirklich schwer, sich da durchzukämpfen. Am besten wäre natürlich, nochmal sauber von vorne anzufangen, und dann nur die Änderungen zu machen, die notwendig sind.
Wenn du dir deine Liste genau ansiehst, wirst du merken, das gleich zu Beginn eine „#header“ Definition vorhanden ist. Etwas weiter unten kommt dann noch eine, mit dem gleichen Inhalt.
Momentan sieht es so aus, als ob du an vielen Stellen die Werte mutwillig auf „0“ gesetzt hast. ;)
zu 4. Da hätten wir z.B. so einen Fall. Über dem Strich steht normalerweise der Seitentitel (h1-Überschrift), den du mit „0“-Werten bei „line-height, width, ..:“ versucht unsichtbar zu machen.
Einfacher wäre stattdessen, einfach ein „display:none“ zu setzen. Dann würde der Platz komplett frei werden.
#primary-content h1.post-title { display:none; }Der Abstand (15px) unter der Trennlinie ist auf ein padding der CSS-Klasse „border-bottom“ zurückzuführen. Siehe
#primary-content .bottom-border { padding: 15px 0 0; }Wenn du mutig bist, kannst du hier natürlich auch mit einem „display:none“ probieren, die Trennlinie auszublenden. Ich weiß allerdings nicht, ob diese noch irgendwo an anderer Stelle verwendet wird, und damit etwaige Änderungen Auswirkungen auf andere Teile deines Blogs/deiner Seite haben. Also auf eigene Gefahr:
#primary-content .bottom-border { padding: 15px 0 0; display:none; }Es ist nicht möglich, die Verlinkung des Headers zu entfernen, richtig?
Ohne Zugriff auf das Template kaum. Es sei denn, dein Theme bietet sowas entweder unter Design – Theme-Optionen oder Design – Header an.
Gruß
Martin(IQ) -
Danke, ich habe jetzt bis auf die Sache mit den 10px über dem Header alles lösen können. Den CSS-Code nochmal neu per Hand aufzusetzen traue ich mir ehrlich gesagt nicht zu, dann lasse ich es eben jetzt so, sofern nicht noch jemandem eine Lösung einfällt.
-
Solange du dich noch in deinem CSS-Code auskennst, passt es ja. Ich sage ja nur, dass es aus Gründen der Wartbarkeitkeit besser wäre, nochmal sauber von vorne anzufangen. ;)
Vielleicht fällt ja Torsten (anderer Moderator hier im Forum) noch etwas zu der 10px Geschichte über dem Header ein. Der wird sich spätestens morgen bestimmt melden. :)
Gruß
Martin(IQ) -
Es hat allerdings den Anschein, als ob das „clear:both“ etwas damit zu tun hat. Sobald ich das im Firebug deaktiviere, verschwindet der Abstand.
Das „Clear:both“ sorgt dafür, dass das Element ein Block-Element wird.
Also entweder „clear:none;“ oder „display:inline;“, um aus dem Block-Element ein Inline-Element zu machen. Und dann testen, ob es Probleme gibt.
Gruß, Torsten
-
-
Danke Torsten. :)
So ganz verstehe ich das noch nicht. Der Header war also ein Block-Element. Die margins im CSS Code waren aber doch alle auf 0 gesetzt. Das übergeordnete „header-wrap“-div hatte auch kein padding. Woher kommt also der Außenabstand?
Zudem gab es im „header-wrap“ auch kein vorhergehendes Element, zu dem das „header“-Blockelement einen Abstand/eine neue Zeile erzeugen sollte.
Die Erklärung mit dem Block-Element macht schon Sinn, ich will es einfach nur verstehen. Deswegen die Frage. :)
Gruß
Martin(IQ) -
Und nochwas: Kann ich die Größe/Position (und vielleicht auch den Text) der „Hinterlasse einen Kommentar“-Zeile irgendwie verändern?
Gruß -
@Martin:
Der header-wrap enthält zwei Elemente, Header und top-menu. Header hatte das „clear: both“. Somit war Header ein Block-Element, erzeugt also einen Umbruch. Da es kein Element auf der gleichen Ebene gibt (header ist ja das erste im wrapper) wird somit nur ein Umbruch erzeugt, also eine „Leerzeile“ über dem Header. Sehr tückisch, weil es komplett unsinnig ist und natürlich eher durch margin oder padding erzeugt werden sollte (da es ja auch nur bedingt steuerbar ist).
So ist zumindest meine Interpretation der Dinge … ;-)@herrsalami:
Der Text ist nur global auf allen Themes änderbar und somit nicht wirklich individuell anpassbar. Größe/Position lässt sich über CSS stylen. Kommt halt darauf an, was du genau vorhast. Wenn Du uns wissen lässt, was du vorhast, dann können wir dir bestimmt helfen.Gruß, Torsten
-
Hier sieht man, dass die „Hinterlasse einen Kommentar“-Zeile meine das Lesen der Überschrift stört. Ich möchte die Kommentier-Funktion dort nicht deaktivieren, aber es lässt sich doch bestimmt verhindern, dass diese Zeile dort steht, oder?
-
Komplett ausblenden geht ganz einfach:
.comments { display: none; }Wenn Du den Link behalten willst, könntest Du auch einfach die Abstände erhöhen, um das Überlappen zu verhindern:
div.post-wrap { margin-top: 30px; } .comments { margin-top: 7px; }Gruß, Torsten
- Das Thema ‘Abstände verschwinden lassen’ ist für neue Antworten geschlossen.
de.WordPress.com Forums 