Antworten auf deine Fragen:
Neues Thema erstellen

CSS: Transparenz Rand überlappt im content

D

dimo83

Gesperrt

Hallo, ich hab mir ein Design in Photoshop erstellt und nun will ich es über HTML / CSS realisieren.
Klappt auch alles wie gewollt ausser ein kleines Problem:



Wie auf dem Bild zusehen ist, überlappt der content Background, allerdings nur wenn ich in den content div´s einfüge. Wie kann ich das verhindern? Wenn keine Div´s im content sind funktionier alles so wie es sein soll.
Der Schatten ist Transparent.

Code: 
@charset "utf-8";
* {
    /*Spricht alle HTML Elemente an */
    margin: 0;
    padding: 0;
    border: 0;
}
html {
    background: transparent url('../images/html-bg.jpg') 0 0 repeat;
    overflow: scroll;
}
body {
    font: 62.5%/1.8em;
    font-family: Arial, Helvetica, Sans-Serif;
    color: white;
}
p {
    margin: 20px 0 1.2em 14px;
}
a:focus {
    outline: none;
}
.noBorder {
    border: 0!important;
}
.noMargin {
    margin: 0!important;
}
.abstand {
    margin-left: 14px;
}
li, lu {
    list-style: none;
}
.icq {
    position: relative;
    top: 1px;
    float: left;
}
.noBg {
    background: transparent!important;
}
.noText {
    text-indent: -9999px;
}
.clear {
    float: none;
    clear: both;
}
.kursiv {
    font-style: italic;
}
.border {
    border: 1px #D8D8D8 dotted;
    width: 300px;
}
.whitebg a:hover {
    color: maroon!important;
}
.justify {
    text-align: justify;
}
/*-------------------------------------------------------*/
div#headerContainer {
    width: 100%;
}
div#headerContainer div#header {
    width: 998px;
    height: 570px;
    background: url(../images/header.png) 0 0 no-repeat;
    margin: 0 auto;
    position: relative;
}

div#headerContainer div#header.other {
    width: 998px;
    height: 329px;
    background: url(../images/header-other.png) 0 0 no-repeat;
    margin: 0 auto;
    position: relative;
}

div#headerContainer div#header ul#navi-top {
    position: absolute;
    list-style: none;
    top: 8px;
    right: 14px;
    font-weight:bold;
}
div#headerContainer div#header ul#navi-top li {
    float: left;
    padding: 0 15px;
    border-right: 1px white dotted;
    line-height: 12px;
    font-size: 12px;
}
div#headerContainer div#header ul#navi-top li a {
    color: white;
    text-decoration: none;
}
div#headerContainer div#header ul#navi-top li a:hover, div#headerContainer div#header ul#navi-top li.active a {
    text-decoration: none;
    color: black;
}
div#header ul#teaser {
    position: absolute;
    top: 400px;
    list-style: none;
    margin:0 0 0 30px;
}
div#header ul#teaser li {
    color:white;
    float: left;
    margin: 0 25px 0 0;
    width: 292px;
}

div#header ul#teaser li a {
    color:#ff7e00;
}

div#header ul#teaser li#mitte {
    width: 295px;
    padding:0 0 0 5px;
}
div#header a#ueber-mich-button, div#header a#portfolio-button, div#header a#kontakt-button {
    width: 123px;
    height: 34px;
    display: block;
    background: url(../images/infobutton.png) 0 0 no-repeat;
    position: absolute;
    top: 233px;
    margin-left:1px;
    text-indent: -9999px;
}
div#header a#ueber-mich-button {
    background-position: 0 0;
    left: 14px;
}
div#header a#portfolio-button {
    background-position: 0 0;
    left: 333px;
}
div#header a#kontakt-button {
    background-position: 0 0;
    left: 654px;
}

div#header a#ueber-mich-button:hover, div#header a#portfolio-button:hover, div#header a#kontakt-button:hover, div#header a#ueber-mich-button.active, div#header a#portfolio-button.active, div#header a#kontakt-button.active {
    background: none;
}


div#header h1 a {
    position: absolute;
    left: 301px;
    top:60px;
    width: 424px;
    height: 62px;
    background: transparent url(../images/logo.png) 0 0 no-repeat;
    text-indent: -9999px;
}
div#header a {
    color: #421c00;
    text-decoration: none;
}
div#header a:hover {
    color: white;
}
/*-----------------------------------------------------*/
div#content {
    width: 998px;
    background:url(../images/content-bg.png) 0 0 repeat-y;
    margin: 0 auto;
}

div#content p {
    margin: 0 0 0 30px;
    color: white;
}

div#content .colomn {
    width: 290px;
    float: left;
    margin: 0 30px 0 30px;
}
HTML: 
<body>

