[erledigt][CSS] tabelle zu div

[Ambience]

Hallo,

ich hab mir endlich mal an die Nase gefasst und bin dabei einige Seiten von mir auf div containern umzubauen...

Code: Alles auswählen

<div class="news"><h3>Aktuelle News</h3></div>
<!-- BEGIN news -->
<p>
<table width="700" class="border">  
  <tr>
    <td class="news_header" colspan="2">{news.TITLE} ({news.TIME})</td>
  </tr>
  <tr>
    <td height="64" width="60"><img src="templates/Crystal/images/32/network.png" /></td>
    <td>{news.MESSAGE}</td>
  </tr>
</table>
</p>
<!-- END news -->

nun, ich habe keine ahnung wie ich das machen soll, das ich meine newstabelle in einen oder 2 div container bekomme. Die Tabelle hat einen rahmen ausenrum, (class="border" => 1px solid #000000;)
Die class="news_header" hat lediglich eine hintergrundfarbe..

Dabei ist zu achten, das die ganze umkonstruierte tabelle dann noch margin-left: 150px; hat. Immer wenn ich das versucht habe, auf div umzubauen hab ich richtig komische sachen erhalten. (Ist mir erst aufgefallen als ich IE mit FF verglichen habe.. IE ist alles perfekt und FF, da kommt nen richtig komisches Design dann bei raus)

@Pyra: NENN MICH NICHT WIEDER SUCHFAUL, ich habe die ganze Zeit gesucht und über die Suche konnte ich erst mein Ganzes design umbauen(Man siehe):

Code: Alles auswählen

    <h1>Lolig</h1>
    <ul class="navigation">
      <li><a href="#">Startseite</a></li>
      <li><a href="#">Login</a></li>
      <li><a href="#">Impressum</a></li>
      <li><a href="#">Hilfe</a></li>
      <li><a href="#">Forum</a></li>
    </ul>
    
    <div class="content">
<div class="info"><h3>Neu hier?</h3></div>
<p>Klicke hier, um zu erfahren, ............. Wirf am besten gleich ein paar Blicke in die FAQ.</p>

Muss noch dazusagen, diese div container machen einen heiden spaß, weil man nie weiß was man rausbekommt, aber das erstaunlichste ist das man sich damit viele Tabellen Sparren kann und sie die html dateien um einiges abspecken.

edit: so sollte das dann aussehen, nur mit div containern.

[ externes Bild ]

[Pyramide]

Mir ist jetzt nicht ganz klar, was genau du eigentlich suchst (im Code ist eine Liste, im Screenshot keine?). Vielleicht float:left?

[Ambience]

nein, ich brauch diese tabelle genau als div container.. diese tabelle im screenshot muss genauso aussehen wie jetzt, nur das es keine table und td und tr tags gibt, sondern nurnoch div.. nur leider haut das bei mir nicht hin, egal wie ich das drehe und wende, es kommt dabei einfach ein "dreck" raus.


ich habs mal nochmal versucht, aber irgendwie klappt das auch nicht so ganz.

Code: Alles auswählen

<div style="border: 1px solid #000000;padding:2px;">
  <div style="background-color: #e5e5e5;font-size: 11px;height: 20px;font-weight: bold;">Test</div>
    <div style="height:64px;background-image: url(templates/Crystal/images/32/network.png);background-repeat:no-repeat;margin-top:20px;">
      <p>Das ist ein Testeintrag mit Testnews.<br />
          Test</p>
   </div>
</div>

edit: hier noch das bild:
[ externes Bild ]

Also ich will, das die Überschrift noch wie bei der oberen Tabelle mehr in die mitte kommt. (von oben)

Und der Text sollte auch gleiche höhe wie bei der tabelle sein, sozusagen eine 1 : 1 Kopie, aber das will irgendwie net klappen.

[S2B]

Code: Alles auswählen

<div style="background-color: #e5e5e5;font-size: 11px;height: 20px;font-weight: bold; padding-left: 5px; line-height: 20px; vertical-align: middle">Test</div>

vielleicht so?

[Ambience]

sorry, hab dein code nicht getestet, aber so scheint es doch zu funktionieren:

Code: Alles auswählen

<div class="border">
  <div class="news_header">{news.TITLE} ({news.TIME})</div>
  <div class="news_picture"><p>{news.MESSAGE}</p></div>
</div>

[CSS]

Code: Alles auswählen

.border  { border: 1px solid #c0c0c0;
            margin-left: 80px;
            margin-top: 20px;
            margin-right: 52px;
            padding: 2px;  }

.news_header { background-color: #e5e5e5;
               font-size: 11px;
               height: 15px;
               font-weight: bold;
               padding-left: 7px;
               padding-top: 8px;
               padding-bottom: 0px;
             }
.news_picture
{
  margin-top: 20px;
  background-image: url(images/32/network.png);
  background-repeat: no-repeat;
  height: 50px;
}

p {
	margin: 0 0 10px 80px;
}

Allerdings würde ich das css gerne noch optimieren und zwar, die ganzen einzelnen padding-top, -bottom, -left zu einem machen z.b.
padding: 0px 80px 90px 0px; aber leider kenn ich die reihenfolge nicht in welcher ich die machen muss..

wie ist die reihenfolge?
0px links ? 80px oben, 90 px recht und 0px unten oder wie?

edit: das p {.. hab ich von einer anderen seite geklaut deswegen nicht wundern warum ich es habe aber nicht weiß wie die reihenfolge ist.


edit2:

Wenn ich noch kurz ne Frage loswerden dürfte, wie kann ich bei meiner neuen css validen navigation machen, das sich die rahmenfarbe beim hover ändert..

hier erstmal der code:

Code: Alles auswählen

/* Navigation */             
ul.navigation 
{
	display: block;
	float: left;
	margin: 10px;
	padding: 0;
	position: absolute;
	left: 0px;
	top: 135px;
}

ul.navigation li 
{
	background-color: #e0e0e0;
  border: 1px solid #c0c0c0;
  font-weight: bold;
	display: block;
	list-style-type: none;
	margin: 0 0 2px;
	padding: 0;
	overflow: hidden;
}

ul.navigation a 
{
	color: #000000;
	display: block;
	padding: 7px 7px;
	text-decoration: none;
	width: 170px;
}

ul.navigation a:hover 
{
	background-color: #cbd0de;
	color: black;
	text-decoration: none;
}
/* Navigation end */

aber wenn ich bei:

ul.navigation a:hover noch ein border: 1px soldid #00000; mache, dann werden 2 rahmen angezeigt. einmal der normale und in dem normalen beim drüberfahren dann der hover.. aber das ist eigentlich nicht so ganz das was ich wollte

[S2B]

Die Reihenfolge ist oben links unten rechts (findest du aber auch bei CSS4You).

Zu der Sache mit dem hover: Ich würde a als Block-Element definieren (display: block) und dem dann das Border geben.

[Ambience]

Zu der Sache mit dem hover: Ich würde a als Block-Element definieren (display: block) und dem dann das Border geben.

Bei mir kam gerade nur Bahnhof an.. Könntest du mir das bitte anhand meines Css Teils zeigen? Bin schon froh genug das ich jetzt überhaupt alles auf div umstellen konnte und diese "morderne" Navigation mit halben rollover effekt habe. Mir fehlt nurnoch die Rahmenfarben änderung.

[S2B]

Naja, du nimmst dem ul.navigation li sein Border und gibst es dem a:hover. Außerdem gibst du dem a ein display: block.

[Ambience]

deine methode ergibt das gleiche, habs nun so gelöst:

Code: Alles auswählen

ul.navigation :hover 
{
  border-color: #000000;

das a vor dem hover weggenommen und ein bordercolor rein.. dieses scheint zu funktionieren.. Endlich...

Vielen Dank für die Mühe.

[S2B]

das a vor dem hover weggenommen und ein bordercolor rein.. dieses scheint zu funktionieren.. Endlich...

Nur funktioniert es nicht im IE6 (imho).