Zweispaltiges Layout

**Pyrofreak** · 29.08.2009, 13:10

Hallo!

Ich stelle gerade meine Seite um auf ein zweispaltiges Layout, ich weis
klingt einfach, sollte ich auch ohne Probleme können, aber anscheinend
seh ich im Moment den Wald vor lauter Bäume nicht, keine Ahnung es klappt nicht...

Ich will das der "Inhalt" rechts abschliesst und dort keine Spalte frei ist

Links ist noch ein Fehler der Abstand zwischen der "Suche" und dem div Österreich wird nicht angezeigt

Html Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Chat Info - Chat Information in deutscher Sprache</title>
	<meta name="description" content="Chat Info ist eine Chat Seite in deutscher Sprache, Chat Information" />
	<meta name="keywords" content="chat info chat information information chat chat seite chat news information chats chat themen chat thema info chats" />
	<meta name="language" content="de" />
	<meta name="robots" content="index,follow" />
	<base href="http://www.chat-surium.com/" />
	<link rel="stylesheet" type="text/css" href="CSS/Chat-Surium.css" />
	<link rel="shortcut icon" type="image/x-icon" href="chat-surium.ico" />
 </head>
  <body>
  <div id="Rand">
  <div id="Box">
  <a href="http://www.chat-surium.com/" title="Chat Info Startseite"><img src="Smileys/Chat-Surium-Logo.gif" alt="Logo" width="54" height="56" class="Logo" /></a>    
  <div id="Kopfleiste" class="beide">
  <div id="Kopfleiste-Unten">  
  <h1 id="Titelzeile"> <img src="Deutsch.gif" alt="Deutsch" width="20" height="16" class="Deutsch" /> Chat Info Seite in deutscher Sprache</h1>
  <ul>
  <li><a href="Chat/Social-Bookmarks.htm" title="Social Bookmarking | Lesezeichen sichern">Social Bookmarking</a> | </li>
  <li><a href="Chat/Sitemap.htm" title="Sitemap">Sitemap</a> | </li>
  <li><a href="Chat/Impressum-Kontakt.htm" title="Impressum Kontakt">Impressum</a> | </li>
  <li><a href="http://www.chat-surium.com/#Inhalt" title="Nach Unten">Nach Unten</a> | </li>
  <li><img src="Smileys/Chat-Smiley1.gif" alt="Chatsmiley" width="26" height="20" class="Chat-Smiley1" /></li>
  </ul>
  </div> <!-- Kopfleiste-Unten -->
  </div> <!-- Kopfleiste -->
  <div id="Hauptteil">
  <div id="Navigation">
  <ul>
  <li><h3 class="Navigationsüberschriften"><img src="Bilder/Lupe.gif" alt="Navigation" /> Chat Info Navigation</h3></li>
  <li><a href="Chat/Nicknamen-Chat-Nick.htm" title="Information Chat"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Information Chat </a></li>
  <li><a href="Chat/Nicknamen-Chat-Nick.htm" title="Nicknamen | Chat Nick"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Nicknamen </a></li>
  <li><a href="Chat/Nicknamen-Chat-Nick.htm" title="Chat Räume"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Räume </a></li>
  <li><a href="Chat/Nickpage-Chat-Operator.htm" title="Nickpage"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Nickpage </a></li>
  <li><a href="Chat/Nickpage-Chat-Operator.htm" title="Chat Operator | Chat Admin"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Operator </a></li>
  <li><a href="Chat/Chat-Formen.htm" title="Chat Formen"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Formen</a></li>
  <li><a href="Chat/Chatiquette.htm" title="Chatiquette"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chatiquette</a></li>
  <li><a href="Chat/Chatsprache.htm" title="Chatsprache"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chatsprache</a></li>
  <li><a href="Chat/Instant-Messenger.htm" title="Instant Messenger"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Instant Messenger</a></li>
  <li><a href="Chat/Multi-Messenger.htm" title="Multi Messenger"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Multi Messenger</a></li>
  <li><a href="Chat/Flirttipps.htm" title="Flirttipps"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Flirttipps</a></li>
  <li><a href="Chat/Social-Bookmarks.htm" title="Social Bookmarking"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Social Bookmarking</a></li>
  <li><a href="Chat/Buch-Flirten.htm" title="Bücher Flirten"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Bücher Flirten</a></li>
  <li><a href="http://www.5-single.net/" title="Chat Link Tipp"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Link Tipp <img src="Bilder/Chat-Surium-Tip.gif" width="24" height="12" alt="Tip" class="Neu" /></a></li>
  <li><a href="Chat/Links-Chat-Info.htm" title="Links Chat Info"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Links</a></li>
  </ul>
  <div class="Oesterreich">
  <ul>
  <li><h3 class="Navigationsüberschriften"><img src="Bilder/Lupe.gif" alt="Navigation" /> Chat Liste Österreich</h3></li>
  <li><a href="Chat/Chat-Liste-Oesterreich-Seite1.htm" title="Chat Liste Österreich Seite1"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Seite1</a></li>
  </ul>
  </div> <!-- Oesterreich -->
  <div class="Seitenleiste">
  <div class="Innen">
  <h3>Suche</h3>
  <form method="post" action="" id="suchform">
  <div class="such">
  <label for="suchwörter">Suchwörter:</label>
  </div>
  <div class="suchknopf">
  <input type="text" name="suchwörter" class="text" id="suchwörter" />
  <input type="submit" name="btnsuch" class="btn" id="btnsuch" />
  </div> <!-- suchknopf -->
  </form>
  </div> <!-- Innen -->
  <div class="Sprache">
  </div> <!-- Sprache -->
  </div> <!-- Seitenleiste -->
  </div> <!-- Navigation -->
  <div id="Inhalt">
  <div class="Chaticon1"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" /><h2>Chat Info Einleitung</h2></div>
  <p><i>Chat Surium</i> ist eine <strong>Chat Info Webseite</strong> in deutscher Sprache, eine Informations Seite zum Thema Chatten! <a href="Chat/Information-Chat.htm" title="Chatten">Chatten</a> ist mittlerweile auch im deutschsprachigen Raum zu einem immer beliebteren Kommunikationsmittel geworden.
     Egal ob &uuml;ber Pc oder Handy, wer &uuml;ber einen Internetanschluss verf&uuml;gt, dem steht die Welt der Chats offen! Chatten, ist wie Fernsehen und Telefonieren zu einer sehr beliebten Freizeitbesch&auml;ftigung geworden.</p>
  <p>Chats gibt es zu jedem Thema, Liebe, Flirt, Sex, Seitensprung, oder wissenschaftliche Themen wie zb.: Medizin, dem modernen Chatter werden keine Grenzen gesetzt. Infos zum Thema Chatten gibt es aber im deutschsprachigen Raum nicht besonders viele und genau deswegen wurde diese Seite ins Leben gerufen. Sie soll Menschen helfen, die auf der Suche nach Informationen zum Thema Chatten sind, diese auch zu finden und dies möglichst schnell.
     Hier findet Ihr nicht nur Informationen zu Themen wie <a href="Chat/Nicknamen-Chat-Nick.htm" title="Nicknamen">Nicknamen</a>, Chat Räume, <a href="Chat/Nickpage-Chat-Operator.htm" title="Nickpage">Nickpage</a>, Chat Operator, <a href="Chat/Chatiquette.htm" title="Chatiquette">Chatiquette</a>, <strong>Chat Slang</strong>, <a href="Chat/Instant-Messenger.htm" title="Instant Web Messenger">Instant Web Messenger</a>, <strong>Multi Messenger</strong>, <a href="Chat/Flirttipps.htm" title="Flirttipps für Männer und Frauen">Flirttipps für Männer und Frauen</a>,
     Social Bookmark Infos, <a href="Chat/Buch-Flirten.htm" title="Bücher Flirten">Bücher Flirten</a>, sondern in Zukunft auch eine Chat Liste für Österreich!</p>
  <p><u>Diese Chatinfo Webseite bleibt frei von Popups und zu 100% Spam und Spyware free!</u></p>
  <p>Also liebe Chat Information Interessierte Ihr braucht auf dieser Seite keine Angst vor lästigen Popups, Viren oder sonstigen Internet-Scherzen haben! Diese Webseite wird, sofern es möglich ist in Zukunft noch mehr Chatinfos und Chat Information Texte kostenlos zur Verfügung stellen und hofft damit das Interesse
     der Besucher zu wecken!</p>
  <p><u>Einige der Bilder auf dieser Chatinfo Seite sind urheberrechtlich geschützt, ein Download ist daher nicht gestattet!</u></p>
  <div class="Zentriert">
	          <i>Mit nachfolgendem Code könnt Ihr die Chat Info Webseite verlinken:</i><br /><br />
	<textarea cols="38" rows="3" class="verlinken" onClick="javascript:this.focus();this.select();"><a href="http://www.chat-surium.com/" target="_blank" title="Chat-Info Webseite">Chat-Info Webseite</a></textarea>
  </div><br /><br /><br />
  </div> 
  <!-- Inhalt -->
  </div> <!--Hauptteil-->
  <div id="Fußleiste">
  <p><a href="http://www.chat-surium.com/" title="Chat Info Startseite">Chat Info</a> | <a href="http://www.chat-surium.com/#Inhalt" title="Nach Oben">Nach Oben</a></p>
  </div> <!--Fußleiste-->
  </div> <!-- Box -->
  </div> <!-- Rand -->
  <script type="text/javascript" src="http://www.chat-surium.com/stat/track.php?mode=js"></script>
  <noscript><img src="http://www.chat-surium.com/stat/track_noscript.php" border="0" alt="" width="1" height="1" /></noscript>
  </body>
