Werbe-Banner einbetten - ohne daß die betreffende Seite nach unten einrückt

  • Meine css-webpage ist fast fertig. Nur noch die Werbebanner muessen eingebettet werden.


    Da die html-Seite normalerweise immer einruecken tut mit Absaetzen, muß wohl ein passepartout erstellt werden, mit Boxen als Spalten am Rand
    links und rechts. Diese Boxen werden dann transparent geschaltet und dort sollen die Werbebanner dann drin sein.


    Hier habe ich code-snippets fuer die css - seite und fuer die html - seite aber sie sind unvollstaendig - oder reichen sie aus ? Kann
    ich sie einfach einbetten in transparente Boxen als Spalten links bzw. rechts - auf der Hauptseite ? :


    css :
    .ad{ content:url(http://link-von-banner.com);
    }
    .ad2:after{content:"Angebot mit Erklaerung in Textform vom betreffenden Link"; text-align: left;}


    html :
    <div class="ad"></div>
    <div class="ad2"></div>


    Danke fuer Antwort.

  • also es sind gegeben: 2 verschiedene hintergrund-grafiken
    1 fuer die ganze website und
    1 nur fuer den container (mit haupt-content)


    die ganze website ist ein passepartout, weil die werbebanner dort eingebettet
    werden sollen - der hintergrund soll einheitlich bleiben und keine sichtbaren schnitte haben.


    der container an sich macht keine schwierigkeiten.


    problem ist: entweder ist hintergrund nicht sichtbar und alles ist statt dem hintergrund nur weiß
    bis auf den container, dessen hintergrund korrekt ist.


    oder problem ist: entweder ist hintergrund vom passepartout korrekt, aber dann
    ist der container nicht mehr sichtbar - wird irgendwie "zerstoert", und dessen hintergrund ist dann weg.


    (hier sind codes von beiden seiten - in css und in html)


    code von css ist hier:
    - - - - - - -
    body {


    margin : 0;


    padding : 0;


    text-align : left;


    color : #333;


    background-attachment : url(img/bg.jpeg) repeat-y top center; inherit;


    font : 75% "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;


    }


    #framecontentLeft, #framecontentRight{
    position: absolute;
    top: 0;
    left: 0;
    width: 200px; /*Width of left frame div*/
    height: 100%;
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/


    font : 75% "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;
    }


    #framecontentRight{
    left: auto;
    right: 0;
    width: 150px; /*Width of right frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/


    font : 75% "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;
    }


    #framecontentTop{
    position: absolute;
    top: 0;
    left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 150px; /*Set right value to WidthOfRightFrameDiv*/
    width: auto;
    height: 120px; /*Height of top frame div*/
    overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/


    font : 75% "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;
    }


    #container {
    top: 120px; /*Set top value to HeightOfTopFrameDiv*/
    left: 200px; /*Set left value to WidthOfLeftFrameDiv*/
    right: 150px; /*Set right value to WidthOfRightFrameDiv*/
    bottom: 0;


    width : 850px;


    margin : 0 auto;


    padding : 0;


    color : #aaa;


    background : url(img/green.jpeg); absolute;


    border-style:ridge;


    border-width:7px;


    border-color:#292523;


    }


    /*BANNER*/


    #banner {


    float : center;


    width : 630px;


    height : 70px;


    margin-bottom : 0 auto;


    background : url(img/title.png); no-repeat top center;


    }


    #banner h1 {


    margin : 40px 0 0 20px;


    font : normal 2em "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;


    text-transform : none;


    letter-spacing : 3px;


    color : #acaf2c;


    background : transparent;


    }


    /*MAIN CONTENT*/


    #content {


    padding : 0 10px 0 10px;


    margin-left : 170px;


    margin-right : 170px;


    margin-top : 0;


    line-height : 1.8em;
    background-attachment : url(img/bg.jpeg) repeat-y top center; inherit;


    }


    #content h1 {


    padding : 20px 0 0 0;


    font : normal 1.4em "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;


    text-transform : uppercase;


    letter-spacing : 3px;


    color : #acaf2c;


    background : inherit;


    text-align : center;


    }



    .box {


    position: relative;


    overflow: scroll;


    width:100%;


    height:400px;


    text-align: left;


    background:#020346;


    margin:40px auto;


    border-style:ridge;


    border-width:5px;


    border-color:#292523;


    }



    .effect10


    {


    position:relative;


    -webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;


    -moz-box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;


    box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 0 80px rgba(0, 0, 0, 0.1) inset;


    }


    .effect10:before, .effect10:after


    {


    content:"";


    position:absolute;


    z-index:-1;


    -webkit-box-shadow:0 0 40px rgba(0,0,0,0.8);


    -moz-box-shadow:0 0 40px rgba(0,0,0,0.8);


    box-shadow:0 0 40px rgba(0,0,0,0.8);


    top:0;


    bottom:0;


    left:30px;


    right:30px;


    -moz-border-radius:100px / 10px;


    border-radius:100px / 10px;


    }


    .effect10:after


    {


    right:30px;


    left:auto;


    -webkit-transform:skew(8deg) rotate(3deg);


    -moz-transform:skew(8deg) rotate(3deg);


    -ms-transform:skew(8deg) rotate(3deg);


    -o-transform:skew(8deg) rotate(3deg);


    transform:skew(8deg) rotate(3deg);


    }


    /*LEFT SIDEBAR*/


    #sidebar {


    float : left;


    width : 150px;


    margin : 0 0 0 0;


    padding : 5px;


    }


    /*NAVIGATION*/


    .menu {


    margin-bottom : 20px;


    width : 110px;


    padding : 10px 0 0 0;


    }


    .menu ul {


    margin : 0;


    padding : 0;


    list-style-type : none;


    }


    .menu li {


    margin : 0 0 0.2em 0;


    }


    .menu a {


    display : block;


    font-size : 11px;


    color : #a5a6ab;


    background : #020346;


    width : 120px;


    padding : 0.5em 0.8em;


    text-decoration : none;


    border-left : 10px solid #020346;


    }


    .menu a:hover {


    border-left : 10px solid #a5a6ab;


    background-color : #020346;


    color : #ffffff;


    }


    .links {


    font-size : 1.4em;


    text-transform : uppercase;


    letter-spacing : 3px;


    }


    /*RIGHT SIDEBAR*/


    #sidebar-b {


    float : right;


    width : 150px;


    margin : 0 0 0 0;


    padding : 5px;


    }


    /*FOOTER*/


    #footer {


    clear : both;


    padding : 5px;


    margin-top : 5px;


    height : 40px;


    font-size : 0.8em;


    border-top : 1px solid #292523;


    color : #ffffff;


    background : #020346;


    }


    #footer a:link, #footer a:visited {


    background : inherit;


    color : #a5a6ab;


    text-decoration : none;


    }


    #footer a:hover {


    border-bottom : 1px dashed #292523;


    background : inherit;


    color : #020346;


    }


    /*TYPOGRAPHY*/


    h1 {


    margin : 0 0 10px 0;


    font : normal 1.4em "Trebuchet MS", verdana, droid, arial, tahoma, sans-serif;


    text-transform : uppercase;


    color : #ffffff;


    background : inherit;


    }


    blockquote {


    font-weight : bold;


    font-style : italic;


    color : #ffffff;


    }


    /*LINKS*/


    a {


    color : #ffffff;


    font-weight : bold;


    text-decoration : none;


    background : inherit;


    }


    a:hover {


    text-decoration : none;


    color : #292523;


    background : inherit;


    }


    a img {


    border: 0;


    }


    /*CLASS*/


    .clear {


    clear : both;


    overflow : hidden;


    width : 0;


    height : 1px;


    }


    .post {


    background-color : #a5a6ab;


    padding : 3px;


    margin : 20px 10px 0 5px;


    border : 0 dashed #a5a6ab;


    font-size : 80%;


    }


    .post .date {


    background : url(img/clock.gif) no-repeat left center;


    padding-left : 15px;


    margin : 0 15px 0 5px;


    }


    .post .comments {


    background : url(img/comment.gif) no-repeat left center;


    padding-left : 15px;


    margin : 0 15px 0 5px;


    }


    .post .readmore {


    background : url(img/document.gif) no-repeat left center;


    padding-left : 15px;


    margin : 0 15px 0 5px;


    }
    - - - - - - -


    code von html ist hier :


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


    <!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">


    <head>
    <style type="text/css">
    body { background: url(img/bg.jpeg) top center; relative;}


    <title> nosy-x.com </title>


    <meta http-equiv="Context-Type" content="text/html; charset=US-ASCII">


    <!--[if IE 6 ]><html class="xp ie ielt9 ielt8 ielt7 ie6" lang="de-DE"><![endif]-->


    <!--[if IE 7 ]><html class="xp ie ielt9 ielt8 ie7" lang="de-DE"><![endif]-->


    <!--[if IE 8 ]><html class="xp ie ielt9 ie8" lang="de-DE"><![endif]-->


    <!--[if IE 9 ]><html class="xp ie ie9" lang="de-DE"><![endif]-->


    <!--[if (gt IE 9)|!(IE)]><!-->


    <html>


    <html class=" js" lang="en-EN"><!--<![endif]-->


    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />


    <link href="style0x01.css" rel="stylesheet" type="text/css" />


    <meta name="viewport" content="width=device-width">


    <br>


    <title> nosy-x.com </title>
    </style>


    </head>


    <body>


    <br><br>


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-4">


    <meta http-equiv="cache-control" content="no-cache">


    <meta http-equiv="pragma" content="no-cache">


    <meta name="GENERATOR" content="none">



    <META HTTP-EQUIV="Language" CONTENT="US" || CONTENT="DE" || CONTENT="EN">


    <meta name="verify-v1" content="unique-string">


    <meta name="description" content="Android">


    <meta name="robots" content="index, follow">


    <meta name="revisit-after" content="7 days">


    <meta name="audience" content="all">


    <br>


    <br>


    <title> nosy-x.com </title>


    <p style="text-align: center;font-size:12pt">


    <script type="text/javascript"><!--


    <div id="container">


    <div id="banner">


    <h1></h1>


    </div>


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


    <div id="sidebar">


    <div class="menu">


    <ul>


    <li class="links">Navigation</li>


    <li><a href="http://www.nosy-x.com/index.html">homepage auf Deutsch</a></li>


    <li><a href="http://www.nosy-x.com/drop-menue-english.html">homepage in English</a></li>


    <li><a href="http://www.nosy-x.com/main0x01.html">&Uuml;ber uns</a></li>


    <li><a href="http://www.nosy-x.com/main05.html">Unser Angebot</a></li>


    <li><a href="http://www.nosy-x.com/main04.html">Preis-Liste</a></li>


    <li><a href="http://www.nosy-x.com/main07.html">ein Beispiel als email</a></li>


    <li><a href="http://www.nosy-x.com/main06.html">Impressum</a></li>


    <li><a href="http://www.nosy-x.com/main10.html">AGB</a></li>


    <li class="links">L&ouml;sungen</li>


    <li><a href="http://www.nosy-x.com/windows.html">Windows</a></li>


    <li><a href="http://www.nosy-x.com/linux.html">Linux</a></li>


    <li><a href="http://www.nosy-x.com/android.html">Android</a></li>


    <li><a href="http://www.nosy-x.com/cyanogenmod.html">Cyanogenmod</a></li>


    <li><a href="#">Raspberry Pi</a></li>


    <li><a href="http://www.nosy-x.com/security.html">Security / Privacy</a></li>


    <li class="links">Geh&ouml;rlose</li>


    <li><a href="http://www.nosy-x.com/deaf01.mp4">Video zu nosy-x</a></li>


    <li><a href="http://www.nosy-x.com/deaf02.mp4">Linux-Kurse</a></li>


    <li><a href="http://www.nosy-x.com/Video-Hinweis01.html">Hinweis zu Videos</a></li>


    <li class="links">Archiv</li>


    <li><a href="#">2012 ( Aug. bis Dez. )</a></li>


    </ul>


    </div>


    </div>


    <div id="sidebar-b">


    <div class="menu">


    <ul>


    <li class="links">Links</li>


    <li class="links">f&uuml;r Unternehmen</li>


    <li><a href="http://www.nosy-x.com/angebot001.html">Sonderangebote</a></li>


    <li class="links">f&uuml;r Sch&uuml;ler<br>und Studenten</li>


    <li><a href="http://www.nosy-x.com/distros001.html">Distros</a></li>


    <li><a href="http://www.nosy-x.com/discount-studenten001.html">Sonderangebote</a></li>


    <li class="links">Glossar</li>


    <li><a href="http://www.nosy-x.com/mw001.html">was ist malware ?</a></li>


    <li><a href="http://www.nosy-x.com/statistik001.html">aktuelle Statistik</a></li>


    <li class="links">Disclaimer</li>


    <li><a href="http://www.nosy-x.com/disclaimer.html">Warum ?</a></li>


    <li><a href="http://www.nosy-x.com/hinweis.html">wichtiger Hinweis</a></li>


    </ul>


    </div>


    </div>


    <div id="content">


    <h1><span style="font-weight:bold; color:#f8df08;">Willkommen zum Service<br>per e-mail


    <p style="text-align: center;font-size:10pt">Pers&ouml;nlich f&uuml;r Sie habe<br>ich die L&ouml;sung<br>ohne langes Suchen !<br>Einfach, schnell und fair !<br>


    Sie schreiben Ihre Fragen<br>in Ihrer email an mich und<br>ich leiste den IT-support f&uuml;r Sie !<br>( neue Kunden lesen bitte zuerst den Disclaimer im Men&uuml; rechts )


    <br><br><b>Wie es Euch gef&auml;llt - oder lieber Fragen stellen ... ?</b><br>Ich biete Support zu Themen wie :<br><a href="http://www.nosy-x.com/windows.html">Windows</a>, <a href="http://www.nosy-x.com/linux.html">Linux</a> oder <a href="http://www.nosy-x.com/android.html">Android</a></b><br>


    <b> Oder haben Sie einfach Fragen zu einem Programm ? </b></p><br>


    <p style="text-align: center;font-size:16pt"><a href="mailto:support@nosy-x.com"><img src="Email001.png" align="center" alt="graphics are not browser-compatible"></a>


    </p><br>


    </span></h1>


    <h2><center>


    <div class="box effect10"><h10><span style="font-weight:bold; color: #ffffff;"><p style="text-align: left; font-size:10pt">Hier kommen die Nachrichten der laufenden Woche hinein.</h10></div>


    </center>


    </h2>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>


    <p class="post"> <a href="http://www.free-css.com/" class="readmore">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (3)</a> <span class="date">April 03, 2007</span> </p>


    <h3><center>


    <div class="box effect10"><h10><span style="font-weight:bold; color: #ffffff;"><p style="text-align: left; font-size:10pt">Hier kommen die malware-Warnungen der laufenden Woche hinein.<h10></div>


    </center>


    </h3>


    <h4>More Filler Text</h4>


    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla congue, velit tristique mattis auctor, velit elit euismod diam, a interdum tortor enim eget ante. </p>


    <p class="post"> <a href="http://www.free-css.com/" class="readmore">Read more</a> <a href="http://www.free-css.com/" class="comments">Comments (3)</a> <span class="date">April 03, 2007</span> </p>


    </div>


    <div id="footer"> <a href="http://www.free-css.com/">homepage</a> | <a href="mailto:denise@mitchinson.net">contact</a> | <a href="http://validator.w3.org/check?uri=referer">html</a> | <a href="http://jigsaw.w3.org/css-validator">css</a> | &copy; 2007 Anyone | Design by <a href="http://www.mitchinson.net"> www.mitchinson.net</a> | This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 License</a> </div>


    </div><br><br><br>


    <p style="text-align: center;font-size:8pt">- © http://nosy-x.com - Carl-Valentin Schmitt -</a></p><br><br><br><br><br>


    </body>


    </html>

  • Bitte den Code mit dem RTE Editor anständig anzeigen lassen, oder die Dateien einmal hier hochladen :D


    Sonst kann ich damit nicht arbeiten... :D


    ---> kannst Du nicht einfach mit der Maus markieren, dann kopieren und bei Dir in Zwischenablage einfuegen ? 8o :thumbup: :thumbsup:

    was meinst Du mit RTE-Editor ? (hier im Forum ist ein Editor ? - wo ist hier der Editor ? ) - bin seit 2000 nur Linux-Freak ... RTE kenne ich nicht. :whistling:

  • Dieser Code ist nicht ganz komplett, deswegen
    waere eine Ansicht hier nicht komplett moeglich...


    Geht nur um diese 2 Dinge:


    - Problem loesen mit 2 verschiedenen Hintergrund-wallpapers,


    - gleichzeitig passepartout (mit Werbebannern am Rand und Container in der Mitte),


    - Container funktioniert, nur die Ränder mit Werbebannern nicht,