XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Problem mit Layout .. vermute: float (http://xhtmlforum.de/showthread.php?t=43363)

Küspert 08.12.2006 19:57

Problem mit Layout .. vermute: float
 
Hi,

also ich vermute, dass ich ein Problem mit "float" habe. Habe mir auch schon euere FAQ angegugt und auch schon so ziemlich jeden Container einmal gecleared gehabt.

Nur es will nicht im FF und Opera ... der IE geht (deshalb denke ich auch float), da er ja floats auch ohne clear richtig darstellt.

Hier mal den ganzen Stuff:

Code:

/************
Background settings
************/

body
{
        background-image: url(../images/background.jpg);
}

/************
Global settings
************/

*
{
        margin: 0px;
        padding: 0px;
}

img
{
        border: none;
        vertical-align: bottom;
}

/************
Specific settings
************/

.menu_left_content
{
          width: 172px;
          text-align: left;
}

/************
Container settings
************/

#maincontainer
{
        background-image: url(../images/background_top.jpg);
        background-repeat: repeat-x;
}

#maincontainer_center
{
        background-image: url(../images/background_content.jpg);
        width: 857px;
        margin-left: auto;
        margin-right: auto;
          font-family: Tahoma,Verdana,Geneva,Arial,Helvetica,Sans-serif;
          font-size: 11px;
          line-height: 120%;
          color: #f1973f;
}

#container_header
{
        width: 857px;
        height: 219px;
}

#container_menu_left
{
        width: 172px;
        float: left;
}

#container_content_main
{
        width: 513px;
        float: left;
}

/************
Menu button settings
************/

a.news, a.newsarchive, a.forum, a.guestbook, a.calendar, a.votes, a.links, a.sponsors, a.downloads, a.userlist, a.squads, a.clanrules, a.clanwars, a.awards, a.rankings, a.serverstatus, a.serverrules, a.teamspeak, a.serverstats, a.serverlist, a.gallery, a.contact, a.join_us, a.fight_us, a.link_us, a.impressum
{
        height: 18px;
        display: block;
}

a.news
{
        background-image: url(../images/news.jpg);
}

a.newsarchive
{
        background-image: url(../images/newsarchive.jpg);
}

a.forum
{
        background-image: url(../images/forum.jpg);
}

a.guestbook
{
        background-image: url(../images/guestbook.jpg);
}

a.calendar
{
        background-image: url(../images/calendar.jpg);
}

a.votes
{
        background-image: url(../images/votes.jpg);
}

a.links
{
        background-image: url(../images/links.jpg);
}

a.sponsors
{
        background-image: url(../images/sponsors.jpg);
}

a.downloads
{
        background-image: url(../images/downloads.jpg);
}

a.userlist
{
        background-image: url(../images/userlist.jpg);
}

a.squads
{
        background-image: url(../images/squads.jpg);
}

a.clanrules
{
        background-image: url(../images/clanrules.jpg);
}

a.clanwars
{
        background-image: url(../images/clanwars.jpg);
}

a.awards
{
        background-image: url(../images/awards.jpg);
}

a.rankings
{
        background-image: url(../images/rankings.jpg);
}

a.serverstatus
{
        background-image: url(../images/serverstatus.jpg);
}

a.serverrules
{
        background-image: url(../images/serverrules.jpg);
}

a.teamspeak
{
        background-image: url(../images/teamspeak.jpg);
}

a.serverstats
{
        background-image: url(../images/serverstats.jpg);
}

a.serverlist
{
        background-image: url(../images/serverlist.jpg);
}

a.gallery
{
        background-image: url(../images/gallery.jpg);
}

a.contact
{
        background-image: url(../images/contact.jpg);
}

a.join_us
{
        background-image: url(../images/join_us.jpg);
}

a.fight_us
{
        background-image: url(../images/fight_us.jpg);
}

a.link_us
{
        background-image: url(../images/link_us.jpg);
}

a.impressum
{
        background-image: url(../images/impressum.jpg);
}

/************
Mouseover settings
************/

a.news:hover
{
        background-image: url(../images/news_mouseover.jpg);
}

a.newsarchive:hover
{
        background-image: url(../images/newsarchive_mouseover.jpg);
}

a.forum:hover
{
        background-image: url(../images/forum_mouseover.jpg);
}

a.guestbook:hover
{
        background-image: url(../images/guestbook_mouseover.jpg);
}

a.calendar:hover
{
        background-image: url(../images/calendar_mouseover.jpg);
}

a.votes:hover
{
        background-image: url(../images/votes_mouseover.jpg);
}

a.links:hover
{
        background-image: url(../images/links_mouseover.jpg);
}

a.sponsors:hover
{
        background-image: url(../images/sponsors_mouseover.jpg);
}

a.downloads:hover
{
        background-image: url(../images/downloads_mouseover.jpg);
}

a.userlist:hover
{
        background-image: url(../images/userlist_mouseover.jpg);
}

a.squads:hover
{
        background-image: url(../images/squads_mouseover.jpg);
}

a.clanrules:hover
{
        background-image: url(../images/clanrules_mouseover.jpg);
}

a.clanwars:hover
{
        background-image: url(../images/clanwars_mouseover.jpg);
}

a.awards:hover
{
        background-image: url(../images/awards_mouseover.jpg);
}

a.rankings:hover
{
        background-image: url(../images/rankings_mouseover.jpg);
}

a.serverstatus:hover
{
        background-image: url(../images/serverstatus_mouseover.jpg);
}

a.serverrules:hover
{
        background-image: url(../images/serverrules_mouseover.jpg);
}

a.teamspeak:hover
{
        background-image: url(../images/teamspeak_mouseover.jpg);
}

a.serverstats:hover
{
        background-image: url(../images/serverstats_mouseover.jpg);
}

a.serverlist:hover
{
        background-image: url(../images/serverlist_mouseover.jpg);
}

a.gallery:hover
{
        background-image: url(../images/gallery_mouseover.jpg);
}

a.contact:hover
{
        background-image: url(../images/contact_mouseover.jpg);
}

a.join_us:hover
{
        background-image: url(../images/join_us_mouseover.jpg);
}

a.fight_us:hover
{
        background-image: url(../images/fight_us_mouseover.jpg);
}

a.link_us:hover
{
        background-image: url(../images/link_us_mouseover.jpg);
}

a.impressum:hover
{
        background-image: url(../images/impressum_mouseover.jpg);
}

Code:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC
        "-//W3C//DTD XHTML 1.1//EN"
        "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" dir="ltr">
        <head>
                <meta name="author" content="Daniel K&uuml;spert"/>
                <meta name="description" content="Das ist der Webauftritt der Polnische Wurschtfabrik"/>
                <meta name="keywords" content="=|PWF|=, Online Gaming, Counter-Strike Clan"/>
                <meta name="robots" content="index, follow"/>
                <meta http-equiv="pragma" content="no-cache"/>
                <meta http-equiv="content-language" content="de"/>
                <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
                <meta http-equiv="content-style-type" content="text/css"/>
                <meta http-equiv="content-script-type" content="text/javascript"/>
                <script type="text/javascript" src="../inc/java.js"></script>
                <link rel="shortcut icon" href="../favicon.ico"/>
                <link rel="stylesheet" type="text/css" href="../inc/stylesheet.css"/>
                <title>=|PWF|= Clansite | Online Gaming since 2005</title>
        </head>
        <body>
                <div id="maincontainer">
                        <div id="maincontainer_center">
                                <div id="container_header">
                                        <img src="../images/header_left.jpg" alt="" style="float: left;"/>
                                        <img src="../images/header_right.jpg" alt="" style="float: right;"/>
                                </div>
                                <div id="container_menu_left">
                                        <a class="news" href="ka.php"></a>
                                        <a class="newsarchive" href="ka.php"></a>
                                        <a class="forum" href="ka.php"></a>
                                        <a class="guestbook" href="ka.php"></a>
                                        <a class="calendar" href="ka.php"></a>
                                        <a class="votes" href="ka.php"></a>
                                        <a class="links" href="ka.php"></a>
                                        <a class="sponsors" href="ka.php"></a>
                                        <a class="downloads" href="ka.php"></a>
                                        <a class="userlist" href="ka.php"></a>
                                        <img src="../images/clan.jpg" alt=""/>
                                        <a class="squads" href="ka.php"></a>
                                        <a class="clanrules" href="ka.php"></a>
                                        <a class="clanwars" href="ka.php"></a>
                                        <a class="awards" href="ka.php"></a>
                                        <a class="rankings" href="ka.php"></a>
                                        <img src="../images/server.jpg" alt=""/>
                                        <a class="serverstatus" href="ka.php"></a>
                                        <a class="serverrules" href="ka.php"></a>
                                        <a class="teamspeak" href="ka.php"></a>
                                        <a class="serverstats" href="http://stats.polnische-wurschtfabrik.de/hlstats.hp"></a>
                                        <a class="serverlist" href="ka.php"></a>
                                        <img src="../images/misc.jpg" alt=""/>
                                        <a class="gallery" href="ka.php"></a>
                                        <a class="contact" href="ka.php"></a>
                                        <a class="join_us" href="ka.php"></a>
                                        <a class="fight_us" href="ka.php"></a>
                                        <a class="link_us" href="ka.php"></a>
                                        <a class="impressum" href="ka.php"></a>
                                        <img src="../images/top_downloads.jpg" alt=""/>
                                        <div class="menu_left_content"></div>
                                        <img src="../images/partner.jpg" alt=""/>
                                        <div class="menu_left_content"></div>
                                        <img src="../images/last_registered.jpg" alt=""/>
                                        <div class="menu_left_content"></div>
                                        <img src="../images/counter.jpg" alt=""/>
                                        <div class="menu_left_content"></div>
                                </div>
                                <div id="container_content_main">
                                        <div id="container_latest_pics">
                                                <img src="../images/latest_wars.jpg" alt="" style="float: left;"/>
                                        </div>
                                </div>
                        </div>
                </div>
        </body>
</html>

Onlinedemo habe ich auch:

=|PWF|= Clansite | Online Gaming since 2005

Sodala im FF und Opera sieht man ja, dass der menu_left Container aus dem maincontainer_center rasuschießt ... Nun habe ich den auch schon gecleared, aber es ändert sich nix.

Erkennbar daran, dass sich der Orange Hintergrund nicht verlängert und auch der Content Hintergrund nicht.

Weiß wer weiter von euch ??

Ich habe auch schon overflow:auto genommen jedoch nutzt da der IE Scrollbalken ... dafür bräuchte ich dann visible für den IE und wegen so was nen Hack O_o

Geht sicherlich auch leichter ...

€dit: Aja im IE sind mit Lücken zwischen den Bildern unten aufgefallen.

Würdet ihr das über height: 0px; lösen ?? Also nur wenn nichts eingetragen ist ... wenn was drinne steht isses eh egal.

Beste Grüße

Küspert 09.12.2006 15:51

Keiner ned Idee :(

fricca 09.12.2006 16:53

Zum Umgang mit float und clear: die verlinkten Artikel unter FAQ Punkt 2 durcharbeiten. "Guggen" reicht nicht.

Navigationen gehören in Listen; für Überschriften gibt es die Elemente h1-h6.
Wenn du unbedingt Grafik-Links (mit einer unlesbar kleinen Pixelschrift :() willst, dann informier dich bitte über Image-Replacement-Techniken.
Lesestoff:
Vorsprung durch Webstandards | Retro-Coding: Semantischer Code ist der Anfang von gutem Design
Übersicht: Image-Replacement-Techniken | Artikel von Jens Meiert

Küspert 09.12.2006 17:09

So klein ?

Ich pers. finde man kann es gut lesen.

Naja Geschmackssache ...

Ok Danke für die Links, falls es doch noch wo hängen sollte melde ich mich wieder.

Mfg


Alle Zeitangaben in WEZ +2. Es ist jetzt 17:44 Uhr.

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

© Dirk H. 2003 - 2020