|
||||
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; } 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> 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
__________________
Geändert von engemaen (24.08.2010 um 18:19 Uhr) |
Sponsored Links |
|
||||
...aha ?? Deine Fehler (oder sogar noch mehr?) hast immer noch!
Die leeren "Teile" hast auch noch drin... Also?? HTML-Code:
<div id="toplinkfastPan"> <p></p> <a href="http://www.frebix.de/index.php?ref=3263" target="blank"></a> </div> Gruß Manfred |
|
||||
Du ich bin nicht so schnell, muss ja nebenher noch arbeiten ,
werd mir tidy mal ansehen. Wie mit welchem Tool? Mit dem Windows Editor. Ist das schlimm die drin zu lassen? Falls mal ein Text dahin kommt dachte ich? Ansonsten mach ich sie raus. Teil leeren felder hab ich schon behoben aber noch nicht hochgeladen. Wie gesagt möchte das das Design stimmt. Liebe Grüße engemaen //edit: Tidy hat geholfen Klick Nur was da verkehrt sein soll weiss ich nicht. Was macht die Anzeige bei euch?
__________________
Geändert von engemaen (25.08.2010 um 20:43 Uhr) |
Sponsored Links |
|
||||
Die Fehlermeldung bezieht sich auf den falschen Metatag:
HTML-Code:
<meta name="Auf Tabletopzone.de.....News gibt es im Blog." />
HTML-Code:
<meta name="description" content="Auf Tabletopzone.de.....News gibt es im Blog." />
Vermute mal, rechts daneben? Leg einen wrapper-div um alles (im body). Breite zusammenrechnen (min 464px+200px). Am einfachsten gehts dann wohl mit 2 divs im wrapper, beide links floaten, mit jeweiliger Breite versehen. Da drin sind dann deine Spalten. Allerdings musst dann recht umfangreich alle pos. absolute und was dazu gehört, wegmachen. Wahrscheinlich noch mehr.... Aber ohne css Kenntnisse wird das etwas heftig... Zum Editor: nutze einen richtigen Editor (PSPad, Scriptly etc.) Damit tust dich leichter. Gruß Manfred zum lernen: Teil 1 kostenlos online lesen - Little Boxes - Webseiten gestalten mit HTML und CSS |
Sponsored Links |
Stichwörter |
box, boxen, content, einsetzen, fehler, hilfe, verschieben |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Tabellen als Div Container | SpecialFighter | (X)HTML | 7 | 12.10.2010 18:40 |
Ungewöhnlicher abstand beim clearen von floats | adrianno | CSS | 14 | 16.09.2009 15:20 |
DIV Länge automatisch anpassen | judicious | CSS | 10 | 08.05.2006 17:30 |
Seitenaufbau mit DIVs und 100% Höhe | vespasquire | CSS | 6 | 12.09.2004 16:21 |
#box a:hover .info: css-layout: ie6.0/win, moz.1ie5.0/mac, | marioN | CSS | 2 | 19.01.2004 18:17 |