ilch Forum » Ilch Clan 1.1 » Design und Templates » Bitte um Hilfe bei Codebereinigung

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

    ich benötige Hilfe bei folgendem Problem:

    Die "Last Matches"-Box auf der rechten Seite wird außerhalb des Body-Elements angezeigt.

    Ich tippe auf einen Fehler bei den Attributen "Float" oder "Position".

    Wo habe ich den Fehler eingebaut?

    Leider finde ich den Fehler nicht, was damit zusammenhängen mag, dass ich Laie bin und mich gerade erst einarbeite und durchaus ambitioniert starte (eigenes Template, umdesignen der Boxen- und Content-Inhalte sowie des Forums etc)...aber ich bin lernfähig und ehrgeizig.


    Ich bin über jede konstruktive Antwort sehr dankbar und hoffe auf euch, denn ihr habt mir bisher auch immer geholfen, wofür ich euch ebenfalls dankbar bin Drink.

    Lieben Gruß
    sterope


    verwendete ilch Version: 1.1 P

    betroffene Homepage: funfighteralliance.de

    style.css 
    * {
    list-style: none outside none;
}
html {
    background: none repeat scroll 0 0 #FFFFFF;
	font-family: 'Roboto',sans-serif;
}
body {
    color: #000000;
	background-color: #FEFEFE;
    border: 1px solid #DDDDDD;
    border-radius: 10px;
    box-shadow: 0 0 20px 5px #DDDDDD inset;
    margin: 0 auto;
    text-align: left;
    width: 1200px;
	height: 100%;
}
}
.h1 {
    font-family: 'PT Sans',sans-serif;
    font-weight: 700;
}
.h2 {
    font-family: 'PT Sans',sans-serif;
    font-weight: 400;
}
.h3 {
    font-family: 'Roboto',sans-serif;
    font-weight: normal;
}
#header, #navigation, #login, #login li, #loginright, #highlightleft, #highlightright, #content, #leftcolumn, #topwar_container, #topwar_container, #topwar_bluebox, #nextwar_box, #lastwar_box, #topwar_whitebox, .news_headline_kate, a.news_headline_comment {
    float: left;
}
#header, #navigation li {
    background-repeat: no-repeat;
}
#login li, #login a, #topwar_container, p.topwar_versus, #news_footer {
    position: relative;
}
#topwar_bluebox, #nextwar_box, #lastwar_box, #topwar_whitebox, #topwar_picopponentleft, p.topwar_upcomingmatch, p.topwar_upcomingmatchempty, #topwar_picopponentright, img.news_headline_writersgraphic, .news_headline_username, .news_headline_datum, a.news_headline_comment {
    position: absolute;
}
#rightcolumnpartners, li#rightcolumnpartners {
    border-left: thin solid #DBDBDB;
    border-right: thin solid #DBDBDB;
}
#news_headline, #news_content {
    border-bottom: thin solid #E5E5E5;
}
#login_before li, #login_loggedin li, p.topwar_upcomingmatch, p.topwar_upcomingmatchempty, .news_headline_kate, a.news_headline_comment {
    color: #FFFFFF;
}
#navigation ul, #navigation a, #login_before, #login_loggedin {
    color: #6C6C6C;
}
#header {
    background-image: url("bilder/header.jpg");
    height: 211.008px;
    width: 1200px;
}
#navigation {
    height: 61.008px;
    width: 1200px;
}
#navigation ul {
    margin-left: 64.256px;
}
#navigation li {
    background-image: url("bilder/square.gif");
    background-position: left center;
    display: inline-block;
    padding-left: 20px;
    padding-right: 10px;
}
#navigation a {
    font-size: 24px;
    text-decoration: none;
}
#login {
    background: none repeat scroll 0 0 #000000;
    border-radius: 5px 0 0 5px;
    border-right: thin solid #D2D2D2;
    height: 30px;
    line-height: 8.528px;
    margin-left: 21px;
    width: 1000px;
}
#login_before, #login_loggedin {
    margin-left: 64px;
}
#login_before li, #login_loggedin li {
    bottom: 9.6px;
    font-size: 12px;
    padding-right: 8px;
}
#login_loggedin li {
    bottom: 4.8px;
}
#login_before a, #login_loggedin a {
    bottom: -4.8px;
    color: #EEEEF1;
    font-size: 14px;
    right: 8px;
    text-decoration: none;
}
#login_loggedin a {
    bottom: 0;
}
#loginright {
    background-color: #000000;
    border-radius: 0 5px 0 0;
    color: #909090;
    font-size: 14px;
    font-weight: 700;
    height: 30px;
    line-height: 30px;
    text-align: center;
    width: 157.008px;
}
#container_highlights {
    margin-left: 21px;
    width: 1158.01px;
}
#highlightleft {
    background: none repeat scroll 0 0 #0000FF;
    height: 178px;
    margin-right: 153px;
    margin-top: 9.008px;
    width: 487.008px;
}
.youtube_player {
    border: 0 none;
    height: 178px;
    margin-top: 9.008px;
    width: 348px;
}
#rightcolumnpartners {
    border-bottom: thin solid #DBDBDB;
    border-radius: 0 0 5px 5px;
    float: right;
    width: 156px;
}
#rightcolumnpartners ul {
    margin: 0 auto;
    text-align: center;
}
#rightcolumnpartners li {
    margin-left: -40px;
    padding-bottom: 9.008px;
    padding-top: 9.008px;
}
#content {
    left: 21px;
    position: relative;
    margin: 0 auto;
}
#leftcolumn {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
    margin-top: 9.008px;
    width: 710px;
}
#topwar_container {
    background: none repeat scroll 0 0 #FF0000;
    margin-top: 9.008px;
}
#topwar_bluebox {
    background: none repeat scroll 0 0 #00A3FF;
    box-shadow: 1px 1px 3px #292929;
    height: 95.008px;
    margin-left: 732.008px;
    margin-top: 9.008px;
    width: 256px;
}
#nextwar_box {
    margin-left: 732.008px;
    margin-top: 140px;
}
h1 {
    background: none repeat scroll 0 0 #1596DE;
    color: #FFFFFF;
    font-size: 14px;
    height: 30px;
    left: 0;
    line-height: 30px;
    margin-top: 0;
    padding-left: 11px;
    position: relative;
    width: 253px;
}
.arrow {
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-top: 4px solid #0E6B9F;
    height: 0;
    left: 256px;
    line-height: 0;
    position: absolute;
    top: 100%;
    width: 0;
}
#nextwar_header {
    background-color: #00A3FF;
    color: #FFFFFF;
    font-size: 14px;
    height: 25px;
    padding-left: 5px;
    padding-top: 5.5px;
    width: 256px;
}
#nextwar_content {
    color: #000000;
    font-size: 12px;
    height: 25px;
    padding-top: 5.5px;
    width: 256px;
}
#lastwar_box {
    height: 200.008px;
    margin-left: 732.008px;
    margin-top: 350px;
    width: 256px;
}
#lastwar_header {
    background-color: #00A3FF;
    color: #FFFFFF;
    font-size: 14px;
    height: 25px;
    padding-left: 5px;
    padding-top: 5.5px;
    width: 256px;
}
#lastwar_content {
    background-color: #FFFFFF;
    color: #000000;
    font-size: 20px;
    height: 25px;
    padding-top: 5.5px;
    width: 256px;
}
#topwar_picopponentleft {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 72px;
    left: 22px;
    top: 12px;
    width: 72px;
}
p.topwar_upcomingmatch {
    font-size: 10px;
    height: 17.008px;
    margin-left: 98.48px;
    text-align: center;
    top: 0;
    width: 60px;
}
p.topwar_upcomingmatchempty {
    font-size: 10px;
    height: 17.008px;
    margin-left: 28.48px;
    text-align: center;
    top: 12px;
    width: 200px;
}
#topwar_picopponentright {
    background: none repeat scroll 0 0 #FFFFFF;
    height: 72px;
    right: 21.008px;
    top: 12px;
    width: 72px;
}
p.topwar_versus {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #CCCCCC;
    font-size: 11px;
    height: 16px;
    line-height: 16px;
    margin-left: 104.4px;
    padding: 1px 6px;
    text-align: center;
    top: 30px;
    width: 35.2px;
}
#topwar_whitebox {
    height: 72.992px;
    margin-left: 587.008px;
    margin-top: 102px;
    width: 256px;
}
p.topwar_team1 {
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    margin-left: 10px;
    text-align: center;
    width: 90px;
}
p.topwar_versus1 {
    background: none repeat scroll 0 0 #EEEEF1;
    color: #2099DC;
    font-size: 10px;
    line-height: 16px;
    margin-left: 108px;
    margin-top: -26px;
    text-align: center;
    text-decoration: none;
    width: 40px;
}
p.topwar_team2 {
    color: #000000;
    font-size: 10px;
    font-weight: bold;
    line-height: 16px;
    margin-left: 155px;
    margin-top: -26px;
    text-align: center;
    width: 90px;
}
#news_headline {
    padding-bottom: 7px;
    padding-top: 14px;
    width: auto;
}
.news_headline_kate {
    background-color: #00A3FF;
    height: 15px;
    line-height: 14px;
    text-align: center;
    width: 48px;
}
.news_headline_title, .news_headline_title_1 {
    display: inline-block;
    margin-top: -3.5px;
    overflow: hidden;
    padding-left: 48px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 389px;
}
.news_headline_title_1 {
    width: 470px;
}
img.news_headline_writersgraphic {
    height: 16px;
    margin-left: 14px;
    margin-top: -3.5px;
    width: 17px;
}
.news_headline_username {
    font-size: 11px;
    margin-left: 33px;
    margin-top: -1px;
}
.news_headline_datum {
    color: #858A9F;
    font-size: 11px;
    margin-left: 167px;
    margin-top: -1px;
    white-space: nowrap;
}
#news_content {
    font-size: 14px;
    margin-top: 12px;
    padding-bottom: 12px;
}
#news_footer {
    border-bottom: medium solid #E5E5E5;
    padding-bottom: 16px;
    padding-top: 14px;
}
a.news_headline_comment {
    background-color: #272934;
    font-size: 11px;
    height: 17px;
    line-height: 17px;
    text-align: center;
    text-decoration: none;
    top: 7px;
    width: 48px;
}
#footer {
	margin-top:-87px;
	height: 87px;
	width: 577.008px;
	margin-left: 99.008px;
	clear:both;
	font-size:11px;
	}