</html>

CSS Code:

HTML-Code:

* {
 margin: 0;
 padding: 0;           /* Alle Abstände werden auf Null gesetzt */
}
body {
 background-image: url(../Bilder/Hintergrund1.jpg);
 background-repeat: repeat-x;
 background-color: #442221;
 background-attachment: scroll;
 color: black;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 78%;
 text-align: center;   /* Internet-Explorer 5.x Hack */
}
.Logo {            
 float: left;          /* Image-Logo */
 margin: 0;
 padding: 0 0 10px 0;
 text-decoration: none;
 border: none;
}
.beide {
 clear: both;
}
.Deutsch {
 border: 1px solid #6F3737;
 margin: 0;
 padding: 0;
}
h1 {                   
 margin: 0;
 padding: 0;          /* Überschriften h1 */
 font-size: 109%;
 text-align: left;
}
h2 {
 margin: 0;
 padding: 0 0 0 3px;         /* Überschriften h2 */
 font-size: 108%;
 text-align: center;
 display: inline;
}
h3 {
 margin: 0 0 2em 0;
 padding: 0;        /* Überschriften h3 */
 font-size: 95%;
}
p {
 margin: 0;
 padding: 0 0 2.5em 0;       /* Absätze */
 text-align: left;
 line-height: 1.7em;
 position: relative;         /* Peekaboo Bug */
}
a:link {
 color: #0000FF;
 text-decoration: none;
}
a:visited {
 color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #0000FF;
 text-decoration: underline;
}
#Rand {
 position: relative;
 width: 950px;
 margin: 0 auto;
}
#Box {
 background-color: #7B7B7B;
 margin: 17px;
 padding: 10px;
}
#Kopfleiste-Unten {
 border-top: 4px solid #6F3737;
 border-right: 1px solid #6F3737;
 border-left: 1px solid #6F3737;
 border-bottom: 4px solid #6F3737;
 background-color: #EEEEEE;
 height: 33px;
}
#Kopfleiste-Unten ul {
 list-style-type: none;
 margin: 0;
 padding: 0.3em 0.45em 0.7em 0;
 text-align: right;
}
#Kopfleiste-Unten li {
 display: inline;
 color: #7C5C1E;
}
#Kopfleiste-Unten a:link, #Kopfleiste-Unten a:visited {
 text-decoration: none;
}
#Titelzeile {
 margin: 0;
 padding: 0.5em 0 0.7em 0.45em;
 width: 450px;
 text-align: left;
 float: left;
}
.Chat-Smiley1 {
 margin: 0;
 padding: 0.1em 0 0 0;
}
#Hauptteil {
 margin-top: 4px;
 width: 100%;
}
#Inhalt {
 margin: 0 0 0 20em;
 padding: 20px;
 border: 1px solid #6F3737;
 background-color: #FBFBFB;
 color: black;
}
.Chaticon, .Neu {
 text-decoration: none;
 border: none;
}
.Flaggen {
 text-decoration: none;
 border: 1px solid #6F3737;
}
.Chaticon1 {
 text-align: center;
 margin: 0 0 2.5em 0;
}
#Navigation {
 float: left;
 width: 20%;
 text-align: left;
 margin: 0;
 padding: 0;
}
.Oesterreich {
 margin-top: 10px;
 margin-bottom: 10px;
 text-align: left;
 padding: 0;
}
#Navigation ul, .Oesterreich ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#Navigation li, .Oesterreich li {
 border-bottom: 1px solid #6F3737;
 border-right: 1px solid #6F3737;
 border-left: 1px solid #6F3737; 
}
#Navigation li a:link, .Oesterreich li a:link, #Navigation li a:visited, .Oesterreich li a:visited {
 font-size: 100%;
 font-weight: bold;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 background-color: #DFDFDF;
 text-decoration: none;
}
#Navigation li a:hover, .Oesterreich li a:hover {
 background-color: #EEEEEE;
 padding: 0.4em 0 0.4em 0.5em;
}
.Navigationsüberschriften {
 margin: 0;
 padding: 0.5em 0 0.5em 0.45em;
 background-color: #EEEEEE;
 border-bottom: 1px solid #6F3737;
 border-top: 1px solid #6F3737;
}
.Seitenleiste {
 margin: 10px 0 0 0;
 background-color: #7B7B7B;
 color: black;
 padding: 0;
 display: block;
}
#suchform .text {
 width: 137px;
 border: 1px solid #6F3737;
}
#suchform .such {
 text-align: left;
}
#suchform .suchknopf {
 margin-top: 4px;
 text-align: left;
}
#suchform .btn {
 border: 1px solid #6F3737;
 background-color: #DFDFDF;
 color: black;
}
.Seitenleiste h3 {
 text-align: left;
 background-color: #DFDFDF;
 margin: 0 0 1.4em 0;
 padding: 0;
}
.Innen {
 margin: 0;
 padding: 20px;
 background-color: #DFDFDF;
 border: 1px solid #6F3737;
}
.Sprache {
 margin: 10px 0 0 0;
 padding: 20px;
 background-color: #DFDFDF;
 border: 1px solid #6F3737;
}
#Fußleiste {
 width: 100%;
 border-top: 4px solid #6F3737;
 border-right: 1px solid #6F3737;
 border-left: 1px solid #6F3737;
 border-bottom: 4px solid #6F3737;
 background-color: #EEEEEE;
 margin-top: 4px;
 clear: both;
}
#Fußleiste p {
 margin: 0;
 padding: 0;
 text-align: center;
}
#Fußleiste a:link, #Fußleiste a:visited {
 text-decoration: none;
}
#Inhalt2 {
 margin: 0;
 padding: 20px;
 border: 1px solid #6F3737;
 background-color: #FBFBFB;
 color: black;
}
.Flirttipps {
 list-style-type: disc;
 line-height: 1.7em;
 margin-left: 3em;
 text-align: left;
 padding: 0 0 2.5em 0;
}
dl.Links {
 width: 61em;
 margin: 0 auto;
 padding: 0;
}
.Links dt {                
 width: 22em;                                 
 float: left;                                                                                                   
 margin: 0;                                               
 padding: 0.4em;
 border-bottom: 1px solid #6F3737;
 background-color: #DFDFDF;
 text-align: left;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */    
 
.Abstand {
 margin: 0 0 2.5em 0;
}                                       
.Links dd {
 float: right;
 width: 36em;
 margin: 0;
 padding: 0.4em;
 border-bottom: 1px solid #6F3737;
 background-color: #EEEEEE;
 text-align: left;
}
table.Chat-Slang {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2.5em;
 margin-top: 0.5em;
 table-layout: fixed;
 width: 795px;
 line-height: 1.7em;
 border-collapse: collapse;
 border: 1px solid #6F3737;
 text-align: left;          /* Internet-Explorer 5.x Hack */
}
th.Kopf, tr.Zeile {
 padding: 0.4em 0 0.4em 0; 
 text-align: center;
}
col.Zeichen {
 width: 60px;
 background-color: #DFDFDF;
 text-align: center;
}
col.Bedeutung {
 width: 205px;
 background-color: #EEEEEE;
 text-align: center;
}
.Zentriert {
 text-align: center;
 margin: 0 auto;
}
div #Sitemap {
 margin: 0 auto;
 width: 700px;
 border: 1px solid #6F3737;
}
div #Sitemap ul li {
 padding: 4em 0 2em 4em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul li {
 padding: 2em 0 2em 6em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul ul {
 padding: 2.8em 0 0 9.4em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul ul li {
 padding: 0;
 text-align: left;
 margin: 0;
 list-style-type: none;
 border-top: 1px solid #6F3737;
 border-left: 1px solid #6F3737;
 border-right: 1px solid #6F3737;
 background-color: #DFDFDF;
 width: 200px;
}
#Sitemap ul ul ul a:link, #Sitemap ul ul ul a:visited {
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 width: 200px;
 text-decoration: none;
}
#Sitemap ul ul ul a:hover {
 background-color: #EEEEEE;
 width: 200px;
 padding: 0.4em 0 0.4em 0;
 text-decoration: none;
}
.bottom {
 border-bottom: 1px solid #6F3737;
}
.Bücher {
 float: left;
 border: 1px solid #6F3737;         /* Bücher */
 margin-right: 10px;
 margin-left: 20px;
 margin-bottom: 4em;
 position: relative;               /* Peekaboo Bug */
}
.Formular {
 margin-left: auto;
 margin-right: auto;                 /* Email Kontaktformular */
 border: 1px solid #6F3737;         
 border-collapse: collapse;        
 width: 70%;
 text-align: center;                        
}
.main {
 background-color: #EEEEEE;          /* Email Kontaktformular */
 border : 1px solid #6F3737; 
 border-collapse: collapse;         
 width: 100%;
 height: 25px;         
}
fieldset {
 border: none;
}
.mainleft {
 background-color: #EEEEEE;
 border : 1px solid #6F3737;
 border-collapse: collapse;
 width: 30%;
}
.captcha {
 background-color: #EEEEEE;
 text-align: center;
 width: 150px;
 height: 50px;
}
.head {
 background-color: #DFDFDF;          /* Email Kontaktformular */
 width: 100%;
 height: 25px;
 text-align: center;                       
}
.foot {
 background-color: #DFDFDF;         /* Email Kontaktformular */
 text-align: center;
 width: 100%;
 height: 25px;                
}
.textarea, .input, .select {
 color: #000000;                     /* Email Kontaktformular */            
}
.button {
 width: 130px;                       /* Email Kontaktformular */
}
.small {
 font-size: 9px;                      /* Email Kontaktformular */
}
table.Bookmark-Liste {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2.5em;                /* Bookmark Liste Tabelle */                           
 line-height: 1.7em;
 background-color: #DFDFDF;
 border-collapse: collapse;
 text-align: left;                    /* Internet-Explorer 5.x Hack */
}
th.Tabellenkopf {
 padding: 0.4em 0 0.4em 0;  
 border-bottom: 1px solid #6F3737;    /* Bookmark Liste Tabelle */
 text-align: center;
 background-color: #EEEEEE;
}
td.Datenzeile {
 border-bottom: 1px solid #6F3737;    
 padding: 0.4em 0 0.4em 0;            /* Bookmark Liste Tabelle */
 text-align: left;
 background-color: #DFDFDF;
}

