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

Inhalt überlappt den Content

T

Tim Lorens

Mitglied
Guten Morgen,

ich arbeite zur Zeit an einem Template für ein Projekt.
Dabei habe ich ein doofe Fehler und weiß leider nicht wie ich den beheben kann.
Der Inhalt des Contents überlappt einfach und der Content wird nicht größer.

Screen:
Unbenannt.jpg

CSS-Code:
Code: 
body {
background: url('images/bg.gif');
font-family: Trebuchet MS;
}

#content {
min-height: 382px;
width: 880px;
margin: 0 auto;
padding-bottom: 10px;
}

#menu {
height: 40px;
}

#button {
width: 140px;
height: 20px;
background-color: #ccc;
text-align: center;
padding: 5px;
border: 1px solid black;
border-bottom: none;
margin-right: 20px;
margin-top: 10px;
float: left;
border-radius-topleft: 10px;
border-radius-topright: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-radius-topleft: 10px;
-webkit-border-radius-topright: 10px;
-o-border-radius-topleft: 10px;
-o-border-radius-topright: 10px;
}

#button:hover {
height: 30px;
margin-top: 0;
}

a:link, a:visited, a:active {
text-decoration: none;
color: black;
}

a:hover {
text-decoration: underline;
}

#head {
height: 35px;
border: 1px solid black;
border-bottom: none;
border-radius-topright: 11px;
-o-border-radius-topright: 11px;
-moz-border-radius-topright: 11px;
-webkit-border-radius-topright: 11px;
background: -moz-linear-gradient(top, #ccc, #fff);
padding-top: 5px;
padding-left: 20px;
}

#main {
background-color: #fff;
min-height: 300px;
border: 1px solid black;
border-top: none;
border-radius-bottomleft: 6px;
border-radius-bottomright: 6px;
-o-border-radius-bottomleft: 6px;
-o-border-radius-bottomright: 6px;
-moz-border-radius-bottomleft: 6px;
-moz-border-radius-bottomright: 6px;
-webkit-border-radius-bottomleft: 6px;
-webkit-border-radius-bottomright: 6px;
}

#links {
padding: 10px;
width: 540px;
min-height: 200px;
float: left;
margin-bottom: 2px;
}

#rechts {
border: 1px solid black;
padding: 5px;
width: 260px;
height: 265px;
float: right;
margin-right: 20px;
margin-bottom: 2px;
overflow: auto;
}

#style {
margin: 0px auto;
border: 1px solid black;
width: 240px;
height: 182px;
text-align: center;
margin-bottom: 10px;
}

#footer {
text-align: center;
color: #fff;
}

Html-Code:
HTML: 
<html>
    <head>
        <title>WieMachenWoltLabDesingsFürDich</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <div id="content">
            <div id="menu">
                <a href="#"><div id="button">Home</div></a>
                <a href="#"><div id="button">Produkte</div></a>
                <a href="#"><div id="button">Anfragen</div></a>
            </div>
            <div id="head">
                DeinDesing.de - Desings für dein WoltLab Forum und Homepage!
            </div>
            <div id="main">
                <div id="links">
                    <h4>Überschrift</h4>
                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
                </div>
                <div id="rechts">
                    <div id="style">
                        HpStil Day<br>
                        <a href="#"><img src="images/img.png" width="240" height="160"></a>
                    </div>
                    <div id="style">
                        Neuer Style<br>
                        <a href="#"><img src="images/neuesdesign.png" width="240" height="160"></a>
                    </div>
                </div>
            </div>
        </div>
        <div id="footer">
            Desined by Tim Lorens - Idea by Mark - www.tims-works.de.vu
        </div>
    </body>
</html>

Ich hoffe mir kann jemand helfen (:

MfG. Tim
 
Ich glaube Du hast mein Problem nicht ganz verstanden^^
Oder ich bin einfach zu blöd dafür. Bzw. wo muss ich dann clear: left; und clear: right;
einbauen? Ich habe schon vieles versucht, aber der Text ist weiterhin überlappt.
 
Du müsstest innerhalb des Abschnitts

HTML: 
            <div id="main">
                <div id="links">
                    <h4>Überschrift</h4>
                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
                </div>
                <div id="rechts">
                    <div id="style">
                        HpStil Day<br>
                        <a href="#"><img src="images/img.png" width="240" height="160"></a>
                    </div>
                    <div id="style">
                        Neuer Style<br>
                        <a href="#"><img src="images/neuesdesign.png" width="240" height="160"></a>
                    </div>
                </div>
            </div>

vor dem letzten </div> ein weiteres Element einfügen. Also z.B.

HTML: 
            <div id="main">
                <div id="links">
                    <h4>Überschrift</h4>
                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
                    Text Text Text Text Text Text Text Text Text Text Text Text Text Text <br>
                </div>
                <div id="rechts">
                    <div id="style">
                        HpStil Day<br>
                        <a href="#"><img src="images/img.png" width="240" height="160"></a>
                    </div>
                    <div id="style">
                        Neuer Style<br>
                        <a href="#"><img src="images/neuesdesign.png" width="240" height="160"></a>
                    </div>
                </div>
                <div style="clear: both;">&nbsp;</div>
            </div>

Alternativ kann man das auch per CSS-Pseudoklasse after erreichen.

Code: 
#main:after {
 clear: both;
 color: #fff;
 content: ".";
 font-size: 1px;
 height: 1px;
 width: 1px;
}

Das geht jedoch im IE <= 8 nicht.

Dabei fällt mir noch auf, dass Du einen Fehler im HTML-Code hast. Die ID "style" verwendest Du mehrfach. Das ist nicht zulässig. Änder die ID in eine Klasse wenn Du sie mehrfach verwenden willst.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben