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

dschinn1001 · 14. Dezember 2013

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.

cgee · 15. Dezember 2013

Du kannst position:absolute benutzen.
Damit schiebt sich der Content nicht runter.

dschinn1001 · 15. Dezember 2013

sieht dann so aus ? :

.ad{ content:url(http://link-von-banner.com
position: absolute;);

}

.ad2:after{content:"Angebot mit Erklaerung in Textform vom betreffenden Link"; text-align: left;
position: absolute;}

oder nur so ? :

.ad{ content:url(http://link-von-banner.com);

}

.ad2:after{content:"Angebot mit Erklaerung in Textform vom betreffenden Link"; text-align: left;
position: absolute;}

dschinn1001 · 15. Dezember 2013

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

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

<html>

<br>

</head>

<body>

<br>

</div>

<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/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 class="links">Lö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ö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>

</ul>

</div>

<ul>

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

<li class="links">für Unternehmen</li>

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

<li class="links">für Schü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>

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

<p style="text-align: center;font-size:10pt">Persönlich für Sie habe<br>ich die Lö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ür Sie !<br>( neue Kunden lesen bitte zuerst den Disclaimer im Menü rechts )

<br><br><b>Wie es Euch gefä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><br>

</span></h1>

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

<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> | © 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>

</body>

</html>

dschinn1001 · 15. Dezember 2013

hierfuer zahle ich kleine Belohung !

cgee · 15. Dezember 2013

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

Sonst kann ich damit nicht arbeiten...

dschinn1001 · 15. Dezember 2013

Zitat von cgee

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

Sonst kann ich damit nicht arbeiten...

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

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.

cottton · 15. Dezember 2013

HTML

es geht um diese Ansicht hier

cgee · 15. Dezember 2013

Nicht auf "Schnellantwort" klicken, sondern auf "antworten"
Dort findest du einen vollwertigen RTE.

dschinn1001 · 16. Dezember 2013

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,

Skallagrimsson · 16. Dezember 2013

Hallo Leute,

ich suche jemanden der sich mit Javascript auskennt um mir bei einem Projekt zu helfen. Nach Bezahlung, selbstverständlich.
Falls jemand Interesse hat, einfach sich melden (thorstensen@tpost.fo).

Liebe Grüße

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

Jetzt mitmachen!

Teilen