ilch Forum » Ilch Clan 1.1 » Design und Templates » Zentrierung Seite mit div

Geschlossen
  1. #1
    User Pic
    [F-F] sterope Mitglied
    Registriert seit
    11.06.2013
    Beiträge
    23
    Beitragswertungen
    0 Beitragspunkte
    Hallo,

    unsere Seite erstelle ich nun doch neu.<Div>-Container und CSS kommen zum Einsatz.

    Problem:
    Der Seiteninhalt (Header-Grafik und Menü-Leiste) wird nicht zentriert.
    Einen Code-Fehler sehe ich derzeit keinen...da muss aber einer sein.

    Die Seite läuft noch in Xamp. Wer findet das Problem:)?

    Danke und Gruß
    sterope

    Screen:
    gesperrtes Bild
    index.htm:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Funfighter Alliance</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    	<div id="Webseite">
    		<div id="header">
    				<img alt="" src="include/designs/FFA/bilder/header.png" /></div>
    		<div id="main">
    			<div id="menue">
    				<a href="index.php" onclick="toggleMenu(1);">
    				<img alt="Home" src="include/designs/FFA/bilder/menue/home.png" onmouseover="this.src='include/designs/FFA/bilder/menue/home_hover.png'" onmouseout="this.src='include/designs/FFA/bilder/menue/home.png'" /></a>	
    			</div>
    			<div id="login">
    	
    			</div>
    			<div id="Forum">
    	
    			</div>
    			<div id="Inhalt">
    
    			</div>
    			<div id="BoxRechts">
    	
    			</div>
    		</div>
    		<div id="footer">
    
    		</div>
    
    
    	</div> 	
    </body>
    
    </html>

    style.css:
    /* CSS-Layout */
    body
    {
    background-color:#EEEEEE;
    text-align:center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;	
    }
    #webseite
    {
    width:1200px;
    margin:0 auto;
    text-align:left;
    background-color:#EEEEEE;
    color:black;
    }
    #header
    {
    width:1200px;
    height:211px;
    }
    #menue
    {
    width:1200px;
    height:60px;
    background-color:green;
    border:0px
    }



    verwendete ilchClan Version: 1.1 P
    0 Mitglieder finden den Beitrag gut.
  2. #2
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    mach mal um das div mit id webseite noch ein div und gib dem width 100%
    0 Mitglieder finden den Beitrag gut.
  3. #3
    User Pic
    [F-F] sterope Mitglied
    Registriert seit
    11.06.2013
    Beiträge
    23
    Beitragswertungen
    0 Beitragspunkte
    ZitatZitat geschrieben von holz

    mach mal um das div mit id webseite noch ein div und gib dem width 100%


    Hallo holz,

    wo würdest du den Div-Container schließen?
    Sowohl ein schließen direkt nach der <class ID="Webseite">, als auch ganz am Schluss hat keine Besserung gebracht. Anbei der Code.

    Schade, denn dein Ansatz war eigentlich gut.
    Gibt es noch andere Ideen?

    Angepasste index.htm:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <title>Funfighter Alliance</title>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    
    <body>
    <div id="wrapper"> 	<!--Neu, nach Vorschlag von Hozi-->
    	<div id="Webseite">
    </div> 	
    		<div id="header">
    				<img alt="" src="include/designs/FFA/bilder/header.png" /></div>
    		<div id="main">
    			<div id="menue">
    				<a href="index.php" onclick="toggleMenu(1);">
    				<img alt="Home" src="include/designs/FFA/bilder/menue/home.png" onmouseover="this.src='include/designs/FFA/bilder/menue/home_hover.png'" onmouseout="this.src='include/designs/FFA/bilder/menue/home.png'" /></a>	
    			</div>
    			<div id="login">
    	
    			</div>
    			<div id="Forum">
    	
    			</div>
    			<div id="Inhalt">
    
    			</div>
    			<div id="BoxRechts">
    	
    			</div>
    		</div>
    		<div id="footer">
    
    		</div>
    </div>	<!---ABSCHLUSS div id="wrapper"--->
    
    </body>
    
    </html>

    Angepasste style.css
    /* CSS-Layout */
    body
    {
    background-color:#EEEEEE;
    text-align:center;
    font-family:Verdana, Geneva, Tahoma, sans-serif;	
    }
    #wrapper /*CSS für Vorschlag von Holzi*/
    {
    width:100%
    }
    
    #webseite
    {
    margin:0 auto;
    text-align:left;
    background-color:#EEEEEE;
    color:black;
    width:1200px
    }
    #header
    {
    width:1200px;
    height:211px;
    }
    #menue
    {
    width:1200px;
    height:60px;
    background-color:green;
    border:0px
    }
    0 Mitglieder finden den Beitrag gut.
  4. #4
    User Pic
    blakedj06 gelöschter User
    Ich habe Dir eine PM geschrieben die Du lesen solltest.
    0 Mitglieder finden den Beitrag gut.
  5. #5
    User Pic
    [F-F] sterope Mitglied
    Registriert seit
    11.06.2013
    Beiträge
    23
    Beitragswertungen
    0 Beitragspunkte
    Die Seite kann jetzt betrachtet werden: externer Link

    Also, irgendwas stimmt hinten und vorne nicht!

    Das Zentrierungs-Thema habe ich teilweise gelöst:

    <div style="width:1200px;margin:0px auto;text-align:left;border:none">

    Als erstes Div brachte die Lösung, wobei ich es mir nicht erklären kann.
    Denn mein "<div id="Webseite">" enthält exakt den selben Code!
    Außerdem wir nur der Header und Menü-Button zentriert, obwohl das </div> für den Style ganz am Schluss des Codes ist.

    Wo ist da der Sinn?

    Außerdem: Schaut euch mal die Seite im IE an...die Buttons sind von einem Rahmen umgeben, den ich gar nicht im Code habe!

    Was geht mit meinem Code? Führt der ein Eigenleben?

    Gruß
    sterope
    0 Mitglieder finden den Beitrag gut.
  6. #6
    User Pic
    holz Hall Of Fame
    Registriert seit
    17.11.2005
    Beiträge
    4.606
    Beitragswertungen
    117 Beitragspunkte
    du musst border = 0

    für die links mit angeben

    mach das über ein zentrales css

    und kein inline css

    und mach das div außen rum um alles

    width 100% und sonst nix!

    und das div innen dann deine pixel angabe und margin: auto
    0 Mitglieder finden den Beitrag gut.
  7. #7
    User Pic
    [F-F] sterope Mitglied
    Registriert seit
    11.06.2013
    Beiträge
    23
    Beitragswertungen
    0 Beitragspunkte
    Ich habe den Hauptfehler:

    Aus irgendeinem Grund wurde der Pfad zur CSS in der HTML nicht richtig interpretiert, ich habe nun den absoluten Pfad angegeben (include/designs/FFA/style.css") und nicht nur "style.css.

    Jetzt wird alles richtig dargestellt und auch neue Eingaben werden fehlerfrei übernommen.

    ...die Logig erschließt sich mir auch in diesem Fall nicht ganz, da die style.css im selben Verzeichnis, wie die index.htm liegt, aber gut, hauptsache es geht...

    Danke für die Hilfe und falls mir dieses Phänomen jemand erklären kann, wäre ich dafür sehr dankbar lächeln.

    Gruß
    sterope
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten