Sprint
Erfahrenes Mitglied
Hallo,
ich bin momentan dabei, eine alte Tabellen / iFrame Seitte nachzubauen. Dabei ist es so, daß die Seite eine feste Größe hat und mittig im Browserfenster sitzt. Bei den Inhaltsboxen darin werden aber vom Text die Grenzen ignoriert und der Text wird in einer ewig langen Zeile ausgegeben. Die Box selbst sitzt an der richtigen Stelle und hat auch die richtige Größe. Auf einer anderen Seite wird die praktisch identische Box schon verwendet und da wird der Text richtig umgebrochen. Liegt das an der "Tabellenumgebung" oder bin ich zu blöd, den Fehler zu finden?
Link zur Demo
ich bin momentan dabei, eine alte Tabellen / iFrame Seitte nachzubauen. Dabei ist es so, daß die Seite eine feste Größe hat und mittig im Browserfenster sitzt. Bei den Inhaltsboxen darin werden aber vom Text die Grenzen ignoriert und der Text wird in einer ewig langen Zeile ausgegeben. Die Box selbst sitzt an der richtigen Stelle und hat auch die richtige Größe. Auf einer anderen Seite wird die praktisch identische Box schon verwendet und da wird der Text richtig umgebrochen. Liegt das an der "Tabellenumgebung" oder bin ich zu blöd, den Fehler zu finden?
Link zur Demo
HTML:
<div class="swc0">
<div class="swc1">
<div class="swc2">
<div id="content">
<div id="inhalt">
inhalt
</div>
<div id="menu">
<ul>
<li><a id="selected" href="index.html" onfocus="if(this.blur)this.blur()">- Start</a></li>
</ul>
</div>
</div>
</div>
<span class="swc3"></span>
</div>
</div>
Code:
body { color: #000; font-size: 11px; font-family: Verdana, Arial, Helvetica, sans-serif; background-repeat: repeat; background-attachment: scroll; background-position: 50% 50%; }
html, body {
margin: 0;
padding: 0;
}
/*\*/
html, body, .swc0, .swc1 {
height: 100%;
}
.swc0 {
margin: 0 auto;
display: table;
}
.swc1 {
display: table-cell;
vertical-align: middle;
}
/**/
.swc1 {
white-space: nowrap;
}
.swc2 { padding: 0.3em 0.5em; }
/* in IEM solo shrink-wrap, no vert.center \*//*/
* html .swc1 {
text-align: center;
}
* html .swc2 {
display: inline-block;
text-align: left;
width: 1px;
}
/**/
h1 {
margin: 0 0 0.3em 0;
font-size: 1.8em;
line-height: 1;
background-color: #ddd;
}
p {
margin: 0.3em 0 0 0;
}
h1 {
text-align: center;
}
ul, ol {
margin-top: 0;
margin-bottom: 0.3em;
}
#content { background-image: url(../weiter.jpg); background-repeat: no-repeat; position: relative; width: 901px; height: 550px; }
#menu { width:173px; height:375px; background-color:#ffffff; position: absolute; top: 90px; left: 610px; float: right; outline: solid 1px fuchsia; filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85; }
#menu { text-align: left; padding-top: 30px; }
#menu ul { }
#menu li { border-top: 1px dotted transparent; border-bottom: 1px dotted transparent; list-style: none; }
#menu li a { color: black; font-size: 12px; text-decoration: none; height: 30px; display: block; }
#menu li a:hover, #menu li a#selected:hover { color: gray; text-decoration: underline; }
#menu li a#selected { text-decoration: underline; }
#inhalt { color: black; font-size: 12px; line-height: 120%; position: relative; top: 82px; left: 128px; width: 461px; height: 426px; padding-left: 10px; outline: solid 1px aqua; }
