# Werbung neben meiner Page



## plinius12 (7. Januar 2010)

Hallo und  Guten tag.
Bin durch Google auf euch gestossen und nun gleich eine Frage.
Ich möchte rechts oder oben immer ausserhalb meiner Page Werbung setzten. Wie bekomme ich das hin?
Z.B.: wie bei Arcor.de


----------



## Maik (7. Januar 2010)

Hi,

ohne jetzt den Code bzw. Aufbau deiner Seite im Detail zu kennen:


Variante 1:


```
#werbung { 
float:right;
}
```

Variante 2:


```
#werbung {
position:absolute;
right:0;
top:0;
}
```

mfg Maik


----------



## plinius12 (7. Januar 2010)

Das ganze verruscht immer nach links oben wie rechts


----------



## Maik (7. Januar 2010)

Ohne Link zu deiner Seite lässt sich hierzu nichts sagen.

mfg Maik


----------



## plinius12 (7. Januar 2010)

Ich habe sie noch nicht online.
Hier der Code. ich hoffe das ich keine schimpfe bekomme, wenn ich den jetzt in voller länge rein setzte. Das soll auch auf verschieden unterseiten sein


```
<!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" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="Description" content="compueteresel, windows 7, windows vista, windows xp, download, mehr, zitat woche, woche, ruhr 2010,"/>
<meta name="Keywords" content="computeresel, computer, windows 7, windows vista, windows xp, download, mehr, rechner, software, woche, zitat," />
<meta name="author" content="computeresel" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title>computeresel - Windows 7 - Windows Vista - Windows XP - Download und mehr !</title>
<style type="text/css">
<!--

a {
	color: #666;
}
.grau {
	color: #333;
}
.k {
	font-size: 9em;
}
#apDiv1 {
	position:absolute;
	left:532px;
	top:645px;
	width:270px;
	height:87px;
	z-index:1;
	background-color: #E5E5E5;
}
#apDiv2 {
	position:absolute;
	left:668px;
	top:671px;
	width:156px;
	height:85px;
	z-index:2;
}
#top #site .center-wrapper #header #site-title h1 {
}
-->
</style>
</head>
<body id="top">
<div id="network">
  <div class="center-wrapper">
    <div class="left">
      <!-- #BeginDate format:fcSw1m -->Donnerstag, 7 Januar, 2010  17:02<!-- #EndDate -->
      <span class="text-separator">|</span> <span class="quiet">zuletzt Aktuallisiert</span></div>
    <div class="right">
      <ul class="tabbed" id="network-tabs">
        <li class="current-tab"><a href="#">Simple Magazine</a></li>
        <li><a href="#">Network site</a></li>
        <li><a href="#">Network site 2</a></li>
      </ul>
      <div class="clearer">&nbsp;</div>
    </div>
    <div class="clearer">&nbsp;</div>
  </div>
</div>
<div id="site">
  <div class="center-wrapper">
    <div id="header">
      <div class="right" id="toolbar"></div>
      <div class="clearer">&nbsp;</div>
      <div id="site-title">
        <h1><span class="groß"><a href="#">c</a></span><a href="#">omputer<span class="grau">esel</span></a></h1>
        <h1><b>Windows 7 - Windows Vista - Windows XP - Download und mehr</b></h1>
      </div>
      <div id="navigation">
        <div id="main-nav">
          <ul class="tabbed">
            <li class="current-tab"><a href="News.html">News</a></li>
            <li><a href="Download.html">Download</a></li>
            <li><a href="http://www.motorsport.computeresel.de">Sport</a></li>
            <li><a href="archives.html">Archiv</a></li>
          </ul>
          <div class="clearer">&nbsp;</div>
        </div>
        <div id="sub-nav">
          <ul class="tabbed">
            <li class="current-tab"><a href="index.html">Home</a></li>
            <li><a href="Windows7.html">Windows 7</a></li>
            <li><a href="WindowsVista.html">Windows Vista</a></li>
            <li><a href="WindowsXP.html">Windows XP</a></li>
            <li><a href="Viren.html">Viren</a></li>
            <li><a href="DSL.html">DSL</a></li>
          </ul>
          <div class="clearer">&nbsp;</div>
        </div>
      </div>
    </div>
    <div class="main" id="main-three-columns">
      <div class="left" id="main-left">
        <div>
          <div class="post-title">
            <h2>&nbsp;</h2>
          </div>
          <div class="post-date">
            <p><strong>Hier finden Sie alles um Ihren Rechner am laufen zu halten!</strong></p>
          </div>
          <div class="post-body">
            <p>&nbsp;</p>
            <p><a href="#"><img src="Bilder/top_aufmacher1.jpg" alt="" width="468" height="150" /></a></p>
            <p>&nbsp;</p>
            <p><img src="Bilder/pfeil_r_r.gif" alt="" width="12" height="15" /> <strong> <a href="Windows_News_NVidia_Treiber.html">Nvidia GeForce Treiber 195.81 BETA erschienen</a></strong></p>
            <p>&nbsp;</p>
          </div>
        </div>
        <div class="content-separator"></div>
        <div class="col3 left">
          <div class="column-content">
            <div class="post">
              <p><img src="Bilder/windows7-2.jpg" width="98" height="90" /></p>
              <h4><a href="#">Curabitur justo arcu</a></h4>
              <p>Bibendum at bibendum in, semper nec ibh. </p>
            </div>
          </div>
        </div>
        <div class="col3 col3-mid left">
          <div class="column-content">
            <div class="post">
              <p><a href="http://www.essen-fuer-das-ruhrgebiet.ruhr2010.de/eroeffnung-ruhr2010.html"><img src="Bilder/essenfuerruhr2010.jpg" width="163" height="95" /></a></p>
              <h1>RUHR.2010 startet mit Kulturfest &quot;Glück Auf 2010!&quot;</h1>
              <h1>&nbsp;</h1>
              <h4>&nbsp;</h4>
            </div>
          </div>
        </div>
        <div class="col3 right">
          <div class="column-content">
            <div class="post">
              <p><a href="#"><img src="Bilder/vista7.gif" width="98" height="90" /></a></p>
              <h4><a href="#">Donec rhoncus</a></h4>
              <p>Donec eget congue libero. </p>
            </div>
          </div>
        </div>
        <div class="clearer">&nbsp;</div>
      </div>
      <div class="left sidebar" id="sidebar-1">
        <div class="post">
          <p><img src="Bilder/win7_1.jpg" width="194" height="145" /></p>
          <h3><a href="#">Windows 7</a></h3>
          <p><strong>Windows 7</strong> ist fertig und hat gute <b>Chancen</b> das zu schaffen, woran Vista  scheiterte - der Thronerbe von XP zu werden. Windows 7 wirkt wie aus  einem Guss. Es läuft schnell und stabil, und bietet eine Vielzahl an  gut in die Oberfläche integrierten Funktionen an</p>
          <a href="#" class="more">Read more »</a> </div>
        <div class="content-separator"></div>
        <div class="post">
          <h3>Zitat des Tages </h3>
          <p><strong>Seine Freude in der Freude des anderen finden können, das ist das Geheimnis des Glücks.</strong></p>
          <a href="#" class="more"></a> </div>
        <div class="content-separator"></div>
        <div class="post">
          <h3><img src="Bilder/MagicalDefrag.jpg" width="191" height="145" /></h3>
          <h3><a href="#">Software der Woche</a></h3>
          <p><strong>Performancebooster für lahmende Festplatten: Ashampoo Magical Defrag 3  läuft völlig unbemerkt im Hintergrund und sorgt für eine regelmäßige  Laufwerks-Wartung.</strong></p>
          <a href="Windows_News_Megical_Defrag_1.html" class="more">Read more »</a> </div>
      </div>
      <div class="right sidebar" id="sidebar-2">
        <div class="section">
          <div class="section-title">
            <div class="left">Latest News</div>
            <div class="right"><img src="img/icon-time.gif" width="14" height="14" alt="" /></div>
            <div class="clearer">&nbsp;</div>
          </div>
          <div class="section-content">
            <ul class="nice-list">
              <li>
                <div class="left"><a href="http://www.microsoft.com/downloads/details.aspx?displaylang=de&amp;FamilyID=a4dd31d5-f907-4406-9012-a5c3199ea2b3">Vista SP2 erschienen - DL</a></div>
                <div class="right">18.14</div>
                <div class="clearer">&nbsp;</div>
              </li>
              <li>
                <div class="left"><a href="#">Office 2010 kommt</a></div>
                <div class="right">20:40</div>
                <div class="clearer">&nbsp;</div>
              </li>
              <li>
                <div class="left"></div>
                <div class="right"></div>
                <div class="clearer">&nbsp;</div>
              </li>
              <li>
                <div class="left"></div>
                <div class="right"></div>
                <div class="clearer">&nbsp;</div>
              </li>
              <li>
                <div class="left"></div>
                <div class="right"></div>
                <div class="clearer">&nbsp;</div>
              </li>
              <li>
                <div class="left"></div>
                <div class="right"></div>
                <div class="clearer">&nbsp;</div>
              </li>
              <li><a href="#" class="more"></a></li>
            </ul>
          </div>
        </div>
        <div class="section">
          <div class="section-title">Top 5 Downloads</div>
          <div class="section-content">
            <ul class="nice-list">
              <li><span class="quiet">1. Magical Defrag</span></li>
              <li><span class="quiet">2. WinRar</span></li>
              <li><span class="quiet">3. CCleaner</span></li>
              <li><span class="quiet">4. IE8</span></li>
              <li><span class="quiet">5. Win Optimizer</span></li>
              <li><a href="#" class="more"></a></li>
            </ul>
          </div>
        </div>
        <div class="section network-section">
          <div class="section-title">Links</div>
          <div class="section-content">
            <ul class="nice-list">
              <li><a href="http://www.microsoft.com/de/de/default.aspx">Microsoft</a></li>
              <li><a href="http://www.npsn.de/besucherzentren/haus-puellen.htm">Haus Püllen</a></li>
              <li><a href="http://www.proasyl.de/de/">Ihre Stimme gegen Menschenrechte</a></li>
              <li><a href="http://www.hit.de/">Hit</a></li>
              <li><a href="http://www.fastforward-music.de/index.php">Fastforward</a></li>
              <li><a href="#" class="more">Sitemap »</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="clearer">&nbsp;</div>
    </div>
    <div id="dashboard">
      <div class="column left" id="column-1">
        <div class="column-content">
          <div class="column-title">About Simple Magazine</div>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
          <a href="#">Learn more »</a> </div>
      </div>
      <div class="column left" id="column-2">
        <div class="column-content">
          <div class="column-title">Follow Us (RSS)</div>
          <ul class="plain-list">
            <li><a href="#" class="feed">Lorem ipsum</a></li>
            <li><a href="#" class="feed">Dolor sit amet</a></li>
            <li><a href="#" class="feed">Consectetur</a></li>
            <li><a href="#" class="feed">Adipicing elit</a></li>
          </ul>
        </div>
      </div>
      <div class="column left" id="column-3">
        <div class="column-content">
          <div class="column-title">Help &amp; Support</div>
          <p>Bei Problemen jeglicher Art.</p>
          <p><a href="mailto:info@computeresel.de">Mail an mich</a></p>
        </div>
      </div>
      <div class="column right" id="column-4">
        <div class="column-content">
          <div class="column-title">Get in touch</div>
          <p>Phone: +46 7152 5412<br/>
            Email: info@simplemagazine.com</p>
          <a href="#">Online contact form »</a> </div>
      </div>
      <div class="clearer">&nbsp;</div>
    </div>
    <div id="footer">
      <div class="left"> <span class="text-separator">&copy; 2003-2010 computeresel &rarr;</span> <a href="index.html">Home</a> <span class="text-separator">|</span><a href="Windows7.html">win 7</a> <span class="text-separator">|</span> <a href="WindowsVista.html">win vista</a> <span class="text-separator">|</span> <a href="WindowsXP.html">win xp</a> <span class="text-separator">|</span> <a href="DSL.html">DSL</a> <span class="text-separator">|</span> <a href="Viren.html">Viren</a> <span class="text-separator">|</span> <a href="Download.html">Download</a></div>
      <div class="right"><a href="">Design by w.c.sch </a></div>
      <div class="clearer">&nbsp;</div>
    </div>
  </div>
</div>
</body>
</html>
```


