• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

css problem

ATom

Mitglied
hallo habe ein kleines problem un zwar hab ich 3 spaltiges css design mit header. so meine linke spalte steht fest alles wunderbar, aber die rechte spalte schiebt sich hin un her sobald ich das fenster klein mache bzw den browser in der breite verändere, woran liegt das. beides ist als position:abolsut gekennzeichnet...sehe grad nich wo der fehler liegt...
danke

hier mal mein css code :

Code:
body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    font-family: verdana, arial, helvetica, sans-serif;
    color: #ccc;
    
        background-image:url('background.GIF');
    }
a {
    text-decoration: none;
    
    color:  #ccc;
    outline: none;
    }
a:visited {
    color:  #ccc;
    }
a:active {
    color:  #ccc;
    }
a:hover {
    color: #ccc;
    text-decoration: underline;
    }
.ahem {
    display: none;
    }
strong, b {
    font-weight: bold;
    }
p {
    font-size: 12px;
    line-height: 22px;
    margin-top: 20px;
    margin-bottom: 10px; 
    }

/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/

h1 {
    font-size: 24px;
    line-height: 44px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
h2 {
    font-size: 18px;
    line-height: 40px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
h3 {
    font-size: 16px;
    line-height: 22px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
h4 {
    font-size: 14px;
    line-height: 26px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
h5 {
    font-size: 12px;
    line-height: 22px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
h6 {
    font-size: 10px;
    line-height: 18px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
    }
img {
    border: 0;
    }
.nowrap {
    white-space: nowrap;
    font-size: 10px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 0;
/* must be combined with nobr in html for ie5win */
    }
.tiny {
    font-size: 9px;
    line-height: 16px;
    margin-top: 15px;
    margin-bottom: 5px; 
    }    
#top {
    margin: 20px 20px 0px 100px;
    padding: 0px;
    border: 0px solid #ccc;
    background: url(Header2.gif) no-repeat;
        position:relative;
    height: 134px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    height: 134px;
        width: 1000px;
    }
html>body #top {
    height: 134px; /* ie5win fudge ends */
    }
#left {
    position: absolute;
    top: 140px;
    left: 100px;
    margin: 20px;
    padding: 10px;
    border: 0px solid #ccc;
    background: url(nav.gif) no-repeat;
    width: 185px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 185px;
        height: 438px;
    }
html>body #left {
    width: 185px; /* ie5win fudge ends */
    }
#middle {
    margin: 0px 20px 20px 320px;
    padding: 0px;
    border: 0px solid #ccc;
    background: ;
        width: 550px;
        top: 140px;
    }
#right {
    position: absolute;
    top: 140px;
    right: 140px; /* Opera5.02 will show a space at right when there is no scroll bar */
    margin: 20px;
    padding: 10px;
    border: 0px solid #ccc;
    background: url(nav1.gif) no-repeat;
    width: 185px; /* ie5win fudge begins */
    voice-family: "\"}\"";
    voice-family:inherit;
    width: 185px;
        height: 438px;
    }
html>body #right {
    width: 185px; /* ie5win fudge ends */
    }
pre {
    font-size: 12px;
    line-height: 22px;
    margin-top: 20px;
    margin-bottom: 10px; 
    }
 
aber die rechte spalte schiebt sich hin un her sobald ich das fenster klein mache bzw den browser in der breite verändere, woran liegt das. beides ist als position:abolsut gekennzeichnet.
Ja logisch. Du hast das ja so geschrieben, dass genau das passieren soll.
Du positionierst Dein Element #right [1] immer absolut [2] 140px vom rechten Rand. Klar, dass das dann seine zu den anderen Elementen relative Position ändert, wenn Du die Größe des Viewports änderst.

[1] Schlecht gewählter Name für ein Element. Wenn Du das Element mal woanders anordnen willst, z.B. links, dann hast Du ein Element, das "right" heißt, aber links steht. Der Sinn der Trennung von Inhalt und Layout ist ja, dass man wegen sowas (einer Designänderung) eben nicht den HTML-Code ändern muss. Deswegen sollten IDs und Klassennamen im Sinne von HTML benamst werden, also eine semantische Bedeutung erhalten, und keine, die aufs Layout hinweist.

[2] Bist Du sicher, dass Du absolute Positionierung brauchst? Ist das im Sinne des Erfinders, dass Du Deine Elemente aus dem Textfluss nimmst, und so dem Browser sagst, er soll sich nicht um das Anordnen der Elemente kümmern? Das kann er viel besser als Du, denn er weiß - im Gegensatz zu Dir - wie groß der Viewport des Nutzers ist.

P.S.: Zum CSS-Code gehört auch immer ein HTML-Code. CSS alleine ist idR aussagelos. Besser aber noch, als ellenlangen Code zu posten, ist ein Link zur Seite!
 
ja ok, könntest du recht haben...aber abgesehen von der nich ganz so treffenden bezeichnung, wie behebe ich das...?? also weil der "linke" bereich wird ja so dargestellt etc wie ich mi das wünsche, aber der "rechte" eben nich...wie kann ich das ändern, also mein ziel ist ein header un dann 3 spalten, wobei die beiden ("links";"rechts") zum design gehören sollen un die "mitte" der inhalt dargestellt wird sich also ändert im gegensatz zu links und rechts.

danke schonmal
html code liefere ich heute abend nach.
 
doch erst heute geworden: so hier der html code

HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><title></title>
<link rel="stylesheet" href="layout.css" type="text/css" media="all" />


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="MSSmartTagsPreventParsing" content="TRUE" />
<meta http-equiv="expires" content="-1" />
<meta http-equiv= "pragma" content="no-cache" />
<meta name="robots" content="all" />
<meta name="author" content="" />
<meta name="description" content="" />
</head><body>