gr Pyro

**max.m** · 29.08.2009, 13:37

Zitat von Pyrofreak

Ich will das der "Inhalt" rechts abschliesst und dort keine Spalte frei ist

Du hast im #Box padding: 10px. Mit padding: 10px 0 10px 10px sollte es funktionieren.
P.S.: um solche "Fehler" zu finden empfiehlt sich die FF-Extension Firebug.

**Pyrofreak** · 29.08.2009, 14:25

Hallo max!

Danke für deine Antwort! Ähm kann es sein das du das mit dem Inhalt falsch
verstanden hast? Oder zeigt der Browser bei dir was andres an?
Bei der Box wenn ich das ändere ändert sich leider gar nix, zumindest bei mir!

Nochmal ich möchte das der div "Inhalt" rechts mit der unteren Kante der
Kopfleiste abschliesst, also das rechts keine Spalte mehr frei ist, bei mir zeigt
er wenn ich die index öffne jetzt rechts diese freie Spalte an... ich hoff das war
jetz einigermasen verständlich

gr Pyro

**max.m** · 29.08.2009, 18:24

Ich vertehe glaub immer noch nicht ganz. Ich hab jetzt rechts keine "Spalte" mehr mit dem was ich sagte, siehe Anhang.

**Pyrofreak** · 31.08.2009, 09:55

