Horizontale Linien in Tabelle bei <tr> mit CSS

Flex · 07.04.2009

Ich habe eine Tabelle und möchte zwischen den Zeilen <tr> eine horizontale Linie haben, bis auf die erste Zeile.

Das ganz wollte ich dann mit CSS formatieren und zwar so:

Hier ist die Tabelle:

HTML:

<table width="100%" border="0" cellpadding="20" cellspacing="0" id="linkstabelle">
    <tr>
     <td width="40%"><a href="http://www.fronius.de"><img src="Bilder/logos/fronius-logo.gif" alt="Fronius" width="142" height="39"></a></td>
     <td>Fronius</td>
    </tr>
    <tr class="tabellenlinie">
     <td><a href="http://www.heckert-solar.com"><img src="Bilder/logos/heckert_solar_logo.jpg" alt="Heckert Solar" width="140" height="61"></a></td>
     <td>Heckert Solar</td>
    </tr>
    <tr class="tabellenlinie">
     <td><a href="http://www.sharp.de/solar"><img src="Bilder/logos/sharp_logo.gif" alt="Sharp Solar" width="142" height="181"></a></td>
     <td>Sharp Solar</td>
    </tr>
   </table>

Und so sieht das CSS aus:

Code:

.tabellenlinie {
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #999999;
}

Alllerdings erhalte ich keine Linien!!
Wenn ich die Klasse beim td-Tag der Tabelle anwende, dann zeichnet er die Linie bei der Zelle.
Ich benötige aber die ganze Zeile!!

Was mach ich falsch?

futtlui · 07.04.2009

probier mal

Code:

tr.tabellenlinie td {
 border-top-width: 1px;
 border-top-style: solid;
 border-top-color: #999999;
}

das müsste automatische alle <td> innerhalb eines mit der Klasse "tabellenlinie" befindlichen <tr> tags auswählen. Dann muss Du die Klasse nicht für jede Zelle einzeln vergeben.

Flex · 07.04.2009

Super, das funktioniert! So wollte ich das eigentlich haben!
Kannst mir noch erklären, wo da mein Fehler war? War die Klasse falsch definiert?

futtlui · 07.04.2009

na weil die Attribute auf td keine sichtbare Wirkung haben (wie z.B. auch background als Style für einen img-Tag. Das bringt auch nix. Und was Du jetzt gemacht hast ist, die CSS-Eigenschaften auf die td-Kindelemente weiter zu geben, die eben über einen (sichtbaren) Rahmen verfügen.

noch ein kleiner Tipp:

Code:

border-top: 1px solid #999999;

reicht übrigens auch, d.h. Du kannst die einzelnen Werte im Sammelattribut border[-top/-left/-right/-bottom] kombinieren

Flex · 07.04.2009

Ah ok!

Wo du gerade einen Img-tag erwähnst. Wie kann ich denn einem Image einen Rahmen mit CSS geben, also um das Image herum im Abstand von ca. 5 px einen Rahmen in schwarz in der Stärke 1 px.? Das hat bei mir auch nicht hingehauen, habe es mit dem Box-Element und mit dem Rahmen- und Randelement probiert... das CSS hatte ich für img erstellt

futtlui · 07.04.2009

Box-Element? Das machst Du ganz einfach mit border in Verbindung mit padding, was der Abstand Bild -> Rahmen ist.
Also

HTML:

<img src="bild.jpg" style="border:1px solid #000; padding:5px;">

Flex · 08.04.2009

Danke futtlui, aber wie bekomme ich das mit CSS hin?

futtlui · 08.04.2009

ähm, das ist doch CSS!?!?
Mit style kann man CSS-Eigenschaften direkt in die Tags schreiben - wenn Du das nicht willst nimmst Du die Angaben ins Stylesheet und legst ne Klasse an, die dann nach bekanntem Muster wieder in den Tag rein muss. Kommt auf's gleiche raus.

Flex · 09.04.2009

Hmmm....
ich meinte das CSS-Style schon für den img-tag definieren, also so:

Für das div-Element "maintext" soll jedes img-tag die Formatierung erhalten (allerdings wird hier nichts dargestellt)

#maintext img {
border: 1px;
padding: 5px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}

Wie muss denn das dann richtig lauten?

Stefan · 09.04.2009

Was heißt "nichts"? Wenn du nen schwarzen durchgezogenen Rahmen willst, dann solltest du das auch noch bei der Angabe des Rahmens vermerken - nur die Breite reicht nicht.

futtlui · 09.04.2009

liegt wahrscheinlich am ID-Selektor #name - probier doch einfach mal stattdessen ne Klasse zu verwenden und dem div "maintext" zuzuweisen:

Code:

.maintext img {
border: 1px;
padding: 5px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}

P.S.: Bitte

HTML:

 bzw. [code] verwenden!!!!

[EDIT]
ups, hab ich garnicht gesehen. StGaensler hat natürlich erstmal recht, Du hast ja den gewünschten Rahmen noch gar nicht angegeben.

Flex · 09.04.2009

Also jetzt hab ich's so:

#maintext img {
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border: 1px solid #666666;
}

Auch hier hab ich keinen Rahmen....

Savior · 10.04.2009

Also das funktioniert schon ganz genau so. Aber wie futtlui schon geschrieben hat... Hat dein maintext-div nen id oder nen class-Selektor?

Sollte weiterhin mangelnde Funktionalität auftreten, so würde es sich anbieten den zugehörigen HTML-Code zum CSS zu posten. Das vereinfacht das Ratespiel ungemein.

Flex · 10.04.2009