<div id="headerContainer">
    <div id="header" class="other">
        <h1><a href="index.html" title="NAME">xxxxxx</a></h1>

            <ul id="navi-top">
            <li><a href="index.html">Startseite</a></li>
            <li><a href="kontakt.html">Kontakt</a></li>
            <li class="noBorder"><a href="impressum.html">Impressum</a></li>
        </ul>
        
        <div id="navi">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li class="active"><a href="portfolio.html">Portfolio</a></li>
                <li><a href="service.html">Service</a></li>
                <li><a href="ueber-mich.html">Über mich</a></li>
                <li><a href="kontakt.html">Kontakt</a></li>
                <li class="noBorder"><a href="impressum.html">Impressum</a></li>
            </ul>        </div>

    </div>
    <!-- ende header --></div>
<!-- ende headerContainer -->
<div id="content">
    <h1 class="portfoliobutton">Portfolio</h1>
    <h2 class="abstand">xxxxxxxx</h2>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    <div id="content">
        
        <div class="colomn">
            <h4>demo</h4>
            <a href="#"_blank">
            <img alt="demo" src="http://www.psd-tutorials.de/modules/Forum/images/aaa.jpg" height="186" width="280" title="abc" /></a><p>
            </p>
            <h4>demo42</h4>
            <a href="#" target="_blank">
            <img alt="dad" src="http://www.psd-tutorials.de/modules/Forum/images/asdf.jpg" height="186" width="280" title="ow32n" /></a>
            <p></p>
            <h4>Demo</h4>
            <a href="http://www.psd-tutorials.de/modules/Forum/images/demo3.jpg" rel="lightbox" title="Demo3">
            <img alt="Demo" src="http://www.psd-tutorials.de/modules/Forum/images/demo3_klein.jpg" height="186" width="280" title="Demo" /></a>
            <p></p>
            
        </div>
        <div class="colomn noMargin">
            <h4>ber</h4>
            <a href="#" target="_blank">
            <img alt="sdf" src="http://www.psd-tutorials.de/modules/Forum/images/asfdsfg.jpg" height="186" width="280" title="4r" /></a><p>
            </p>
            <h4>Demo</h4>
            <a href="http://www.psd-tutorials.de/modules/Forum/images/demo.jpg" rel="lightbox" title="Demo">
            <img alt="Demo" src="http://www.psd-tutorials.de/modules/Forum/images/demo_klein.jpg" height="186" width="280" title="Demo" /></a>
            <p></p>
            <h4>Demo</h4>
            <a href="http://www.psd-tutorials.de/modules/Forum/images/demo4.jpg" rel="lightbox" title="Demo4">
            <img alt="Demo" src="http://www.psd-tutorials.de/modules/Forum/images/demo4_klein.jpg" height="186" width="280" title="Demo" /></a>

        </div>
        <div class="colomn">
            <h4>hallo</h4>
            <a href="#" target="_blank">
            <img alt="dasaf" src="http://www.psd-tutorials.de/modules/Forum/images/asdffa.jpg" height="186" width="280" title="Ferienhaus Tatiana" /></a><p>
            </p>
            <h4>Demo</h4>
            <a href="http://www.psd-tutorials.de/modules/Forum/images/demo2.jpg" rel="lightbox" title="Demo2">
            <img alt="Demo" src="http://www.psd-tutorials.de/modules/Forum/images/demo2_klein.jpg" height="186" width="280" title="Demo" /></a>
            <p></p>
            <h4>Demo</h4>
            <a href="http://www.psd-tutorials.de/modules/Forum/images/demo5.jpg" rel="lightbox" title="Demo5">
            <img alt="Demo" src="http://www.psd-tutorials.de/modules/Forum/images/demo5_klein.jpg" height="186" width="280" title="Demo" /></a>

        </div>
        <div class="clear">
        </div>
    </div>

    <div id="content">

        

        </div>
        <div class="clear">
        </div>
    </div>

<!-- ende content -->
<div class="clear">
</div>
<div id="footerContainer">
    <div id="footer">

        

    </div>
    <!-- ende footer --></div>
<!-- ende footerContainer -->

</body>
 

D

dimo83

Gesperrt

AW: CSS: Transparenz Rand überlappt im content

Hallo, danke für die Antwort, leider bringt es keine änderung.


Habs gefunden! Dummer Fehler von mir, hatte 2mal content drin....

kann geschlossen werden.

danke
 
Zuletzt bearbeitet:
M

Malmac

Noch nicht viel geschrieben

AW: CSS: Transparenz Rand überlappt im content

Code: 
background: transparent url('../images/html-bg.jpg') 0 0 repeat;

Warum zweimal die Null?
 
sokie

sokie

Mod | Web

AW: CSS: Transparenz Rand überlappt im content

Die erste steht für 0 von links, die zweite für 0 von oben (background-position)
 
H

Haruzept

Guest

AW: CSS: Transparenz Rand überlappt im content

hmmm bei mir will das net so recht gehen. Im Ie schließt es genau ab
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 285 (Mitglieder: 5, Gäste: 280)
Robots: 444

Statistik des Forums

Themen
118.564
Beiträge
1.538.064
Mitglieder
67.487
Neuestes Mitglied
MichaelSEivy
Oben