----------



## Maik (7. Januar 2010)

Und was verbirgt sich in dem Stylesheet *style.css*?

Ich frag nur, weil die Seitenansicht ohne es ziemlich unformatiert wirkt.

mfg Maik


----------



## plinius12 (7. Januar 2010)

Was heist unformatiert. ich bin am Anfang und taste mich langsam ran. Macht riesen Spaß soetw
	
	
	



```
/*  
Template name: Simple Magazine
Template URI: http://templates.arcsin.se/simple-magazine-website-template/
Release date: 2009-08-02
Last updated: 2009-08-10
Description: A simple and lightweight magazine styled website template.
Author: Viktor Persson
Author URI: http://arcsin.se/

This template is licensed under a Creative Commons Attribution 2.5 License:
http://templates.arcsin.se/license/
*/


/* 
   Reset
------------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, input, select {margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
table, td, th {vertical-align: middle;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: none;}
:focus {outline: 0;}


/* 
   General 
------------------------------------------------------------------- */

html {
	height: 100%;
	padding-bottom: 1px; /* force scrollbars */
}

body {
	background: #FFF;
	color: #334;
	font: normal 75% sans-serif;
	line-height: 1.5;
}


/* 
   Typography 
------------------------------------------------------------------- */

/* Headings */

h1,h2,h3,h4,h5,h6 {
	color: #444;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.3em;
}
h4,h5,h6 {font-weight: bold;}

h1 {
	font-size: 1em;
	color: #888;
	font-weight: bold;
}
h2 {font-size: 2em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.25em;}
h5 {font-size: 1.1em;}
h6 {font-size: 1em;}

h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin: 0;}


/* Links */

a:focus,a:hover {color: #357;}
a {
	color: #357;
	text-decoration: underline;
}
a.feed {
	background: url('img/icon-feed.gif') no-repeat left center;
	padding-left: 18px;
}

/* More links */
a.more {
	color: #579;
	font-weight: bold;
}
a.more:hover {color: #234;}


/* Text elements */

p {
	margin-bottom: 1em;
	font-size: 12px;
	font-weight: bold;
}

abbr, acronym {border-bottom: 1px dotted #666;}
address {margin-bottom: 1.5em;}
blockquote {margin: 1.5em;}
del, blockquote { color:#666; }
em, dfn, blockquote, address {
	font-style: italic;
	font-size: 12px;
}
strong, dfn {
	font-weight: bold;
	font-size: 12px;
}
sup, sub {line-height: 0;}

pre {
	margin: 1.5em 0;
	white-space: pre;
}
pre,code,tt {
	font: 1em monospace;
	line-height: 1.5;
}


/* Lists */

li ul, li ol {margin-left: 1.5em;}
ul, ol {margin: 0 0 1.5em 1.5em;}

ul {list-style-type: disc;}
ol {list-style-type: decimal;}

dl {margin: 0 0 1.5em 0;}
dl dt {font-weight: bold;}
dd {margin-left: 1.5em;}



/* Special lists */

ul.plain-list li, ul.nice-list li, ul.tabbed li {list-style: none;}

ul.tabbed {
	display: inline;
	margin: 0;
}
ul.tabbed li {float: left;}

ul.plain-list {margin: 0;}

ul.nice-list {margin-left: 0;}
ul.nice-list li {
	list-style: none;
	border-top: 1px solid #EEE;
	padding: 4px 0;
}
ul.nice-list li:first-child {border-top: none;}
ul.nice-list li .right {color: #999;}




/* Tables */

table {margin-bottom: 1.4em; width: 100%;}
th {font-weight: bold;}
thead th {background: #C3D9FF;}
th,td,caption {padding: 4px 10px 4px 5px;}
tr.even td {background: #F2F6FA;}
tfoot {font-style: italic;}
caption {background: #EEE;}

table.data-table {
	border: 1px solid #CCB;
	margin-bottom: 2em;
	width: 100%;
}
table.data-table th {
	background: #F0F0F0;
	border: 1px solid #DDD;
	color: #555;
	text-align: left;
}
table.data-table tr {border-bottom: 1px solid #DDD;}
table.data-table td, table th {padding: 10px;}
table.data-table td {
	background: #F6F6F6;
	border: 1px solid #DDD;
}
table.data-table tr.even td {background: #FCFCFC;}


/* Misc classes */

.small {font-size: 0.9em;}
.smaller {font-size: 0.8em;}
.smallest {font-size: 0.7em;}

.large {
	font-size: 100%;
}
.larger {font-size: 1.25em;}
.largest {font-size: 1.35em;}

.hidden {display: none;}

.quiet {
	color: #666;
}
.loud {color: #000;}
.highlight {background:#ff0;}

.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-separator {padding: 0 5px;}

.error, .notice, .success {
	border: 1px solid #DDD;
	margin-bottom: 1em;
	padding: 0.6em 0.8em;
}

.error {background: #FBE3E4; color: #8A1F11; border-color: #FBC2C4;}
.error a {color: #8A1F11;}

.notice {background: #FFF6BF; color: #514721; border-color: #FFD324;}
.notice a {color: #514721;}

.success {background: #E6EFC2; color: #264409; border-color: #C6D880;}
.success a {color: #264409;}


/* 
   Forms 
------------------------------------------------------------------- */

label {font-weight: bold; cursor: pointer;}
fieldset {padding: 1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;}
legend {font-weight: bold; font-size: 1.2em;}
textarea {overflow: auto;}
input.text, textarea, select {
	background: #FCFCFC;
	border: 1px inset #AAA;
	margin: 0.5em 0;
	padding: 4px 5px;
}
input.text:focus, textarea:focus, select:focus {background: #FFFFF5;}

input.button {
	background: #DDD;
	border: 1px outset #AAA;
	padding: 4px 5px;
}
input.button:active {border-style: inset;}

.form-error {border-color: #F00;}


/* 
   Alignment 
------------------------------------------------------------------- */

/* General */

.center,.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}


/* Images */

img.bordered,img.alignleft,img.alignright,img.aligncenter {
	background-color: #FFF;
	border: 1px solid #DDD;
	padding: 3px;
}
img.alignleft, img.left {margin: 0 1.5em 1em 0;}
img.alignright, img.right {margin: 0 0 1em 1.5em;}


/* Floats */   

.left,.alignleft {float: left;}
.right,.alignright {float: right;}

.clear,.clearer {clear: both;}
.clearer {
	display: block;
	font-size: 0;
	line-height: 0;
	height: 0;
}


/* 
   Separators 
------------------------------------------------------------------- */

.content-separator, .archive-separator {
	background: #D5D5D5;
	clear: both;
	color: #FFE;
	display: block;
	font-size: 0;
	line-height: 0;
	height: 1px;	
}
.content-separator {margin: 20px 0;}
.archive-separator {margin: 10px 0;}


/* 
   Posts 
------------------------------------------------------------------- */

.post a {text-decoration: none;}
.post a:hover {
	text-decoration: underline;
	text-align: center;
}

.post img.left, .post img.right {margin-bottom: 0;}

.post-date {
	color: #777;
	margin: 2px 0 10px;
}
.post-date a {color: #444;}

.post-title h1, .post-title h2, .post-title h3 {margin-bottom: 0;}

.post-meta {
	background: #F6F6F6;
	border: 1px solid #DDD;
	color: #777;
	padding: 6px 10px;
}
.post-meta a {color: #345; }
.post-meta a:hover {color: #001;}

.post-body {font-size: 1.1em;}
.post-body a {color: #039;}
.post-body a:hover {
	color: #039;
	font-size: 12px;
}

.post-body img.left, .post-body img.right {margin-bottom: 1em;}



/* Archives */
.archive-pagination {margin-bottom: 16px;}
.archive-post-date {
	background: #F5F5F5;
	border-bottom: 1px solid #C5C5C5;
	border-right: 1px solid #CFCFCF;
	float: left;
	margin-right: 12px;
	padding: 2px 0 5px;
	text-align: center;
	width: 46px;
}
.archive-post-title .post-date {margin: 0;}
.archive-post-title {padding-top: 4px;}
.archive-post-day {font: normal 1.6em Georgia,serif;}


/* 
   Layout 
------------------------------------------------------------------- */

/* General */
.center-wrapper {
	margin: 0 auto;
	width: 980px;
}

/* Network */

#network {background: #EEE;}
#network .left {
	color: #333;
	padding: 6px 0;
}
#network .tabbed a {
	display: block;
	padding: 6px 10px 7px;
	text-decoration: none;
	color: #666;
}
#network li a:hover {
	background: #F6F6F6;
	color: #000;
}
#network li.current-tab a {
	background: #FFF;
	font-weight: bold;
}
#network .text-separator, #network span {color: #999;}


/* Toolbar */
#toolbar {
	padding: 12px 0 8px;
	font-size: 1.1em;
	color: #999;
}
#toolbar img {vertical-align: middle;}


/* Header */

#header {margin-bottom: 24px;}

/* Site title */
#site-title {
	font: normal 1.6em serif;
	border-bottom: 1px solid #CCC;
	padding-bottom: 24px;
}
#site-title span {
	color: #F00;
	font-size: 27px;
}
#site-title a {
	color: #000;
	text-decoration: none;
	font-size: 42px;
}


/* Navigation */

#navigation {margin-bottom: 24px;}
#navigation a {
	display: block;
	text-decoration: none;
}

/* Main navigation */

#main-nav a {
	color: #888;
	font-size: 1.5em;
	padding: 9px 14px;
}
#main-nav li {background: url('img/navigation-separator.gif') no-repeat left center;}
#main-nav li:first-child {background: none;}
#main-nav li.current-tab a, #main-nav a:hover {color: #002;}
#main-nav li.current-tab a {background: url('img/navigation-arrow.gif') no-repeat center bottom;}


/* Subnav */

#sub-nav {background: #DDEDF7; padding: 0 5px;}
#sub-nav a {
	color: #678;
	font: bold 1.2em sans-serif;
	padding: 10px;
}
#sub-nav li.current-tab a, #sub-nav a:hover {color: #223;}


/* Main */

.main {margin-bottom: 18px;}

.main#main-three-columns {background: url('img/main-three-columns.gif') repeat-y right top;}
.main#main-three-columns .sidebar {width: 193px;}
.main#main-three-columns #main-left {width: 520px;}

.main#main-two-columns {background: url('img/main-two-columns.gif') repeat-y right top;}
.main#main-two-columns .sidebar {width: 260px;}
.main#main-two-columns #main-left {width: 671px;}

.sidebar a {text-decoration: none;}
.sidebar a:hover {text-decoration: underline;}

#sidebar-1 {margin-left: 37px;}

/* Columns */
.col3 {width: 32%;}
.col3-mid {margin-left: 2%;}

/* Sidebar */

#sidebar-wrapper {}
#sidebar {}


/* Sidebar sections */
.section {margin-bottom: 16px;}
.section-title {
	background-color: #F2F6FA;
	border-top: 2px solid #ABC;
	font: bold 1.1em sans-serif;
	margin-bottom: 5px;
	min-height: 0;
	padding: 5px 8px 6px;
}

.network-section .section-title {
	background-color: #F6F6F6;
	border-color: #D6D6D6;
}


/* Dashboard */

#dashboard {
	background: #FAFAFA url('img/dashboard.gif') repeat-y left top;
	border: 1px solid #E7E7E7;
}

#dashboard .column {width: 244px;}
#dashboard #column-4 {border-right: none;}

#dashboard .column-content {
	padding: 14px 16px;
}
#dashboard .column-title {
	color: #666;
	font-size: 1.4em;
	font-weight: bold;
	padding-bottom: 5px;
}
#dashboard a {color: #456;}
#dashboard a:hover {color: #000;}


/* Footer */

#footer {padding: 10px 0;}
#footer a {
	color: #579;
	text-decoration: none;
}
#footer .right, #footer .right a {
	color: #999;
	text-decoration: none;
}
#footer .text-separator {
	padding: 0 3px;
	color: #BBB;
}
#footer a:hover {
	color: #000;
	text-align: justify;
}


/* 
   Misc overriding classes
------------------------------------------------------------------- */

/* Border */

.noborder {border: 0;}
.notborder {border-top: 0;}
.norborder {border-right: 0;}
.nobborder {border-bottom: 0;}
.nolborder {border-left: 0;}

/* Margin */

.nomargin {margin: 0;}
.notmargin {margin-top: 0;}
.normargin {margin-right: 0;}
.nobmargin {margin-bottom: 0;}
.nolmargin {margin-left: 0;}

/* Padding */

.nopadding {padding: 0;}
.notpadding {padding-top: 0;}
.norpadding {padding-right: 0;}
.nobpadding {padding-bottom: 0;}
.nolpadding {padding-left: 0;}

/* Single line IE fix */
* html #sub-nav, * html .section-title, * html .main {height: 0.01%; min-height: 0.01%;}
```


