Autor |
Nachricht |
Cörv
Threadersteller
Dabei seit: 06.10.2005
Ort: Berlin
Alter: 42
Geschlecht:
|
Verfasst So 18.06.2006 21:27
Titel CSS-Problem: margin-top funktioniert nicht |
|
|
Hallo,
ich hab da mal folgendes Problem:
Ich hab ein kleines Stückchen Text und das möchte ich mithilfe von CSS an eine bestimmte Stelle bewegen:
Code: | <div class="spalte1">Laden Sie sich hier meinen Lebenslauf als PDF herunter.
<div class="schuppePDF"style=" margin-top: 8px;"><a href="Lebenslauf.pdf">
<span class="schuppenText">Lebenslauf.pdf</span></a></div>
</div> |
Der besagte Text lautet Lebenslauf.pdf oben in der dritten Zeile, zwischen dem <span>-Tag.
Und das CSS sieht folgendermaßen aus:
Code: | .schuppenText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7ace7d;
margin-top: 15px;
margin-left: 30px;
font-weight: normal;
} |
Nu, is das so, dass margin-left, einwandfrei funktioniert, aber margin-top nicht? Was hab ich falsch gemacht? Is bestimmt nur ein ganz dummer Fehler, aber ich komm nich drauf!
Zuletzt bearbeitet von Cörv am So 18.06.2006 21:32, insgesamt 1-mal bearbeitet
|
|
|
|
|
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst So 18.06.2006 22:49
Titel
|
|
|
wenn du inline-elementen vertikale aussenabstände zuweist,dann hat das
keine auswirkung auf das das layout des elementinhalts. den effekt könntest
du sehen,wenn du dem element eine hintergrundfarbe zuweist.
was möchtest du erreichen? dass der elementinhalt anderen inhalt überlappt,oder...?
wenn ja:
[code="CSS"]vertical-align: 0123px;
/* wenn der wert positiv ist,dann wird der inline-text entsprechend über der grundlinie
ausgerichtet. bei negativen zahlen wird er demnach unter der grundlinie ausgerichtet. */[/code]
//edit
nein,deine div-layer sind elemente mit ner block-box.
du kannst dir den zweiten div-layer eigentlich sparen. (versuch die inhalte semantisch
korrekt zu "verpacken"!) am besten du packst
den den link zum pdf in den ersten div-layer mitrein und verpasst dem anker-element eine
id. und gibst dann für die id folgendes an:
Code: | div.spalte1 a#SchuppenText {
/* alle änderungen,die zusätzlich zu den regeln die
für das a-element bereits deklariert wurden.
in diesem fall wohl nur die ausrichtung innerhalb
der zeilenbox. */
vertical-align: -15px;
}
...................................................
HTML:
<a href="url" id="SchuppenText">Blabla-PDF</a> |
Zuletzt bearbeitet von 213db am Mo 19.06.2006 01:14, insgesamt 6-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Cörv
Threadersteller
Dabei seit: 06.10.2005
Ort: Berlin
Alter: 42
Geschlecht:
|
Verfasst So 18.06.2006 23:17
Titel
|
|
|
hui, thx für die Antwort
also wennsch das jetz richtig verstehe, dann ist das inline-element mein div-layer, in dem mein Text drin is, ja?
also mit dem Layer ist alles in Ordnung, der ist so, wie ich ihn haben will
mein problem ist die css-Klasse ".schuppenText", die ich dem Text direkt zugewiesen hab
das was ich genau erreichen will ist eigentlich nur den text 15 pixel niedriger zu setzen, weil der so am oberen Rand von dem Layer klebt, überlappen soll der dabei nichts, der Text ist da nämlich ganz alleine in dem Div-Layer drin
dat mit dem vertical-align hat leider nich geklappt
|
|
|
|
|
Cörv
Threadersteller
Dabei seit: 06.10.2005
Ort: Berlin
Alter: 42
Geschlecht:
|
Verfasst Mo 19.06.2006 23:16
Titel
|
|
|
holla
ich weiß nich, ob ich dat nu richig verstanden hab, aber ich werd mal probieren
ich hab jetzt auch was zum vorzeigen, damit man sich das Problem besser vorstellen kann
http://corvinweber.de/lebenslauf.html
edit:
oh, hab grad gesehen im IE siehts noch beschissener aus, na da hab ich wohl noch wat zu tun
Zuletzt bearbeitet von Cörv am Mo 19.06.2006 23:24, insgesamt 1-mal bearbeitet
|
|
|
|
|
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 19.06.2006 23:39
Titel
|
|
|
hast du gestern abend noch mitbkeommen,dass ich meine ersten post editiert hab?
die dort beschriebene lösung funktioniert auf jedenfall.
da das div-element jedoch noch gestyled ist (was ich gestern noch nicht
wusste),genügt das hier:
Code: | .schuppenText {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #7ace7d;
line-height: 27px;
margin-left: 30px;
font-weight: normal;
} |
Zuletzt bearbeitet von 213db am Mo 19.06.2006 23:41, insgesamt 1-mal bearbeitet
|
|
|
|
|
Cörv
Threadersteller
Dabei seit: 06.10.2005
Ort: Berlin
Alter: 42
Geschlecht:
|
Verfasst Mo 19.06.2006 23:58
Titel
|
|
|
Ja, danke, hab ich grad eben gesehen.
Bin auch grad dabei das auszuprobieren. Im Firefox hats auch geklappt, aber im IE hatta mir den Text zu weit runtergesetzt. Aber ich geb nich auf .
Werd auch gleichma deine zweite Variante ausprobiern.
|
|
|
|
|
Cörv
Threadersteller
Dabei seit: 06.10.2005
Ort: Berlin
Alter: 42
Geschlecht:
|
Verfasst Di 20.06.2006 00:13
Titel
|
|
|
Jaaaaawollll, es hat geklaptt!
Einen super mega fettes Dankeschön! Und sogar der Inetz-Explorer hat nix zu meckern.
Zänk ju, zänk ju, zänk ju!
|
|
|
|
|
|
|
|
Ähnliche Themen |
IE7 margin Problem CSS
IE margin problem
margin-top und <li> Problem
CSS Problem mit Margin nd top
Margin-Problem im Opera
problem mit padding/margin
|
|