Hallo max!

Wie hast du das so hinbekommen? Wie gesagt ich habs bei mir probiert, aber
es bleibt bei mir alles gleich, also nicht so wie bei dir, bei mir bleibt rechts die Lücke, tz gibts sowas? Was kann das sein?

gr Pyro

**max.m** · 31.08.2009, 10:30

Durch die o.g. Änderung.

In was für einem Browser testest Du?

Edit: Unter Win XP SP3 sieht es unter IE7 und FF 3.5.2 so aus wie in meinem Screenshot.
Wenn es bei Dir nicht funktioniert kannst Du auch mal den Browsercache leeren.

**Pyrofreak** · 31.08.2009, 10:48

Hallo!

Habe den Mozilla Firefox 3.5.2 und den Internet Explorer 7 installiert, funktionieren tuts mit beiden nicht!

Hm was hast du unter #Inhalt {

stehen?

Habe nämlich letztesmal dort auch was verändert...

gr Pyro

**max.m** · 31.08.2009, 10:53

Das Stylesheet hab ich nur an der o.g. Stelle gändert, also hat Inhalt diese Eigenschaften (wie in Deinem ersten Post):

Code:

#Inhalt {
 margin: 0 0 0 20em;
 padding: 20px;
 border: 1px solid #6F3737;
 background-color: #FBFBFB;
 color: black;
}

