mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: So 04.12.2016 09:40 Benutzername: Passwort: Auto-Login

Thema: CSS-Problem: margin-top funktioniert nicht vom 18.06.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> CSS-Problem: margin-top funktioniert nicht
Autor Nachricht
Cörv
Threadersteller

Dabei seit: 06.10.2005
Ort: Berlin
Alter: 34
Geschlecht: Männlich
Verfasst So 18.06.2006 20:27
Titel

CSS-Problem: margin-top funktioniert nicht

Antworten mit Zitat Zum Seitenanfang

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 20:32, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
213db

Dabei seit: 20.09.2005
Ort: Nuremberg +/- 30km
Alter: 30
Geschlecht: Weiblich
Verfasst So 18.06.2006 21:49
Titel

Antworten mit Zitat Zum Seitenanfang

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 00:14, insgesamt 6-mal bearbeitet
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Cörv
Threadersteller

Dabei seit: 06.10.2005
Ort: Berlin
Alter: 34
Geschlecht: Männlich
Verfasst So 18.06.2006 22:17
Titel

Antworten mit Zitat Zum Seitenanfang

hui, thx für die Antwort * Applaus, Applaus *

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 *Schnief*
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Cörv
Threadersteller

Dabei seit: 06.10.2005
Ort: Berlin
Alter: 34
Geschlecht: Männlich
Verfasst Mo 19.06.2006 22:16
Titel

Antworten mit Zitat Zum Seitenanfang

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 Ooops


Zuletzt bearbeitet von Cörv am Mo 19.06.2006 22:24, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
213db

Dabei seit: 20.09.2005
Ort: Nuremberg +/- 30km
Alter: 30
Geschlecht: Weiblich
Verfasst Mo 19.06.2006 22:39
Titel

Antworten mit Zitat Zum Seitenanfang

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 22:41, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
Cörv
Threadersteller

Dabei seit: 06.10.2005
Ort: Berlin
Alter: 34
Geschlecht: Männlich
Verfasst Mo 19.06.2006 22:58
Titel

Antworten mit Zitat Zum Seitenanfang

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 *Thumbs up!*.

Werd auch gleichma deine zweite Variante ausprobiern. Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Cörv
Threadersteller

Dabei seit: 06.10.2005
Ort: Berlin
Alter: 34
Geschlecht: Männlich
Verfasst Mo 19.06.2006 23:13
Titel

Antworten mit Zitat Zum Seitenanfang


Jaaaaawollll, es hat geklaptt!

Einen super mega fettes Dankeschön! Und sogar der Inetz-Explorer hat nix zu meckern. * Applaus, Applaus *

Zänk ju, zänk ju, zänk ju!
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen CSS Problem mit Margin nd top
CSS padding/margin-top-Problem
margin-top und <li> Problem
[CSS] "margin-top:280px;", fehlende Unterstützung beim IE
IE7 margin Problem CSS
CSS Problem wg. padding, margin und width
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.