engemaen |
24.08.2010 18:05 |
Probleme mit Box (zweitem Content)
Hallo zusammen,
tut mir Leid, dass ich so in euer Forum hineinplatze und mich nicht erst vorstelle, doch dies hole ich gleich nach.
An einer anderen Stelle bezüglich meines Themas konnte mir leider nicht geholfen werden.
ich schreibe gerade an meiner Homepage (diese findet ihr in der Signatur),
und habe folgendes Problem;
Wie einige von euch sehen sind die 3 "Boxen" verschoben, dies wäre fehler 1.
Andere sehen die Schrift auf den Buttons "mehr..." verschoben.
Ich habe die Boxen im Header nicht definiert, doch wie mache ich das?
Das topPanel sieht folgendermaßen aus:
Code:
#topPan{width:464px; height:398px; position:relative; margin:0 auto;}
#topPan ul {width:464px;}
#topPan ul li{float:left; font:12px/30px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold; }
#topPan ul li a{width:92px; height:30px; display:block; background:url(images/menubg-normal.gif) 0 0 no-repeat #66605B; color:#FDFDFD; text-decoration:none; text-align:center;}
#topPan ul li a:hover{background:url(images/menubg-hover.gif) 0 0 no-repeat #66605B; color:#1A1917;}
#topPan ul li.menupadding{margin:0 0 0 1px;}
#topPan ul li.home{width:92px; height:30px; display:block; background:url(images/menubg-hover.gif) 0 0 no-repeat #000000; color:#000000; text-decoration:none; text-align:center;}
#boxright {position: absolute; top: 120px; left: 750px; width:200px; height:120px; background:url(images/bodytopbg1.jpg) 0 0 no-repeat #fff; color:#1A1917;}
#boxright h1{color:#000000; font-size:12px; margin-left:5px}
#boxright p{color:#000000; font-size:12px; display:block; margin-left:5px;}
#boxright p.bigtext{color:#9A0000; font-size:12px; margin-left:5px}
#boxright a{background:#fff; color:#9A0000; text-decoration:underline;}
#boxright img{margin-right:5px}
#boxbottomright {position: absolute; top: 240px; left: 750px;width:200px; height:18px; background:url(images/bodybottombg1.jpg) 0 0 no-repeat;}
#boxrighta {position: absolute; top: 265px; left: 750px; width:200px; height:120px; background:url(images/bodytopbg1.jpg) 0 0 no-repeat #fff; color:#1A1917;}
#boxrighta h1{color:#000000; font-size:12px; margin-left:5px}
#boxrighta p{color:#000000; font-size:12px; display:block; margin-left:5px;}
#boxrighta p.bigtext{color:#9A0000; font-size:12px; margin-left:5px}
#boxrighta a{background:#fff; color:#9A0000; text-decoration:underline;}
#boxrighta img{margin-right:5px}
#boxbottomrighta {position: absolute; top: 385px; left: 750px;width:200px; height:18px; background:url(images/bodybottombg1.jpg) 0 0 no-repeat;}
#boxrightb {position: absolute; top: 410px; left: 750px; width:200px; height:50px; background:url(images/bodytopbg1.jpg) 0 0 no-repeat #fff; color:#1A1917;}
#boxrightb h1{color:#000000; font-size:12px; margin-left:5px}
#boxrightb p{color:#000000; font-size:12px; display:block; margin-left:5px;}
#boxrightb p.bigtext{color:#9A0000; font-size:12px; margin-left:5px}
#boxrightb a{background:#fff; color:#9A0000; text-decoration:underline;}
#boxrightb img{margin-top:5px}
#boxbottomrightb {position: absolute; top: 460px; left: 750px;width:200px; height:18px; background:url(images/bodybottombg2.gif) 0 0 no-repeat;}
#topPan h1{display:block; width:464px; height:198px; background:url(images/header.jpg) 0 0 no-repeat; text-indent:-2000px; margin:0; clear:both;}
#toplinkPan{width:464px; height:159px; position:relative; margin:0 auto;}
#toplinkfastPan{width:148px; height:140px; float:left; background:url(images/blog-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 0 0; color:#fff;}
#toplinkfastPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinkfastPan a:hover{text-decoration:none; background:url(images/blog-hover.jpg) 0 0 no-repeat;}
#toplinkfastPan p{display:block; width:90px; height:15px; position:absolute; top:0px; left:0px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px;}
#toplinksecondPan{width:148px; height:140px; float:left; background:url(images/chat-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 10px 0; color:#fff;}
#toplinksecondPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinksecondPan a:hover{text-decoration:none; background:url(images/chat-hover.jpg) 0 0 no-repeat;}
#toplinksecondPan p{display:block; width:90px; height:15px; position:absolute; top:0px; left:157px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px; }
#toplinkthirdPan{width:148px; height:140px; float:left; background:url(images/tools-normal.jpg) 0 0 no-repeat #5B5550; margin:8px 0 0; color:#fff;}
#toplinkthirdPan a{text-decoration:none; display:block; width:148px; height:140px;}
#toplinkthirdPan a:hover{text-decoration:none; background:url(images/tools-hover.jpg) 0 0 no-repeat;}
#toplinkthirdPan p{display:block; width:90px; height:15px; position:absolute; top:0px; right:34px; font:12px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:54px 0 0 21px; }
boxright a und b sind die Boxen die ihr seht eingebunden in HTML sehen sie folgendermaßen aus:
HTML-Code:
<div id="topPan">
<ul>
<li class="home"><a href="index.html">Startseite</a></li>
<li class="menupadding"><a href="Erklaerung.html">Erklärung</a></li>
<li class="menupadding"><a href="Anleitung.html">Anleitung</a></li>
<li class="menupadding"><a href="Beweise.html">Beweise</a></li>
<li class="menupadding"><a href="Links.html">Links</a></li>
</ul>
<h1>Tabletopzone.de</h1>
<div id="toplinkPan">
<div id="toplinkfastPan">
<p></p>
<a href="http://www.frebix.de/index.php?ref=3263" target="blank"></a>
</div>
<div id="toplinksecondPan">
<p></p>
<a href="http://fribi.de/~engemaen" target="blank"></a>
</div>
<div id="toplinkthirdPan">
<p></p>
<a href="http://www.pointshop.de/?ref=2424214" target="blank"></a>
</div>
</div>
</div>
<div id="boxright">
<h1>Aktuelles</h1>
<a href="http://www.Tabletopzone.de/wordpress" target="blank"><img src="Bilder/blog.gif" align="right" border="0"></a>
<p class="bigtext">Blog</p>
<p>Aktuelle Infos und News in Sachen Prämiennetzwerke findet ihr auch in unserem <a href="http://www.Tabletopzone.de/wordpress" target="blank">Blog</a>.</p>
</div>
<div id="boxbottomright"> </div>
<div id="boxrighta">
<h1>Hilfe & Support</h1>
<a href="http://www.Tabletopzone.de/wbblite/" target="blank"><img src="Bilder/Forum.gif" align="right" height="73" width="80" border="0"></a>
<p class="bigtext">Forum</p>
<p>Hier gibt es Antworten auf eure Fragen, Tipps & Tricks und vieles mehr. Im <a href="http://www.Tabletopzone.de/wbblite" target="blank">Forum</a>.</p>
</div>
<div id="boxbottomrighta"> </div>
<div id="boxrightb">
<h1>Du findest uns auch hier:</h1>
<p><center>
<a href="http://www.twitter.com/engemaen"><img src="http://www.Tabletopzone.de/Bilder/twitter.png" alt="Follow Tabletopzone.de on Twitter" border="0" height="25" width="25"/></a>
<a href="http://www.facebook.com/pages/Tabletopzonede/151949814819567#!/pages/Tabletopzonede/151949814819567?v=wall"><img src="http://www.Tabletopzone.de/Bilder/facebook.png" alt="Follow Tabletopzone.de on facebook" border="0" height="25" width="25"/></a>
<a href="http://www.yigg.de/profil/engemaen"><img src="http://www.Tabletopzone.de/Bilder/yigg.png" alt="Nachrichten von Tabletopzone.de auf yigg.de" border="0" height="25" width="25"/></a>
<a href="http://www.mister-wong.de/add_url/" onclick="window.open("http://www.mister-wong.de/index.php?action=addurl&bm_url="+encodeURIComponent(location.href)+"&bm_description="+encodeURIComponent(document.title))+"";return false" title="Diese Seite zu Mister Wong hinzufügen" target="_top"><img src="http://www.Tabletopzone.de/Bilder/wong.png" alt="Diese Seite zu Mister Wong hinzufügen" border="0" height="25" width="25" /></a>
<a href="http://www.delicious.com/save" onclick="window.open('http://www.delicious.com/save?v=5&noui&jump=close&url='+encodeURIComponent(location.href)+'&title='+encodeURIComponent(document.title), 'delicious','toolbar=no,width=550,height=550'); return false;"><img src="http://www.Tabletopzone.de/Bilder/delicious.png" height="25" width="25" alt="Delicious" border="0" /></a>
</center></p>
</div>
<div id="boxbottomrightb"> </div>
Also außerhalb des topPans.
Versuche ich sie im TopPan zu definieren geschieht Homepage Suppe.
Ich muss zugeben, ich lese mich in CSS gerade erst ein, vielleicht könntet ihr mir helfen.
Ich wäre euch sehr dankbar.
Liebe Grüße und auf eine schöne Zeit
David
//edit//
Kleines Beispiel, gerade von einem User reingekommen:
(Browser: Safari leider unbekannte Auflösung)
Klick
|