Box sieht so aus:

Code:

#Box {
 background-color: #7B7B7B;
 margin: 17px;
 padding: 10px 0 10px 10px;
}

Soll Kopfleiste-Unten eigentlich den Abstand von 10 Pixeln behalten oder auch bis an den Rand gehen?

**Pyrofreak** · 31.08.2009, 11:10

Aha hatte bei "Inhalt" nur den Wert verändert, hab jetz wieder 20em
eingestellt, aber funktioniert immer noch nicht!

Ja das mit der Kopfleiste Unten das passt schon so!

Ich probiers jetz mal mit der Browser Cache Löschung, ich dachte immer
das macht der eh von selber wenn die voll ist?

gr Pyro

**Pyrofreak** · 31.08.2009, 11:16

Habe jetzt die Cache geleert, funktioniert aber auch nicht! Was kann denn das sein??? Irgendwas musst du anders haben als ich, aber was...

gr Pyro

**max.m** · 31.08.2009, 11:22

So sieht bei mir das HTML aus:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Chat Info - Chat Information in deutscher Sprache</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
 </head>
  <body>
  <div id="Rand">
  <div id="Box">
  <a href="http://www.chat-surium.com/" title="Chat Info Startseite"><img src="Smileys/Chat-Surium-Logo.gif" alt="Logo" width="54" height="56" class="Logo" /></a>    
  <div id="Kopfleiste" class="beide">
  <div id="Kopfleiste-Unten">  
  <h1 id="Titelzeile"> <img src="Deutsch.gif" alt="Deutsch" width="20" height="16" class="Deutsch" /> Chat Info Seite in deutscher Sprache</h1>
  <ul>
  <li><a href="Chat/Social-Bookmarks.htm" title="Social Bookmarking | Lesezeichen sichern">Social Bookmarking</a> | </li>
  <li><a href="Chat/Sitemap.htm" title="Sitemap">Sitemap</a> | </li>
  <li><a href="Chat/Impressum-Kontakt.htm" title="Impressum Kontakt">Impressum</a> | </li>
  <li><a href="http://www.chat-surium.com/#Inhalt" title="Nach Unten">Nach Unten</a> | </li>
  <li><img src="Smileys/Chat-Smiley1.gif" alt="Chatsmiley" width="26" height="20" class="Chat-Smiley1" /></li>
  </ul>
  </div> <!-- Kopfleiste-Unten -->
  </div> <!-- Kopfleiste -->
  <div id="Hauptteil">
  <div id="Navigation">
  <ul>
  <li><h3 class="Navigationsüberschriften"><img src="Bilder/Lupe.gif" alt="Navigation" /> Chat Info Navigation</h3></li>
  <li><a href="Chat/Nicknamen-Chat-Nick.htm" title="Information Chat"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Information Chat </a></li>
  <li><a href="Chat/Nicknamen-Chat-Nick.htm" title="Nicknamen | Chat Nick"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Nicknamen </a></li>
  <li><a href="Chat/Nicknamen-Chat-Nick.htm" title="Chat Räume"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Räume </a></li>
  <li><a href="Chat/Nickpage-Chat-Operator.htm" title="Nickpage"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Nickpage </a></li>
  <li><a href="Chat/Nickpage-Chat-Operator.htm" title="Chat Operator | Chat Admin"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Operator </a></li>
  <li><a href="Chat/Chat-Formen.htm" title="Chat Formen"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Formen</a></li>
  <li><a href="Chat/Chatiquette.htm" title="Chatiquette"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chatiquette</a></li>
  <li><a href="Chat/Chatsprache.htm" title="Chatsprache"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chatsprache</a></li>
  <li><a href="Chat/Instant-Messenger.htm" title="Instant Messenger"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Instant Messenger</a></li>
  <li><a href="Chat/Multi-Messenger.htm" title="Multi Messenger"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Multi Messenger</a></li>
  <li><a href="Chat/Flirttipps.htm" title="Flirttipps"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Flirttipps</a></li>
  <li><a href="Chat/Social-Bookmarks.htm" title="Social Bookmarking"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Social Bookmarking</a></li>
  <li><a href="Chat/Buch-Flirten.htm" title="Bücher Flirten"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Bücher Flirten</a></li>
  <li><a href="http://www.5-single.net/" title="Chat Link Tipp"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Chat Link Tipp <img src="Bilder/Chat-Surium-Tip.gif" width="24" height="12" alt="Tip" class="Neu" /></a></li>
  <li><a href="Chat/Links-Chat-Info.htm" title="Links Chat Info"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Links</a></li>
  </ul>
  <div class="Oesterreich">
  <ul>
  <li><h3 class="Navigationsüberschriften"><img src="Bilder/Lupe.gif" alt="Navigation" /> Chat Liste Österreich</h3></li>
  <li><a href="Chat/Chat-Liste-Oesterreich-Seite1.htm" title="Chat Liste Österreich Seite1"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" class="Chaticon" /> Seite1</a></li>
  </ul>
  </div> <!-- Oesterreich -->
  <div class="Seitenleiste">
  <div class="Innen">
  <h3>Suche</h3>
  <form method="post" action="" id="suchform">
  <div class="such">
  <label for="suchwörter">Suchwörter:</label>
  </div>
  <div class="suchknopf">
  <input type="text" name="suchwörter" class="text" id="suchwörter" />
  <input type="submit" name="btnsuch" class="btn" id="btnsuch" />
  </div> <!-- suchknopf -->
  </form>
  </div> <!-- Innen -->
  <div class="Sprache">
  </div> <!-- Sprache -->
  </div> <!-- Seitenleiste -->
  </div> <!-- Navigation -->
  <div id="Inhalt">
  <div class="Chaticon1"><img src="Bilder/Chaticon.gif" width="18" height="18" alt="Chaticon" /><h2>Chat Info Einleitung</h2></div>
  <p><i>Chat Surium</i> ist eine <strong>Chat Info Webseite</strong> in deutscher Sprache, eine Informations Seite zum Thema Chatten! <a href="Chat/Information-Chat.htm" title="Chatten">Chatten</a> ist mittlerweile auch im deutschsprachigen Raum zu einem immer beliebteren Kommunikationsmittel geworden.
     Egal ob &uuml;ber Pc oder Handy, wer &uuml;ber einen Internetanschluss verf&uuml;gt, dem steht die Welt der Chats offen! Chatten, ist wie Fernsehen und Telefonieren zu einer sehr beliebten Freizeitbesch&auml;ftigung geworden.</p>
  <p>Chats gibt es zu jedem Thema, Liebe, Flirt, Sex, Seitensprung, oder wissenschaftliche Themen wie zb.: Medizin, dem modernen Chatter werden keine Grenzen gesetzt. Infos zum Thema Chatten gibt es aber im deutschsprachigen Raum nicht besonders viele und genau deswegen wurde diese Seite ins Leben gerufen. Sie soll Menschen helfen, die auf der Suche nach Informationen zum Thema Chatten sind, diese auch zu finden und dies möglichst schnell.
     Hier findet Ihr nicht nur Informationen zu Themen wie <a href="Chat/Nicknamen-Chat-Nick.htm" title="Nicknamen">Nicknamen</a>, Chat Räume, <a href="Chat/Nickpage-Chat-Operator.htm" title="Nickpage">Nickpage</a>, Chat Operator, <a href="Chat/Chatiquette.htm" title="Chatiquette">Chatiquette</a>, <strong>Chat Slang</strong>, <a href="Chat/Instant-Messenger.htm" title="Instant Web Messenger">Instant Web Messenger</a>, <strong>Multi Messenger</strong>, <a href="Chat/Flirttipps.htm" title="Flirttipps für Männer und Frauen">Flirttipps für Männer und Frauen</a>,
     Social Bookmark Infos, <a href="Chat/Buch-Flirten.htm" title="Bücher Flirten">Bücher Flirten</a>, sondern in Zukunft auch eine Chat Liste für Österreich!</p>
  <p><u>Diese Chatinfo Webseite bleibt frei von Popups und zu 100% Spam und Spyware free!</u></p>
  <p>Also liebe Chat Information Interessierte Ihr braucht auf dieser Seite keine Angst vor lästigen Popups, Viren oder sonstigen Internet-Scherzen haben! Diese Webseite wird, sofern es möglich ist in Zukunft noch mehr Chatinfos und Chat Information Texte kostenlos zur Verfügung stellen und hofft damit das Interesse
     der Besucher zu wecken!</p>
  <p><u>Einige der Bilder auf dieser Chatinfo Seite sind urheberrechtlich geschützt, ein Download ist daher nicht gestattet!</u></p>
  <div class="Zentriert">
              <i>Mit nachfolgendem Code könnt Ihr die Chat Info Webseite verlinken:</i><br /><br />
    <textarea cols="38" rows="3" class="verlinken" onClick="javascript:this.focus();this.select();"><a href="http://www.chat-surium.com/" target="_blank" title="Chat-Info Webseite">Chat-Info Webseite</a></textarea>
  </div><br /><br /><br />
  </div> 
  <!-- Inhalt -->
  </div> <!--Hauptteil-->
  <div id="Fußleiste">
  <p><a href="http://www.chat-surium.com/" title="Chat Info Startseite">Chat Info</a> | <a href="http://www.chat-surium.com/#Inhalt" title="Nach Oben">Nach Oben</a></p>
  </div> <!--Fußleiste-->
  </div> <!-- Box -->
  </div> <!-- Rand -->
  <script type="text/javascript" src="http://www.chat-surium.com/stat/track.php?mode=js"></script>
  <noscript><img src="http://www.chat-surium.com/stat/track_noscript.php" border="0" alt="" width="1" height="1" /></noscript>
  </body>
