Brauche hilfe bei Layout. CSS+HTML

[terminatorx120]

Hallihallo an diesem schönen Freitag...
ich bin am verzweifeln beim erstellen eines Layouts.
ich möchte das es so ähnlich aufgebaut ist wie bei mister-wong.de, so dass auf der linken Seite der Seiteninhalt steht und rechts noch ein kleiner Bereich ist.

ungefähr so:
(Mit Bildbearbeitungsprogramm gemacht...)
[ externes Bild ]


Der Quelltextausschnitt:

Code: Alles auswählen

<table border="0" width="100%"><tr><td colspan="100%">
      <br />Sie sind hier >> <a href="#" title="{SITE_TITLE}">{SITE_TITLE}</a>
      </td></tr>
      <tr><td colspan="100%">{STATUS_INFO}</td></tr>
</table>
<table class="content" colspan="100%" width="100%"><tr><td>
<table width="100%" colspan="100%">
 <tr>
  <td colspan="100%">
    
    <table class="content"><tr><td><table width="600" class="leftcontent" style="border:solid #000 1px"><tr><td>
    {CONTENT}OLOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO
    </td></tr></table>
    </td><td><table width="250"><tr><td class="rightcontent" style="border:solid #000 1px"><div class="tagcloud">{TAGCLOUD}</div></td></tr></table></td>
    </tr>
    </table>
    
    <!-- FOOTER!!! //-->
    </table>
</td></tr></table>
    </tr></td></table></td></tr>
 </table>

Der dazu gerhörige CSS teil:

Code: Alles auswählen

.other_content {
width:250px;
float: right; 
text-align:right;
vertical-align:top ! important;
}
.leftcontent {
padding:0px;
float: top; 
clear:left;
text-align: left;    /* Seiteninhalt wieder links ausrichten */
margin: 0 auot 0 !important;      /* standardkonforme horizontale Zentrierung */
width: 744px;
position: relative;
top:0;
}
.rightcontent {
text-align: left;    /* Seiteninhalt wieder links ausrichten */
width: 240px;
}
.tagcloud{
color:#FFF;
background: #A80329 url(images/tagcloud.jpg) no-repeat;
width:250px;
height:500px;
vertical-align:top;
text-align: left;
position: relative;
margin: 0 auto 0 auto !important;
top:0;
margin-top: -14px;
background-padding-right: 2px;
}
[...]
.content {
width:744px;
float:left;
}

Ich habe wirklich schon verdammt viel probiert, mit float, direction,align ..., aber nie hat es richtig in allen Browsern funktioniert.

Ich würde mich über Hilfe sehr freuen.

[terminatorx120]

Keiner??

[PhilippK]

Ich würde es mal mit DIV statt TABLE probieren...

Gruß, Philipp

[terminatorx120]

Ja, aber wie geht das denn??


Na gut ich habe mal einiges ausgetestet:

So sieht der Quellcode aus, aber es kommt ein wirrwar heraus und die div sind nicht neben einander, auch mit float!

Code: Alles auswählen

<table width="100%">
 <tr>
  <td width="100%">
  <div id="rightbox" class="rb-red"><div id="tags" class="rightbox_element shadow">Hier kommt die Tagcloud</div><div class="tagcloud">{TAGCLOUD}</div></div>
  <div id="content" style="">
  <div id="bookmark_container">


  <!-- <div class="content">
    <div class="rightcontent" width="744" align="right"><div class="tagcloud">
   {TAGCLOUD}
   </div></div>
   <div class="leftcontent"> //--><div>
<tr><td><h3>Die 3 neuesten Lesezeichen:</h3></td></tr><table width="100%" border="0" align="left" class="links">
<div style="paddin:none;float:left; text-align:left;border:solid 1px #000; vertical-align:top;">
<div width="100%">
<div>
<div class="image_preview">
<img border="0" class="previewlink" src="http://88.80.205.215/?size=t&key=MFll04L3WuU6&url=http://docs.google.com" alt="">
</div>
</div>

<div style="float:right">
<h4><a href="out.php?id=22" onmouseover=" window.status='http://docs.google.com'; return true" onmouseout="window.status=''; return true" class="link">Google Quellcode</a>

 <a href="http://docs.google.com" class="websnapr"><img style="vertical-align:bottom" src="images/preview.gif" width="12" height="12"></a></h4>
<br />
Den Quellcode einiger Google-Applications sehen und mit bearbeiten.
</div>
</div></div>

<div style="paddin:none;float:left; text-align:left;border:solid 1px #000; vertical-align:top;">
<div width="100%">
<div>
<div class="image_preview">
<img border="0" class="previewlink" src="http://88.80.205.215/?size=t&key=MFll04L3WuU6&url=http://www.ideensaat.de" alt="">
</div>
</div>

<div style="float:right">
<h4><a href="out.php?id=3" onmouseover=" window.status='http://www.ideensaat.de'; return true" onmouseout="window.status=''; return true" class="link">Ideensaat!</a>

 <a href="http://www.ideensaat.de" class="websnapr"><img style="vertical-align:bottom" src="images/preview.gif" width="12" height="12"></a></h4>
<br />
Ideen müssen wachsen!
</div>
</div></div>

<div style="paddin:none;float:left; text-align:left;border:solid 1px #000; vertical-align:top;">
<div width="100%">
<div>
<div class="image_preview">
<img border="0" class="previewlink" src="http://88.80.205.215/?size=t&key=MFll04L3WuU6&url=http://www.mister-wong.de/" alt="">
</div>
</div>

<div style="float:right">
<h4><a href="out.php?id=2" onmouseover=" window.status='http://www.mister-wong.de/'; return true" onmouseout="window.status=''; return true" class="link">Mister Wong</a>

 <a href="http://www.mister-wong.de/" class="websnapr"><img style="vertical-align:bottom" src="images/preview.gif" width="12" height="12"></a></h4>
<br />
Eines der erfolgreichsten Socialbookmarkingtools!
</div>
</div></div>
</table>
</div>
	</div>
		</div>
  	  </td>
 </tr>
</table>

So sieht's dann aus:
[ externes Bild ]

[PhilippK]

http://de.selfhtml.org/css/layouts/fixbereiche.htm

Gruß, Philipp