Der "maintext"-DIV ist ein ID Sektor (#).

Ok, poste nachher mal den kompletten Quelltext...

Flex · 10.04.2009

Hier ist jetzt mal der Quelltext bis zu dem image:

HTML:

<style type="text/css">
<!--
#menue {
position:absolute;
left:17px;
top:162px;
width:110px;
height:189px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:13px;
top:400px;
width:125px;
height:127px;
z-index:2;
}
#Tabelle_01 {
background-image: url(Bilder/logos/wzrennerhg.jpg);
background-repeat: no-repeat;
background-position: 130px 96px;
}
#maintext img {
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
}
-->
</style>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon">
<link href="css/menue.css" rel="stylesheet" type="text/css">
<link href="css/adresse_balken_links.css" rel="stylesheet" type="text/css">
<link href="css/copyright.css" rel="stylesheet" type="text/css">
<link href="css/maintext.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Layout.psd) -->
<div id="menue">
<ul class="menu">
<li><a href="index.html" class="activvisited"><span>Home</span></a></li>
<li><a href="firma.html" class="activvisited"><span>Firma</span></a></li>
<li><a href="photovoltaik.html" class="active"><span>Photovoltaik</span></a></li>
<li><a href="bilder.html" class="activvisited"><span>Bilder</span></a></li>
<li><a href="leistungen.html" class="activvisited"><span>Leistungen</span></a></li>
<li><a href="links.html" class="activvisited"><span>Links</span></a></li>
<li><a href="kontakt.html" class="activvisited"><span>Kontakt</span></a></li>
<li><a href="impressum.html" class="activvisited"><span>Impressum</span></a></li>
</ul>
</div>
<table id="Tabelle_01" width="800" height="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2"><img src="Bilder/indexpsd_01.jpg" width="800" height="103" alt=""></td>
</tr>
<tr>
<td width="156" valign="top"><img src="Bilder/indexpsd_02.jpg" width="156" height="497" alt=""></td>
<td width="644" valign="top"><div id="maintext">
<h1>Photovoltaik</h1>
<p><img src="images/fwhaus.jpg" alt="PV-Anlage Saulburg" width="150" height="113" align="right">

futtlui · 10.04.2009

ja, also ich hab's ja schonmal geschrieben, dass Du statt nem ID-Selektor für die CSS-Eigenschaften ne Klasse nehmen sollst.

Genau wie ich schonmal geschrieben hab, dass Du bitte für HTML bzw. CSS/Programmcode die BB-Codes verwenden sollst! Stattdessen jetzt roter Text auf dem (bei mir und den meisten Leuten) blauen Skin, da komm ich mir irgendwie komisch vor. Bitte achte bei zukünftigen Postings darauf!

Flex · 11.04.2009

Tschuldigung bzgl. dem BB-Code, hatte das irgendwie nicht geschnallt. Sorry!! Kommt nicht wieder vor!

Ok, es ist also nicht möglich, das ich ein img-tag mit einem ID-Sektor in CSS formatiere. Ok, ich werde es dann mal mit einer Klasse versuchen. Ein ID-Sektor wäre halt weniger Quelltext gewesen und man müsste nicht bei jedem Bild extra die Klasse hinzufügen. Ich wollte deshalb extra eine ID verwenden.

futtlui · 11.04.2009

du sollst ja die Klasse auch dem div zuweisen und nicht den Bildern selbst. Mit .divname img werden die Eigenschaften dann ja nur auf die img-Tags wirksam. Das sind dann vielleicht 20 Zeichen mehr Quelltext in der Seite weil Du im div-Tag noch class="deine_klasse" schreiben musst...

Grundsätzlich hast Du mit Klassen eh immer mehr Flexibilität, weil IDs ja nur 1x vorkommen dürfen. Die brauchst Du nur, wenn ein div direkt angesprochen werden soll und Du ins DOM eingreifen willst.

Savior · 11.04.2009

Aaaaalso. Grundsätzlich funktioniert das mit nem ID-Selektor genauso. Übrigens auch mit deinem geposteten HTML-Schnipsel. Jedoch erst, wenn du auch die border-Eigenschaft für das img wieder hinzufügst. Hattest du ja schonmal gepostet und evtl. nur dort im Code vergessen.

HTML:

#maintext img {
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border: 1px solid #000;
}

Das funktioniert hier zumindest problemlos, sofern nur das Bild "PV-Anlage Saulburg" nen Rahmen erhalten sollte, weil es im #maintext liegt.

Allerdings bindest du auch externes CSS, wie z.B. maintext.css, ein. Ist es vielleicht möglich, dass du da dasselbe img nochmal anders definiert hast?

Flex · 11.04.2009

@futtlui
Achso, jetzt weiß ich was du meinst, ja ok, die Klasse nur auf das DIV-ID zuweisen - das macht Sinn - richtig! Muss ich mal testen!

@Savior
Oh, also dein letzter Satz ist interessant, eigentlich hatte ich da noch kein css für ein img eingebaut, also im #maintext, aber da muss ich gleich mal nachsehen, ob sich da nicht was eingeschlichen hat! Danke für den Tip!

und... ich hatte bislang nur ein Foto auf der Seite.

Werde mal eure Möglichkeiten testen, und rühr mich wieder, vielen herzlichen Dank soweit für die Hilfe!

Horizontale Linien in Tabelle bei <tr> mit CSS

Flex

futtlui

Flex

futtlui

Flex

futtlui

Flex

futtlui

Flex

Stefan

futtlui

Flex

Savior

Flex

Flex

futtlui

Flex

futtlui

Savior

Flex

Horizontale Linien in Tabelle bei <tr> mit CSS

ANGEBOTE & SPONSOREN

Neueste Beiträge

Statistik des Forums