Page 1 of 1

Template Problem

Posted: Wed Nov 03, 2010 3:32 pm
by Jupdi
Hallo zusammen,

Ich weiß ich bin nicht wirklich erfahren in den ganzen geschichten mit PHP, Css und co. wollte mich jedoch auch einfach mal dranmachen und was eigenes bauen und dabei Lernen. Bin mit dem Ergebnis bis jetzt schon sehr zufrieden, jedoch gibt es bei Komponenten noch das Problem, dass diese immer unter den Linken Modulen angezeigt werden und nicht wie sie sollen im Main_Content Rechts daneben. Dies sieht man am besten auf der Homepage wenn man auf Server geht.

Der Link zu Hompage lautethttp://www.chillout-gaming.eu.

Wäre echt super wenn ihr mir helfen und vielleicht sonst noch ein paar Tipps geben könntet.
Jupdi

PS:
Hier mal die Index.php

Code: Select all

<html>
<head>
<link rel="shortcut icon" href="<?php echo $mosConfig_live_site;?>/images/favicon.ico" />
  <link 
  href="/templates/chillout/css/template.css"   
  rel="stylesheet" type="text/css"/>
  <jdoc:include type="head" />
  <link href="css/template.css" rel="stylesheet" type="text/css">
</head>
<body id="Body">
 <div id="Header">
   <jdoc:include type="modules" name="Header" style="xhtml"/>
   <div id="Login">
        <jdoc:include type="modules" name="login" style="xhtml"/>
   </div>
   <div id="Suche">
     <jdoc:include type="modules" name="suche" style="xhtml"/>
   </div>
   <div>
     <div id="Logo">
        <img src="../templates/chillout/images/Logo.png" >
     </div>
   </div>
 </div>
 <div id="Main">
   <div id="Topmenu">
     <jdoc:include type="modules" name="breadcrumb" style="xhtml"/>
   </div>
   <div id="Main_Right">
     <jdoc:include type="modules" name="right" style="xhtml"/>
   </div>

   <div id="Main_Left">
     <jdoc:include type="modules" name="left" style="xhtml"/>
   </div>
   <div id="Filler1"> </div>

   <div id="Filler2"> </div>
      <div id="Main_Content">
     <jdoc:include type="component" style="xhtml"/>   
   </div>

   <div id="filler"> </div>
 </div>
 <div id="Footer">
   
   <div id="inner_Footer"><jdoc:include type="modules" name="Footer" style="xhtml"/></div>
 </div>
</body>
</html>
Und die Wichtigsten sachen aus der Template.css

Code: Select all

  #Body { font-size: 12px;
    font-family: Helvetica,Arial,sans-serif;
	color:#ccc;
	background-color:#000;
	background-image:url(../images/Background.png);
	background-repeat: no-repeat;
	background-position:top center;
	font-size:12px;
    }

  #Header {
    width: 1161px;
    height: 250px;
	margin: auto;
	background-image:url(../images/Header.png);
	background-position: top center;
    }

  #Footer {
    width: 1160px;
	margin-left:auto;
	margin-right:auto;
	height:125px;
	background-image:url(../images/Footer.png);
	background-position: bottom center;
	color:#ccc;
    }
	 
  #Main { 
	color:#ccc;
	font-size:12px;
    width: 1160px;
	margin: auto;
	overflow:hidden;
	background-image:url(../images/main.png);
	background-repeat:repeat-y;
    }
	
  #Login {
    float: left;
	margin-left: 40px;
	margin-top:4px;
	color:#ccc;
    }

  #Logo{
	  margin-left:330px
    }

  #Suche {
	  margin-top:22px;
	  margin-right:33px;
    float: right;
    }
	
	
  #Topmenu {
	background-image:url(../images/main.png);
	background-repeat:repeat-y;
	width:100%;
    }

  #Main_Right {

    color:#ccc;
    float: right;
	margin-right:35px;
	height:100%;
	min-width:15px;
	max-width:16em;
    }

  #Main_left {
    color:#ccc;
    float: left;
	margin-left:35px;
	width:16em;
	height:100%;
    }

  #Main_Content {
    color:#ccc;
	font-size: 12px;	
    }
  
  #welcome {
	  float:left
    color:#ccc;
	font-size: 12px;
    }
	
  #Filler2 {
	  float: right;
	  height:100%;
	  width:15px;
  }
	
 #Filler1 {
	 float: left;
	 height:100%;
     width:15px;
 }
  
  #inner_Footer { ;
	color:#ccc;
	text-align:center;
	margin-left:inherit;
	margin-right:inherit;
	padding-top:48px;
	width:50%;
    }
	
  #filler {
    float:right;
	clear:both;	
    }
	

Re: Template Problem

Posted: Wed Nov 03, 2010 7:23 pm
by Jupdi
So mir ist jetzt grade aufgefallen das wenn ich für den Main_Content einen Float:Left; zuweise, dann sind zwar die extra eingebauten Komponenten richtig, jedoch die News Komponente ist dann falsch...
Komisch...

Re: Template Problem

Posted: Fri Nov 05, 2010 10:38 am
by Chapter2
Bring erst mal dein (X)-HTML Markup in Ordnung, bevor du mit CSS weitermachst. Der Quirks-Modus ist nie ein gutes Zeichen.

http://validator.w3.org/check?verbose=1 ... ming.eu%2F

Re: Template Problem

Posted: Fri Nov 05, 2010 7:46 pm
by Jupdi
Danke für den Tipp. Habs jetzt eingebaut und jetzt sieht die seite aus wie ein Trümmerfeld -.-'
Woran kanns liegen?

Re: Template Problem

Posted: Fri Nov 05, 2010 8:41 pm
by Chapter2
Dein Div heißt im HTML-Code Main_Left, in der CSS-datei aber Main_left.

Wie ich das gefunden habe? - Firefox Addon Firebug, einfach nur Gold wert!

Ich persönlich finde die Namensgebung etwas unpassend und vermeide Unterstriche sowie Camel-Case wo eben möglich, wenn es nicht gegen Coding-Standards verstößt.

Re: Template Problem

Posted: Fri Nov 05, 2010 10:11 pm
by Jupdi
Danke für die Hilfe und den Tipp. Weißt du vielleicht auch woran es liegt das die Komonenten nicht richtig angezeigt werden?

Re: Template Problem

Posted: Fri Nov 05, 2010 10:24 pm
by Chapter2
Was meinst du mit "nicht richtig angezeigt"?

Re: Template Problem

Posted: Sat Nov 06, 2010 11:32 am
by Jupdi
Ja wie ich bereits oben beschrieben habe. Wenn ich im Menü Links auf Server gehe dann wird dieser Unten drunter angezeigt und nicht rechts neben den Modulen wie es eigentlich sein sollte.

Re: Template Problem

Posted: Sat Nov 06, 2010 12:45 pm
by Chapter2
Von der CSS und HTML Seite sehe ich kein Problem. Der Teamspeak-Server steht als Untermenü von Server.

Die Teamspeak-Anzeige auf der Startseite rechts ist ein Modul, die Ausgabe über Teamspeak-Server aber eine Komponenten, eingebunden über:

Code: Select all

<jdoc:include type="component" />
Daher erscheint das auch in der Mitte.

Re: Template Problem

Posted: Sat Nov 06, 2010 11:57 pm
by Jupdi
Ne das war nicht das Problem ich hatte das bei allem Möglichen Komponenten und Seiten. Habs jetzt aber so gelöst das ich einfach dem Main_Content float:left; und ne fixe größe gegeben hab. Da weiß ich wenigstens was ich hab ;)

Danke trozdem für deine Bemühungen
Jupdi