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ü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> =|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 
|
| Sponsored Links |
|
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
|
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| CSS Problem - Finde den Fehler nicht... | expou | CSS | 4 | 27.04.2011 12:31 |
| Untermenü im IE | nici | CSS | 10 | 22.06.2009 21:19 |
| Kniffliges Float Problem mit IE6 | simplex2k4 | CSS | 10 | 25.06.2008 15:27 |
| Mozilla zeigt DIV zu oft an | cracki | CSS | 6 | 09.03.2008 15:22 |
| Problem mit 3 Spaltigem Layout | stipo | CSS | 0 | 27.05.2006 20:58 |
Linear-Darstellung
