Template Problem

Moderator: Sisko1990

Forum rules
Forumregeln
Locked
Jupdi
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 03, 2010 3:19 pm

Template Problem

Post by Jupdi » Wed Nov 03, 2010 3:32 pm

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;	
    }
	

Jupdi
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 03, 2010 3:19 pm

Re: Template Problem

Post by Jupdi » Wed Nov 03, 2010 7:23 pm

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

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: Template Problem

Post by Chapter2 » Fri Nov 05, 2010 10:38 am

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

Jupdi
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 03, 2010 3:19 pm

Re: Template Problem

Post by Jupdi » Fri Nov 05, 2010 7:46 pm

Danke für den Tipp. Habs jetzt eingebaut und jetzt sieht die seite aus wie ein Trümmerfeld -.-'
Woran kanns liegen?

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: Template Problem

Post by Chapter2 » Fri Nov 05, 2010 8:41 pm

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.

Jupdi
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 03, 2010 3:19 pm

Re: Template Problem

Post by Jupdi » Fri Nov 05, 2010 10:11 pm

Danke für die Hilfe und den Tipp. Weißt du vielleicht auch woran es liegt das die Komonenten nicht richtig angezeigt werden?

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: Template Problem

Post by Chapter2 » Fri Nov 05, 2010 10:24 pm

Was meinst du mit "nicht richtig angezeigt"?

Jupdi
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 03, 2010 3:19 pm

Re: Template Problem

Post by Jupdi » Sat Nov 06, 2010 11:32 am

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.

Chapter2
Joomla! Intern
Joomla! Intern
Posts: 57
Joined: Sat Feb 06, 2010 10:20 am

Re: Template Problem

Post by Chapter2 » Sat Nov 06, 2010 12:45 pm

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.

Jupdi
Joomla! Apprentice
Joomla! Apprentice
Posts: 6
Joined: Wed Nov 03, 2010 3:19 pm

Re: Template Problem

Post by Jupdi » Sat Nov 06, 2010 11:57 pm

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


Locked

Return to “Template, CSS und Designfragen”