#footer_links {
	float: left;
	margin-top: 10px;
}
#footer_rechts {
	float: right;
	margin-top:-66px;
}
div a {
	text-decoration:none;
	color:black;	
}
.footer_links_unten {
	width:283px;
	height:49px;
	float:left;
}	

/*NEUE WARBOX VON LORD|SCHIRMER*/
.warbox {
    margin:0px;
    padding:0px;
}
.warbox table {
    width:100%;
    border:0px;
}
.warbox img {
    border:0px;
}
.warbox a.more {
    background-color:#1696DF;
    color:#000;
    padding:1px 5px;
    font-weight:bold;
    text-decoration:none;
}
.warbox a.more:hover {
    color: #FFFFFF;
}
input, textarea, select {
    color: #000000;
    font-size: 11px;
	font-family: verdana, arial;
    border-color: #000000;
  	border-width: 1px;
    border-style: solid;
    font-weight: none;
    text-decoration: none;
    background-color: #dedede;
}


    index.htm 
    <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
  <title>Funfighter Alliance</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <link href="include/designs/FFA/style.css" rel="stylesheet" type="text/css" />
  <link href='http://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css' />
  <link href='http://fonts.googleapis.com/css?family=PT+Sans:700,400' rel='stylesheet' type='text/css'>
  <link href="include/designs/FFA/boxen.css" rel="stylesheet" type="text/css" />
  <link rel="stylesheet" href="include/designs/FFA/flexslider.css" type="text/css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
  <script src="include/designs/FFA/jquery.flexslider.js"></script>
  <script type="text/javascript" charset="utf-8">