<div id="top">
<table border="0" style="position:absolute; top:10px; left:390px" cellpadding="0">
<tr>
 <td> </td>
 </tr>
</table>
<table border="0" style="position:absolute; top:10px; left:570px" cellpadding="0">
<tr>
 <td><img src="logo-leer.gif" alt="" border="0"></a> </td>
 </tr>
</table>
<table border="0" style="position:absolute; top:30px; left:770px" cellpadding="0">
<tr>
 <td><a href="index.html"><img src="logo-leer1.gif" alt="" border="0"></a> </td>
 </tr>
</table>



</div>

<div id="left">
<table border="0" cellpadding="1">
<tr>
 <td ><a href="pages/Hausansichten.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="13">
<tr>
 <td ><a href="pages/Tiefparterre.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="12">
<tr>
 <td ><a href="pages/Erdgeschoss.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="4">
<tr>
 <td ><a href="pages/1OG.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="13">
<tr>
 <td ><a href="pages/2OG.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="3">
<tr>
 <td ><a href="pages/3OG.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="15">
<tr>
 <td ><a href="pages/Dachgeschoss.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="8">
<tr>
 <td ><a href="pages/Expose.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="12">
<tr>
 <td ><a href="pages/Referenzen.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>
<table border="0" cellpadding="10">
<tr>
 <td ><a href="pages/Kontakt.html"><img src="nav-leer.gif" alt="" border="0"></a> </td>
</tr>
</table>


</div>

<div id="middle"><br><br>

<div align="center">
<font color="#004080">

<h3>Herzlich Willkommen !!!</h3>


</font>
<img src="Bilder/Nord-West-Ansicht-Bau.jpg" alt="" border="0">
<br>
&copy;  2009<br><br>
<font size="-1"><a href="index.html"><font color="#808080">Startseite</font></a> | <a href="pages/Hausansichten.html"><font color="#808080">Hausansichten</font></a> | <a href="pages/Tiefparterre.html"><font color="#808080">Tiefparterre</font></a> | <a href="pages/Erdgeschoss.html"><font color="#808080">Erdgeschoss</font></a> | <a href="pages/1OG.html"><font color="#808080">1.OG</font></a> | <a href="pages/2OG.html"><font color="#808080">2.OG</font></a> | <a href="pages/3OG.html"><font color="#808080">3.OG</font></a> | <a href="pages/Dachgeschoss.html"><font color="#808080">Dachgeschoss</font></a> | <a href="pages/Expose.html"><font color="#808080">Exposé</font></a> | <a href="pages/Referenzen.html"><font color="#808080">Referenzen</font></a> | <a href="pages/Kontakt.html"><font color="#808080">Kontakt</font></a>  </font>
</div>





</div>

<div id="right"><br><br><br><br><br><br>

<font size="-1"><div align="center"><table cellspacing="6">
<tr>
 <td><a href="pages/we01.html">WE01</a> </td>
 <td><a href="pages/we01.html">EG - &raquo;</a></td>
</tr>
<tr>
 <td><a href="pages/we02.html">WE02</a> </td>
 <td><a href="pages/we02.html">EG  - &raquo;</a></td>
</tr>
<tr>
 <td><a href="pages/we03.html">WE03</a> </td>
 <td><a href="pages/we03.html">1.OG - &raquo;</a></td>
</tr>
<tr>
 <td><a href="pages/we04.html">WE04</a> </td>
 <td><a href="pages/we04.html">1.OG - &raquo;</a></td>
</tr>
<tr>
 <td><a href="pages/we05.html">WE05</a> </td>
 <td><a href="pages/we05.html">2.OG - &raquo;</a></td>
</tr>
<tr>
 <td><a href="pages/we06.html">WE06</a> </td>
 <td><a href="pages/we06.html">2.OG - &raquo;</a></td>
</tr>
<tr>
 <td><a href="pages/we07.html"><s>WE07</s></a> </td>
 <td><a href="pages/we07.html">3.OG - res.</a> </td>
</tr>
<tr>
 <td><a href="pages/we08.html"><s>WE08</s></a> </td>
 <td><a href="pages/we08.html">3.OG - res.</a> </td>
</tr>
</table></div></font>



</div>

</body>

</html>
 
1. Wozu sind die ganzen Tabellen? Ich sehe da keine tabellarischen Daten. Weg mit den Tabellen. Ein Link oder ein Image macht keine tabellarischen Daten.
Da sind noch einige andere semantische Fehler in dem HTML-Code, vielleicht solltest Du nebenbei noch HTML richtig lernen (in bezug auf Semantik). Lass die Seite außerdem mal validieren: The W3C Markup Validation Service
2. Wozu absolute Positionierung? Wozu die Elemente aus dem Textfluss nehmen? Warum nicht den Browser die Positionierung übernehmen lassen, der weiß selbst viel besser als Du, wie der Viewport jedes einzelnen Nutzers aussieht.
Eine absolute Positionierung ist in den meisten Fällen überflüssig. Das wird von Anfängern oft - aber fälschlicherweise - als die ultimative Methode zum Positionieren von Elementen angesehen. Meistens fallen sie damit aber auf die Nase (so wie ich anfangs auch ;-))

Meine Tipps zur Behebung Deines Problems:
1. HTML validieren. Nur ein valider Code kann funktionieren.
2. HTML semantisch sinnvoll auszeichnen. Nur semantisch sinnvoller HTML-Code ist eine vernünftige Basis für ein CSS-Design.
3. Absolute Positionierung wegschmeißen. Block-Elemente bekommt man mit "float" viel einfacher nebeneinander und kann mit margin/padding viel besser Abstände erzeugen und kleine Verschiebungen machen.

Dann sehen wir weiter. Aber nur mit Link zur Seite.
 
Zurück
Oben