nicht angemeldet
Textzeile mit Linie definieren. klappt nicht ganz
Hi,
ich möchte bei einer Textzeile eine Linie unten drunter haben und habe es per CSS mal so definiert:
.text1
{font-size: 9px;color: #666666; ;
border-bottom-style:solid; border-bottom-width:1px; border-color:#666666;
margin-left:7px; }
es klappt leider nicht ganz wie ich es will.
Ich möchte NUR den Text mit margin von links 7px ausgerichtet haben,
die Linie die untendrunter erscheinen soll, soll am Tabellenanfang beginnen also ohne Margin. Wie ich es jetzt habe erscheint die Linie nur unter dem Text, die Linie soll aber komplett vom linken Tabellenrand bis zum rechten durchgezogen sein. Und möglichst 2 px Abstand vom Text haben.
Ich habs mit einem normalen Horizontal Rule per HTML probiert, jedoch hat dies dann einen zu weiten Abstand zum Text.
Ich hoffe Ihr könnt mir dabei helfen.
Danke schon mal.
Martin
-
Hi,
Ich möchte NUR den Text mit margin von links 7px ausgerichtet haben,
die Linie die untendrunter erscheinen soll, soll am Tabellenanfang beginnen also ohne Margin.Du hast das Konzept von Margin und Padding nicht verstanden.
Cheatah
--
X-Will-Answer-Email: No
X-Please-Search-Archive-First: Absolutely Yes-
Du hast das Konzept von Margin und Padding nicht verstanden.
wieso??
-
Du hast das Konzept von Margin und Padding nicht verstanden.
wieso??
Verwende anstatt margin-left padding-left, dann sollte dein Problem behoben sein. Margin gibt den Abstand AUßERHALB deines Elementes an, padding Abstand des Textes vom Element-Rand.
Viele Grüße
Beatrix-
Du hast das Konzept von Margin und Padding nicht verstanden.
wieso??
Verwende anstatt margin-left padding-left, dann sollte dein Problem behoben sein. Margin gibt den Abstand AUßERHALB deines Elementes an, padding Abstand des Textes vom Element-Rand.Viele Grüße
Beatrixhab ich mal gemacht.
Jetz hat der Text die 7 px Abstand von Links und die Linie hängt ganz links.
Die Linie sollte aber möglichst von der linken Tabellenzeile KOMPLETT durchgehen also bis ganz rechts bei der Tabellenzeile. Jetzt steht die Linie nur unter dem Text aber geht nicht weiter.
Und die Linie sollte so ca. 1-2 Pixel Abstand vom Text haben, da sonst der Link vom Text also die Unterstreichung unschön über der Linie liegt.
Wie kann ich dies erreichen?
Danke schon mal.-
Hallo,
wenn dein Text in einer Tabelle ist, dann gib der Tabellenzeile (tr) doch die gewünschten CSS-Eigenschaften: border-bottom-width, border-bottom-style für Linie unter der Tabellenzeile, padding-bottom für Abstand zum Text.Beatrix
-
Hallo,
wenn dein Text in einer Tabelle ist, dann gib der Tabellenzeile (tr) doch die gewünschten CSS-Eigenschaften: border-bottom-width, border-bottom-style für Linie unter der Tabellenzeile, padding-bottom für Abstand zum Text.mhh....
versteh ich nicht ganz.
Ja der Text ist in einer Tabelle.
Die Tabelle soll aber nur oben eine Linie haben und sonst nirgends und über der Linie soll ja noch die Textzeile stehen.
So wie es war, geht es ja nur dass die Linie ein bischen Abstand vom Text haben sollte so ein Pixel oder 2 unter dem Text stehn sollte und dass die Linie durchgehen soll also von Links nach Rechts.-
Also nochmal,
du hast eine Zeile Text, die soll unterstrichen sein und darunter kommt eine Tabelle mit weiterem Text?Stelle deine Textzeile in einen div-Bereich und gib ihm die gewünschten Eigenschaften.
http://selfhtml.teamone.de/css/eigenschaften/index.htm - Bereiche Innenabstand und Rahmen.Hier habe ich z.B. so eine durchgehende Linie, meinst du sowas?
Dann schau in den Quelltext und die zugehörige format4.css an.
http://www.belzig-online.de/aksoy/index4.htmlBeatrix
-
Hallo,
Ja der Text ist in einer Tabelle.
Die Tabelle soll aber nur oben eine Linie haben und sonst nirgends und über der Linie soll ja noch die Textzeile stehen.Was jetzt? Ist der Text jetzt in der Tabelle oder draussen?
Du schaffst es offensichtlich nicht, mit Worten zu beschreiben,
was Du meinst. Also liefere uns bitte endlich den konkreten
HTML-Quellcode!So wie es war, geht es ja nur dass die Linie ein bischen Abstand vom Text haben sollte so ein Pixel oder 2 unter dem Text stehn sollte und dass die Linie durchgehen soll also von Links nach Rechts.
Wie ich schon schrieb - offenbar nicht deutlich genug - kannst
Du voellig unabhaengig fuer die Tabelle als ganzes sowie
fuer einzelne Zellen oder Zellen je einen eigenen Border
und ein eigenes Padding definieren. Fuer TABLE zudem margin.Lies endlich die Dinge zum Box Modell und zur Tabellengestaltung
nach, und probiere es selbst aus.Du kannst also sagen, das die Tabelle als ganzes oben einen
5px dicken roten Rahmen haben soll:
table { border-top:5px solid red; }Dann kannst Du sagen, dass die erste Zeile unten eine
1px feine blaue Linie haben soll:
tr:first-child { border-bottom:1px solid blue; }Weil viele Browser das nicht koennen, kannst Du auch
eine Klasse oder ID nehmen:
CSS:
tr.erste { border-bottom:1px solid blue; }
.erste th { padding-left:7px; }
HTML:
<tr class="erste"><th>Tabellenueberschrift</th></tr>Sinnvolle HTML-Auszeichnungen fuer die Tabellenbeschriftung
waeren entweder CAPTION oder THEAD mit TH. Ein Beispiel:CSS:
thead tr { border-bottom:1px solid blue; }
thead th { padding-left:7px; }HTML:
<table>
<thead>
<tr><th colspan="2">Tabellenueberschrift</th></tr>
</thead>
<tbody>
<tr> <td>...</td> <td>...</td> </tr>
<tr> <td>...</td> <td>...</td> </tr>
<tr> <td>...</td> <td>...</td> </tr>
</tbody>
</table>Gruesse,
Thomas
-
Du schaffst es offensichtlich nicht, mit Worten zu beschreiben,
was Du meinst. Also liefere uns bitte endlich den konkreten
HTML-Quellcode!Die Tabelle mit dem Text:
<td colspan="2"><table width="555" height="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="left" valign="top" 2000 100><span class="1">Test > <a href="test.htm">hier gehts weiter</a></span>
<p> </p></td>
</tr>
</table>und der dazugehörende CSS Code aus dem Body:
.1
{font-size: 9px;color: #666666; ;
border-bottom-style:solid; border-bottom-width:1px; border-color:#666666;
padding-left:7px; }Naja ich weiß nicht, wie ich es anders erklären soll.
So wie es jetzt ist erscheint die Linie nur unter dem Text, sie soll aber noch weiter bis zum Tabellenrandende geführt werden also die gesamte Tabellenbreite einnehmen.
Und die Linie sollte möglichst 1-2 Pixel Abstand vom Text haben, da der Text einen Link hat und sonst die Unterstreichung des Links mit der Linie fast verläuft bzw knapp übereinander liegen.Hoffe du verstehst es jetzt.
Danke für alles schon mal!Martin
-
Hallo,
und der dazugehörende CSS Code aus dem Body:
.1 { }Klassennamen duerfen nur mit Buchstaben anfangen, nicht mit Zahlen.
http://www.w3.org/TR/REC-CSS2/syndata.html#q4So wie es jetzt ist erscheint die Linie nur unter dem Text, sie soll aber noch weiter bis zum Tabellenrandende geführt werden also die gesamte Tabellenbreite einnehmen.
Das sinnlose <p> </p> kannst Du entfernen.
Die komischen Zahlen 2000 und 100 im <td> auch.Ueberhaupt hast Du ja offenbar eine aeussere Tabelle (wozu?)
und dann eine innere Tabelle mit genau einer Zelle.
Diese innere Tabelle ist ganz sicher ueberfluessig.Und die Linie sollte möglichst 1-2 Pixel Abstand vom Text haben, da der Text einen Link hat und sonst die Unterstreichung des Links mit der Linie fast verläuft bzw knapp übereinander liegen.
Hoffe du verstehst es jetzt.Ich verstehe, was Du optisch erreichen willst, aber ich sehe
immer noch nicht ein, warum Du dafuer soviele Tabellen nimmst.
Es reicht ein ganz normales Block-Level-Element mit entsprechendem
margin, border und padding.Verabschiede Dich mal definitiv von den verschachtelten Tabellen.
Und auch gleich von allen veralteten Layout-Attributen im
TABLE-Element wie cellpadding, cellspacing u.s.w.
Mach all das mit CSS.Ich schlage folgendes vor:
<table>
<tr>
<td colspan="2" class="zeile1">
Test > <a href="test.htm">hier gehts weiter</a>
</td>
</tr>
<tr>
<td>Eigentlicher Tabelleninhalt</td> <td>Zelle 2</td>
</tr>oder sogar
<p class="zeile1">
Test > <a href="test.htm">hier gehts weiter</a>
</p>
<table>
<!-- eigentliche Tabelle, sofern es diese denn braucht... -->
</table>mit dem CSS
.zeile1
{
border-bottom:1px solid #666666;
padding-left:7px;
padding-bottom:2px;
}wuerden es IMHO doch auch tun.
---
Bitte, bitte, bitte schick Deinen Quellcode unbedingt
durch den HTML- und den CSS-Validator des W3C, bevor
Du hier antanzt. Das spart uns allen Zeit.Danke + Gruesse,
Thomas
-
Bitte, bitte, bitte schick Deinen Quellcode unbedingt
durch den HTML- und den CSS-Validator des W3C, bevor
Du hier antanzt. Das spart uns allen Zeit.ja schon ;-) Ist aber nicht online und kanns auch grad nicht online stellen und deshalb gehts nich grad ;-)
Meine Frage ist leider noch nicht ganz beantwortet..
:-(-
hi,
Bitte, bitte, bitte schick Deinen Quellcode unbedingt
durch den HTML- und den CSS-Validator des W3C, bevor
Du hier antanzt. Das spart uns allen Zeit.ja schon ;-) Ist aber nicht online und kanns auch grad nicht online stellen und deshalb gehts nich grad ;-)
dann benutze einen browser, mit dem du auch lokale seiten direkt an den validator schicken kannst, oder benutze die möglichkeit per datei-upload zu validieren.
Meine Frage ist leider noch nicht ganz beantwortet..
wundert dich das, so wie du dir hier die würmer aus der nase ziehen lässt ...?
gruss,
wahsaga
-
-
-
-
-
-
-
Hi,
Die Linie sollte aber möglichst von der linken Tabellenzeile KOMPLETT durchgehen also bis ganz rechts bei der Tabellenzeile. Jetzt steht die Linie nur unter dem Text aber geht nicht weiter.
Du solltest hierzu auch ein Blocklevel-Element wie DIV verwenden bzw. SPAN display:block; zuweisen.
Und die Linie sollte so ca. 1-2 Pixel Abstand vom Text haben, da sonst der Link vom Text also die Unterstreichung unschön über der Linie liegt.
Hier könnte Dir line-height helfen.
freundliche Grüße
Ingo
-
-
-
-
-
Hallo Martin,
Nur die CSS-Klasse an sich reicht nicht.
Du solltest auch noch das wesentliche HTML liefern.
Z.B. welchem Element Du die Klasse zuordnest,
und wie Deine Tabelle aufgebaut ist.Am besten waere ein Link auf eine Testseite, damit
wir gleich optisch sehen koennen, was Du meinst.Nimm konsequent nur CSS fuer alles, was Layout angeht.
Vergiss die HTML-Attribute wie cellspacing u.s.w.Fuer CSS gilt:
TABLE hat margin, border, padding, border-collapse und border-spacing.
TD hat border und padding, aber kein margin.
Auch fuer TR kannst Du border definieren, allerdings nur,
wenn fuer TABLE { border-collapsed:collapse; } definiert ist.Damit solltest Du Dein Ziel erreichen koennen.
Im Notfall machst Du halt noch ein <p>...</p>
oder <span>...</span> um den Inhalt der Tabellenzellen,
sollte aber meist nicht noetig sein.Lies:
http://selfhtml.teamone.de/css/eigenschaften/tabellen.htm
http://www.w3.org/TR/REC-CSS2/tables.htmlGruesse,
Thomas
-
Sorry kann keine Beisielseite uploadn.
aber steck das doch einfach mal in irgend ne html datei:
.text1
{font-size: 9px;color: #666666; ;
border-bottom-style:solid; border-bottom-width:1px; border-color:#666666;
margin-left:7px; }und die textzeile
<span class="text1">TEST > <a href="test.htm">hier gehts weiter</a></span>dann müsste man es sehen.
Die Linie soll aber ein Stückchen weiter links anfangen und die ganze Tabellenlänge durchgehend sein.
Und so ca. 2 Pixel weiter runter, da die Linie sons so nah am Text hängt.Ach und noch eine Frage:
habe die Tabelle bzw das hab ich im Body stehn aber dann steht die Tabelle 40 Pixel von oben und von links vom Seitenrand entfernt.
Kann man so etwas auch in % angeben, damit es bei jeder Auflösung ungefähr an gleicher Stelle hängt?
Was würdet Ihr mir da empfehlen?
margin-left: 40px;
margin-top: 40px;-
Hallo,
Sorry kann keine Beisielseite uploadn.
Diese Ausrede lasse ich nicht gelten.
Selbst wenn die Ports fuer FTP gesperrt sind, kann man
immer noch ueber Web-Interfaces Dateien hochladen..text1
{font-size: 9px;color: #666666; ;
border-bottom-style:solid; border-bottom-width:1px; border-color:#666666;
margin-left:7px; }<span class="text1">TEST > <a href="test.htm">hier gehts weiter</a></span>
Achso.
margin auf ein Inline-Element (span) angewendet.
Das ist kritisch.
Wenn schon braucht es vermutlich noch ein display:block;dann müsste man es sehen.
Die Linie soll aber ein Stückchen weiter links anfangen und die ganze Tabellenlänge durchgehend sein.
Und so ca. 2 Pixel weiter runter, da die Linie sons so nah am Text hängt.Wie Cheatah schon sagte: Du hast das Box Modell nicht kapiert.
Lies mal nach, was margin, border und padding sind:
http://www.w3.org/TR/REC-CSS2/box.html#box-dimensionshabe die Tabelle bzw das hab ich im Body stehn aber dann steht die Tabelle 40 Pixel von oben und von links vom Seitenrand entfernt.
Kann man so etwas auch in % angeben, damit es bei jeder Auflösung ungefähr an gleicher Stelle hängt?Ja, man kann es versuchen.
Ist halt dann immer die Frage: Prozent von was?
(Von den Dimensionen des Mutterelements bzw. des
zur Verfuegung stehenden Platzes...)
Manchmal hilft es, die Dimensionen und Raender u.s.w.
von HTML und BODY festzulegen:
html, body { width:100%; height:100%; margin:0; border:0 none; padding:0; }Gruesse,
Thomas
-
-