</html>

Und so das CSS (style.css, liegt in der gleichen Ebene):

Code:

* {
 margin: 0;
 padding: 0;           /* Alle Abstände werden auf Null gesetzt */
}
body {
 background-image: url(../Bilder/Hintergrund1.jpg);
 background-repeat: repeat-x;
 background-color: #442221;
 background-attachment: scroll;
 color: black;
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 78%;
 text-align: center;   /* Internet-Explorer 5.x Hack */
}
.Logo {            
 float: left;          /* Image-Logo */
 margin: 0;
 padding: 0 0 10px 0;
 text-decoration: none;
 border: none;
}
.beide {
 clear: both;
}
.Deutsch {
 border: 1px solid #6F3737;
 margin: 0;
 padding: 0;
}
h1 {                   
 margin: 0;
 padding: 0;          /* Überschriften h1 */
 font-size: 109%;
 text-align: left;
}
h2 {
 margin: 0;
 padding: 0 0 0 3px;         /* Überschriften h2 */
 font-size: 108%;
 text-align: center;
 display: inline;
}
h3 {
 margin: 0 0 2em 0;
 padding: 0;        /* Überschriften h3 */
 font-size: 95%;
}
p {
 margin: 0;
 padding: 0 0 2.5em 0;       /* Absätze */
 text-align: left;
 line-height: 1.7em;
 position: relative;         /* Peekaboo Bug */
}
a:link {
 color: #0000FF;
 text-decoration: none;
}
a:visited {
 color: #0000FF;
 text-decoration: none;
}
a:hover {
 color: #0000FF;
 text-decoration: underline;
}
#Rand {
 position: relative;
 width: 950px;
 margin: 0 auto;
}
#Box {
 background-color: #7B7B7B;
 margin: 17px;
 padding: 10px 0 10px 10px;
}
#Kopfleiste-Unten {
 border-top: 4px solid #6F3737;
 border-right: 1px solid #6F3737;
 border-left: 1px solid #6F3737;
 border-bottom: 4px solid #6F3737;
 background-color: #EEEEEE;
 height: 33px;
}
#Kopfleiste-Unten ul {
 list-style-type: none;
 margin: 0;
 padding: 0.3em 0.45em 0.7em 0;
 text-align: right;
}
#Kopfleiste-Unten li {
 display: inline;
 color: #7C5C1E;
}
#Kopfleiste-Unten a:link, #Kopfleiste-Unten a:visited {
 text-decoration: none;
}
#Titelzeile {
 margin: 0;
 padding: 0.5em 0 0.7em 0.45em;
 width: 450px;
 text-align: left;
 float: left;
}
.Chat-Smiley1 {
 margin: 0;
 padding: 0.1em 0 0 0;
}
#Hauptteil {
 margin-top: 4px;
 width: 100%;
}
#Inhalt {
 margin: 0 0 0 20em;
 padding: 20px;
 border: 1px solid #6F3737;
 background-color: #FBFBFB;
 color: black;
}
.Chaticon, .Neu {
 text-decoration: none;
 border: none;
}
.Flaggen {
 text-decoration: none;
 border: 1px solid #6F3737;
}
.Chaticon1 {
 text-align: center;
 margin: 0 0 2.5em 0;
}
#Navigation {
 float: left;
 width: 20%;
 text-align: left;
 margin: 0;
 padding: 0;
}
.Oesterreich {
 margin-top: 10px;
 margin-bottom: 10px;
 text-align: left;
 padding: 0;
}
#Navigation ul, .Oesterreich ul {
 list-style: none;
 margin: 0;
 padding: 0;
}
#Navigation li, .Oesterreich li {
 border-bottom: 1px solid #6F3737;
 border-right: 1px solid #6F3737;
 border-left: 1px solid #6F3737; 
}
#Navigation li a:link, .Oesterreich li a:link, #Navigation li a:visited, .Oesterreich li a:visited {
 font-size: 100%;
 font-weight: bold;
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 background-color: #DFDFDF;
 text-decoration: none;
}
#Navigation li a:hover, .Oesterreich li a:hover {
 background-color: #EEEEEE;
 padding: 0.4em 0 0.4em 0.5em;
}
.Navigationsüberschriften {
 margin: 0;
 padding: 0.5em 0 0.5em 0.45em;
 background-color: #EEEEEE;
 border-bottom: 1px solid #6F3737;
 border-top: 1px solid #6F3737;
}
.Seitenleiste {
 margin: 10px 0 0 0;
 background-color: #7B7B7B;
 color: black;
 padding: 0;
 display: block;
}
#suchform .text {
 width: 137px;
 border: 1px solid #6F3737;
}
#suchform .such {
 text-align: left;
}
#suchform .suchknopf {
 margin-top: 4px;
 text-align: left;
}
#suchform .btn {
 border: 1px solid #6F3737;
 background-color: #DFDFDF;
 color: black;
}
.Seitenleiste h3 {
 text-align: left;
 background-color: #DFDFDF;
 margin: 0 0 1.4em 0;
 padding: 0;
}
.Innen {
 margin: 0;
 padding: 20px;
 background-color: #DFDFDF;
 border: 1px solid #6F3737;
}
.Sprache {
 margin: 10px 0 0 0;
 padding: 20px;
 background-color: #DFDFDF;
 border: 1px solid #6F3737;
}
#Fußleiste {
 width: 100%;
 border-top: 4px solid #6F3737;
 border-right: 1px solid #6F3737;
 border-left: 1px solid #6F3737;
 border-bottom: 4px solid #6F3737;
 background-color: #EEEEEE;
 margin-top: 4px;
 clear: both;
}
#Fußleiste p {
 margin: 0;
 padding: 0;
 text-align: center;
}
#Fußleiste a:link, #Fußleiste a:visited {
 text-decoration: none;
}
#Inhalt2 {
 margin: 0;
 padding: 20px;
 border: 1px solid #6F3737;
 background-color: #FBFBFB;
 color: black;
}
.Flirttipps {
 list-style-type: disc;
 line-height: 1.7em;
 margin-left: 3em;
 text-align: left;
 padding: 0 0 2.5em 0;
}
dl.Links {
 width: 61em;
 margin: 0 auto;
 padding: 0;
}
.Links dt {                
 width: 22em;                                 
 float: left;                                                                                                   
 margin: 0;                                               
 padding: 0.4em;
 border-bottom: 1px solid #6F3737;
 background-color: #DFDFDF;
 text-align: left;
}