----------



## Maik (7. Januar 2010)

In Anbetracht des Seitenaufbaus wäre es eine Überlegung wert, dem inneren Bereich von *center-wrapper* eine rechte Spalte zu gönnen, in der die Werbung untergebracht wird.

mfg Maik


----------



## plinius12 (7. Januar 2010)

Und wie geht das?
Hattest Du in deiner antwort nicht gerade einen HTML und CSS Code dabei? Wo sind die?


----------



## Maik (7. Januar 2010)

Genauso, wie du es für die drei Spaltenblöcke innerhalb von *main-three-columns* umgesetzt hast. Dort käme dann halt eine weitere Spalte dazu.

Meinen Codevorschlag hab ich wieder entfernt, da es sich in deinem Seitenkonzept nicht eignet, die Werbung außerhalb von *center-wrapper* zu platzieren, wenn das Browserfenster in der Breite verkleinert wird.

mfg Maik


----------



## plinius12 (7. Januar 2010)

Ich bekomme das nicht hin. Wo muss ich was rein setzten?


----------



## Maik (7. Januar 2010)

So schnell hast du versucht, das umzusetzen? :suspekt:

Dann zeig mal bitte deinen Versuch.

mfg Maik


----------



## Maik (7. Januar 2010)

Ich hab hier aus vergangenen Tagen einen Code für solch ein vierspaltiges Layout herumfliegen.

