XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Probleme mit Box (zweitem Content) (http://xhtmlforum.de/showthread.php?t=62167)

engemaen 24.08.2010 17: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">&nbsp;</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">&nbsp;</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(&quot;http://www.mister-wong.de/index.php?action=addurl&bm_url=&quot;+encodeURIComponent(location.href)+&quot;&bm_description=&quot;+encodeURIComponent(document.title))+&quot;&quot;;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">&nbsp;</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

FortyTwo 24.08.2010 19:56

Link zum Problem bitte, da sonst mühselig nachvollziehbar.

Gruß,
FortyTwol

Manfred62 24.08.2010 20:39

@FortyTwo
Zitat:

..meiner Homepage (diese findet ihr in der Signatur)..
;)

Gruß Manfred

Manfred62 24.08.2010 20:50

Mit was hast du die Seite gebaut?? Hat heftig viele Fehler.
Jede Menge leere Absätze/divs/Links...?

Gruß Manfred

engemaen 24.08.2010 21:29

Oh, ja werd mich die Tage mal drum kümmern, jedoch erst wenn das Design richtig steht.

Liebe Grüße

engemaen 25.08.2010 16:55

*push* benötige bitte wirklich hilfe, habs nun noch mehrfach versucht doch immer kommt es zur Homepage Suppe.

Homepage ist gebastelt mit dem Editor.

Liebe Grüße

Manfred62 25.08.2010 17:24

Zitat:

Zitat von engemaen (Beitrag 472815)
...mit dem Editor.

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

Wenn dir wieder einfällt, mit welchem Tool du arbeitest, könntest dort mal Tidy drüberlaufen lassen (sofern vorhanden). Das würde schon mal helfen.

Gruß Manfred

engemaen 25.08.2010 19:29

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?

engemaen 25.08.2010 19:51

Leider immernoch dersselbe Fehler,
Rückmeldeung der aktuellen User "Blog und Forum schieben sich vor das Logo"

Liebe Grüße

//edit alle fehler auf der index seite weg.

Manfred62 25.08.2010 20:01

Die Fehlermeldung bezieht sich auf den falschen Metatag:
HTML-Code:

<meta name="Auf Tabletopzone.de.....News gibt es im Blog." />
Sollte so aussehen:
HTML-Code:

<meta name="description" content="Auf Tabletopzone.de.....News gibt es im Blog." />
Zum eigentlichen Problem: wo sollen denn die Boxen hin?
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 09:01 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2019, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2019