/* commented backslash hack for mac-ie5 \*/
dt { clear: both; }
/* end hack */    
 
.Abstand {
 margin: 0 0 2.5em 0;
}                                       
.Links dd {
 float: right;
 width: 36em;
 margin: 0;
 padding: 0.4em;
 border-bottom: 1px solid #6F3737;
 background-color: #EEEEEE;
 text-align: left;
}
table.Chat-Slang {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2.5em;
 margin-top: 0.5em;
 table-layout: fixed;
 width: 795px;
 line-height: 1.7em;
 border-collapse: collapse;
 border: 1px solid #6F3737;
 text-align: left;          /* Internet-Explorer 5.x Hack */
}
th.Kopf, tr.Zeile {
 padding: 0.4em 0 0.4em 0; 
 text-align: center;
}
col.Zeichen {
 width: 60px;
 background-color: #DFDFDF;
 text-align: center;
}
col.Bedeutung {
 width: 205px;
 background-color: #EEEEEE;
 text-align: center;
}
.Zentriert {
 text-align: center;
 margin: 0 auto;
}
div #Sitemap {
 margin: 0 auto;
 width: 700px;
 border: 1px solid #6F3737;
}
div #Sitemap ul li {
 padding: 4em 0 2em 4em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul li {
 padding: 2em 0 2em 6em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul ul {
 padding: 2.8em 0 0 9.4em;
 text-align: left;
 margin: 0;
 list-style-type: none;
}
div #Sitemap ul ul ul li {
 padding: 0;
 text-align: left;
 margin: 0;
 list-style-type: none;
 border-top: 1px solid #6F3737;
 border-left: 1px solid #6F3737;
 border-right: 1px solid #6F3737;
 background-color: #DFDFDF;
 width: 200px;
}
#Sitemap ul ul ul a:link, #Sitemap ul ul ul a:visited {
 display: block;
 padding: 0.4em 0 0.4em 0.5em;
 width: 200px;
 text-decoration: none;
}
#Sitemap ul ul ul a:hover {
 background-color: #EEEEEE;
 width: 200px;
 padding: 0.4em 0 0.4em 0;
 text-decoration: none;
}
.bottom {
 border-bottom: 1px solid #6F3737;
}
.Bücher {
 float: left;
 border: 1px solid #6F3737;         /* Bücher */
 margin-right: 10px;
 margin-left: 20px;
 margin-bottom: 4em;
 position: relative;               /* Peekaboo Bug */
}
.Formular {
 margin-left: auto;
 margin-right: auto;                 /* Email Kontaktformular */
 border: 1px solid #6F3737;         
 border-collapse: collapse;        
 width: 70%;
 text-align: center;                        
}
.main {
 background-color: #EEEEEE;          /* Email Kontaktformular */
 border : 1px solid #6F3737; 
 border-collapse: collapse;         
 width: 100%;
 height: 25px;         
}
fieldset {
 border: none;
}
.mainleft {
 background-color: #EEEEEE;
 border : 1px solid #6F3737;
 border-collapse: collapse;
 width: 30%;
}
.captcha {
 background-color: #EEEEEE;
 text-align: center;
 width: 150px;
 height: 50px;
}
.head {
 background-color: #DFDFDF;          /* Email Kontaktformular */
 width: 100%;
 height: 25px;
 text-align: center;                       
}
.foot {
 background-color: #DFDFDF;         /* Email Kontaktformular */
 text-align: center;
 width: 100%;
 height: 25px;                
}
.textarea, .input, .select {
 color: #000000;                     /* Email Kontaktformular */            
}
.button {
 width: 130px;                       /* Email Kontaktformular */
}
.small {
 font-size: 9px;                      /* Email Kontaktformular */
}
table.Bookmark-Liste {
 margin-left: auto;
 margin-right: auto;
 margin-bottom: 2.5em;                /* Bookmark Liste Tabelle */                           
 line-height: 1.7em;
 background-color: #DFDFDF;
 border-collapse: collapse;
 text-align: left;                    /* Internet-Explorer 5.x Hack */
}
th.Tabellenkopf {
 padding: 0.4em 0 0.4em 0;  
 border-bottom: 1px solid #6F3737;    /* Bookmark Liste Tabelle */
 text-align: center;
 background-color: #EEEEEE;
}
td.Datenzeile {
 border-bottom: 1px solid #6F3737;    
 padding: 0.4em 0 0.4em 0;            /* Bookmark Liste Tabelle */
 text-align: left;
 background-color: #DFDFDF;
}