Auf deine Seitenverhältnisse anpassen darfst du ihn dann selbständig.


```
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="author" content="Maik">
<meta name="date" content="2009-07-05">

<title>:::4cols:::</title>

<style type="text/css">
<!--
#wrapper {
width:1000px;
margin:auto;
}
#col1 {
float:left;
width:200px;
background:#bbb;
}
#col2 {
float:left;
width:400px;
background:#ccc;
}
#col3 {
float:left;
width:200px;
background:#ddd;
}
#col4 {
float:right;
width:200px;
background:#eee;
}
-->
</style>

</head>
<body>

<div id="wrapper">
     <div id="col1">col1</div>
     <div id="col2">col2</div>
     <div id="col3">col3</div>
     <div id="col4">col4</div>
</div>

</body>
</html>
```


mfg Maik


----------



## plinius12 (7. Januar 2010)

Nein habe ich nicht. versteh ich bin noch nicht so fit.
ich trottel war im Glauben das gerade doppelt zu setzten.
Du meinst doch dies hier
.main {margin-bottom: 18px;}

.main#main-three-columns {background: url('img/main-three-columns.gif') repeat-y right top;}
.main#main-three-columns .sidebar {width: 193px;}
.main#main-three-columns .sidebar {width: 193px;}


----------



## plinius12 (7. Januar 2010)

Muss ich mal rumdoktorn. Esse erst mal was.
Ist es denn schwer das ganze?
Ein dickes Danke an dich für die Hilfe


----------



## plinius12 (7. Januar 2010)

plinius12 hat gesagt.:


> Muss ich mal rumdoktorn. Esse erst mal was.
> Ist es denn schwer das ganze?
> Ein dickes Danke an dich für die Hilfe



Auf einer Unterseite habe ich es hinbekommen. Was nicht funktioniert ist auf meiner Indexseite.
Woran kann das liegen?


----------



## Maik (7. Januar 2010)

Wo sich da zwischen deinen beiden Seiten der entscheidende Unterschied versteckt, kann ich dir nicht sagen, da ich keine Glaskugel besitze 

Am Besten lädst du mal alles auf deinen Webspace, und nennst den Link dorthin. 

Danach dürfte ich schlauer sein, und näheres dazu sagen können.

mfg Maik


----------



## plinius12 (8. Januar 2010)

Gut das werde ich tun. kann aber noch eine zeit dauern. kann ich mich dann noch einmal melden auch wenn es länger als 8tg. geht?
danke


----------



## Maik (8. Januar 2010)

Moin,

kein Problem, ich hab's nicht eilig ;-)

mfg Maik


----------