$(document).ready(function(){
jQuery('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".highlightleft",
itemWidth: 487,
prevText: "Previous",
nextText: "Next", controlNav: false });
});
  </script>
  </head>
  <body>
    <div id="header"> </div>
    <div id="navigation">
    <ul>
        <li style="list-style-type: none; list-style-image: none; list-style-position: outside;"><a href="index.php">Home</a></li>
        <li><a href="?news">News</a></li>
        <li><a href="?forum">Forum</a></li>
        <li><a href="?teams">Teams</a></li>
        <li><a href="?fightus">Fight us</a></li>
        <li><a href="?contact">Contact</a></li>
      </ul>
  </div>
    <div id="login"> {_boxes_login}</div>
    <div id="loginright"> Kooperations-Clans</div>
    <div id="container_highlights">
    <div id="highlightleft">
        <div class="flexslider">
        <ul class="slides">
            <li> <img src="include/images/clanlogos/LOGO_FFA.png" /> </li>
            <li> <img src="include/images/clanlogos/LOGO_FF.png" /> </li>
            <li> <img src="include/images/clanlogos/LOGO_BW.png" /> </li>
            <li> <img src="include/images/clanlogos/LOGO_DNA.png" /> </li>
          </ul>
      </div>
      </div>
    <div id="highlightright">
        <iframe class="youtube_player" src="//www.youtube-nocookie.com/embed/LhuIjNSg7Gg?theme=light&amp;showinfo=0&amp;controls=1&amp;autohide=1" allowfullscreen=""></iframe>
      </div>
    <div id="rightcolumnpartners">
        <ul>
        <li><a href="http://www.frankens-funfighter.de" target="_blank"> <img alt="Link to Frankens-Funfighter" src="include/designs/FFA/bilder/Logos/FF.png" /></a></li>
        <li><a href="http://www.dna-clan.de" target="_blank"> <img alt="Link to Die Neue Allianz" src="include/designs/FFA/bilder/Logos/DNA.png" /></a></li>
        <li><a href="http://www.blackwatchclan.eu" target="_blank"> <img alt="Link to Black Watch" src="include/designs/FFA/bilder/Logos/BW2.png" /></a></li>
      </ul>
      </div>
  </div>
    <div id="content">
    <div id="leftcolumn"> {EXPLODE} </div>
    {_boxes_topmatch} {_boxes_nextwars} {_boxes_lastwars} </div>
  </div>