**Pyrofreak** · 31.08.2009, 11:50

Du hast ja nur unter "Box" das padding verändert, sonst nirgends etwas oder?

Ich schnall das echt nicht, wo da bei mir der Hund begraben liegt...

gr Pyro

**max.m** · 31.08.2009, 11:54

Zitat von Pyrofreak

Du hast ja nur unter "Box" das padding verändert, sonst nirgends etwas oder?

Ja, wie ich schon zweimal sagte...

Funktioniert es bei Dir nicht wenn Du mein HTML und CSS verwendest?

Schmeiss mal diese Zeile aus deinem Header, klappts dann?

Code:

<base href="http://www.chat-surium.com/" />

**Pyrofreak** · 31.08.2009, 12:56

Mensch danke das war der Fehler! Wär ich selber nie drauf gekommen, danke!

gr Pyro

**max.m** · 31.08.2009, 13:31

Bitte.

zur Startseite vom TP

Thema: Zweispaltiges Layout

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

Zweispaltiges Layout

Zweispaltiges Layout

Merkwürdig

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

[CSS] Herangehensweise: Vom grafischen Layout zum CSS-Layout

CS 7.0.2 Layout-Raster und Layout-Textrahmen

[CSS] Zweispaltiges CSS-Layout

[CSS] CSS: Zweispaltiges Layout, beide Spalten gleich lang?

[CSS] interaktives tutorial: vom tabellen-layout zum reinen css-layout

Aktive Benutzer

Aktive Benutzer

Berechtigungen