<div id="footer">
    <div id="footer_links">Copyright &copy; 2013 by
    Funfighter Alliance. Design by FFA|stero. <img alt="The End" src="include/designs/FFA/bilder/footer.jpg" id="footer_links_unten" /></div>
    <div id="footer_rechts"> <a href="http://www.funfighteralliance.de/index.php">Home
      | </a> <a href="/index.php?contact">Contact
      | </a> <a href="index.php?impressum">Impressum
      | </a> <a href="index.php?disclaimer">Disclaimer
      | </a> <a href="">Privacy Policy</a></div>
</body>
</html>

    Fehlerhaft angezeigte lastwars.php ("Last Matches"): 
    <?php
defined ('main') or die ('no direct access');

echo '<div id="lastwar_box"><h1>Last Matches<span class="arrow"></span> </h1>';

// letzten 6 abgeschlossenen Wars
$erg = db_query('SELECT * FROM `prefix_wars` WHERE `status` = "3" ORDER BY `datime` DESC LIMIT 0,6');
  
// Prüfung ob ein Lastwar vorhanden ist
if ( db_num_rows($erg) == 0 ) {
    echo '
    <table class="warbox" cellspacing="0" cellpadding="0">
        <tr>
            <td>kein Match eingetragen</td>
        </tr>
    </table>';
  
} else {
     
    echo '<table class="warbox" cellspacing="0" cellpadding="0">';
     
    // Lastwars ausgaben
    while ($row = db_fetch_object($erg) ) {
          
        // Prüfung Gegner (kein GegnerTag dann Gegnername)
		$gegnertag = get_opponent_details('tag', $row->oid);
		$gegnername = get_opponent_details('name', $row->oid);
        $gegner = (empty($gegnertag) ? ((strlen($gegnername)<13) ? $gegnername : substr($gegnername,0,10).'...') : $gegnertag);
          
        // Teaminfos holen (Teamname/Teamicon)
        $rowTeam = db_fetch_object(db_query('SELECT img, name FROM `prefix_groups` WHERE `id` = ' . $row->tid),0);
          
        // Prüfung ob Teamicon vorhanden ist
        if (file_exists($rowTeam->img)) {
            $team = '<img src="'  .$rowTeam->img . '" alt="' . $rowTeam->name . '" title="' . $rowTeam->name . '" />';
        } else {
            # Ausgabe bei fehlendem Teamicon
            $team = '<img src="include/images/teams/noteam.png" alt="' . $rowTeam->name . '" title="' . $rowTeam->name . '" />';
        }
 
        // Ausgabe des gesamten Ergebnis (Teambild vs. Gegnername - XX : XX - Link zur Übersicht)
        echo '
          <tr>
            <td>' . $team . '</td>
            <td>vs.</td>
            <td>' . $gegner . '</td>
            <td> &nbsp; </td>
            <td>' . $row->owp . '</td>
            <td> : </td>
            <td>' . $row->opp . '</td>
            <td> &nbsp; </td>
            <td><a class="more" href="index.php?wars-more-' . $row->id . '" title="ansehen">&rsaquo;</a></td>
          </tr>';
    }
     
    echo '</table>';
  
}
?>



    Zuletzt modifiziert von [F-F] sterope am 11.12.2013 - 23:26:59
    0 Mitglieder finden den Beitrag gut.
  2. Fr. 13.12.2013 09:02 Uhr #2
    User Pic
    Mairu Coder
    Registriert seit
    16.06.2006
    Beiträge
    15.334
    Beitragswertungen
    386 Beitragspunkte
    Das jetzt zu bereinigen ist denke ich fast unmöglich zunge

    Also ich würde dir empfehlen Elemente, die zusammen gehören, erstmal in einen eigenen Container zu packen und dann diesen Container zu positionieren. Dann ist am Ende auch egal, wie viel da reinkommt usw.

    z.b. 
    header
main
  -navi
  -rest
    -links
       -loginbox
       -banner
          -rotate
          -video
       -sitecontent
          -content
          -boxen
             - ...
    -rechts
       -partner 
footer


    Dann wird das denke ich auch einfacher für dich mit dem positionieren.

    Ach und noch ein kleiner Hinweis am Rande, auf einer Seite sollte ein h1 nur genau einmal vorkommen, deswegen nicht in einer Box verwenden.


    Zuletzt modifiziert von Mairu am 13.12.2013 - 09:04:35
    Und auch immer mal ein Blick auf die FAQ werfen. | Mairus Ilchseite
    0 Mitglieder finden den Beitrag gut.
  3. Fr. 13.12.2013 19:18 Uhr #3
    User Pic
    [F-F] sterope Mitglied
    Registriert seit
    11.06.2013
    Beiträge
    23
    Beitragswertungen
    0 Beitragspunkte
    Hi Mairu,

    erstmal ein Danke für deine Antwort. Damit ich deinen Vorschlag auch umsetzen kann, noch eine Verständnisfrage:

    Was meinst du mit einzelnen Containern?
    Eine Unterteilung in DIV's habe ich ja bereits vorgenommen. Falls du das aber meintest, würdest du mir bitte anhand eines Beispiels (aus meinem Quellcode) zeigen, wie es besser geht?
    Derzeit habe ich nähmlich noch keine Vorstellung, wie es besser geht.

    Das wäre toll von dir!

    Gruß
    sterope
    0 Mitglieder finden den Beitrag gut.
  4. Sa. 14.12.2013 00:13 Uhr #4
    User Pic
    Maretz Hall Of Fame
    Registriert seit
    28.02.2009
    Beiträge
    740
    Beitragswertungen
    74 Beitragspunkte
    Dazu kann ich dir sicherlich auch weiterhelfen.
    Momentan sieht ja dein Contentbereich wie folgt aus: 

    <div id="content">
    <div id="leftcolumn"> {EXPLODE} </div>
    {_boxes_topmatch} {_boxes_nextwars} {_boxes_lastwars} </div>


    Wie Mairu als kurzgehaltenes zwinker Beispiel darstellte solltest du auch den Boxenbereich in einem Container packen.

    Also in der Art : 

    <div id="content">
<div id="leftcolumn">{EXPLODE}</div>
<div id="boxen_feld_rechts">{_boxes_topmatch}{_boxes_nextwars}{_boxes_lastwars}</div>
<div>


    Die CSS sollte ja dann sicherlich kein Thema sein.

    Mfg Maretz

    PS : Was haben eigentlich die Einträge u.a. margin-left: 732.008px;
    margin-top: 9.008px;     zu einigen vielen Einträgen auf sich?
    Ggf. mal die css bereinigen,da doch einiges entfernt werden kann,wie u.a auch in der index.htm ( doppelt min.js , aktuelle Version ausreichend , style Angaben in die css auslagern .....)


    Zuletzt modifiziert von Maretz am 14.12.2013 - 00:19:08
    Ilch Templates and Modules

    0 Mitglieder finden den Beitrag gut.
  5. Mo. 16.12.2013 19:20 Uhr #5
    User Pic
    [F-F] sterope Mitglied
    Registriert seit
    11.06.2013
    Beiträge
    23
    Beitragswertungen
    0 Beitragspunkte
    Hey,

    danke für die Hilfe. Setze die Webseite derzeit nochmals neu auf, mit bereinigtem Code.

    Gruß
    stero
    0 Mitglieder finden den Beitrag gut.
Geschlossen

Zurück zu Design und Templates

Optionen: Bei einer Antwort zu diesem Thema eine eMail erhalten