Design Fehler

Unregistriert

Hallo habe seit wochen ein Problem mit meiner Seite, das Webspell Forum konnte mir nicht helfen.
Vielleicht weiss einer von euch ja was da nicht passt.

Also schaut euch mal diese Seite an:
http://www.rop-clan.de/index.php?site=members

Dort kann man sehen das der Rahmen oben nicht abschließt (im Hauptbereich)
Habe alles mögliche Probiert aber finde keine Lösung.
In Dreamweaver zeigt er alles ordnungsgemäß an nur online nicht

Hier mal der Code der index.php:

<?php
/*
##########################################################################
# #
# Version 4 / / / #
# -----------__---/__---__------__----__---/---/- #
# | /| / /___) / ) (_ ` / ) /___) / / #
# _|/_|/__(___ _(___/_(__)___/___/_(___ _/___/___ #
# Free Content / Management System #
# / #
# #
# #
# Copyright 2005-2010 by webspell.org #
# #
# visit webSPELL.org, webspell.info to get webSPELL for free #
# - Script runs under the GNU GENERAL PUBLIC LICENSE #
# - It's NOT allowed to remove this copyright-tag #
# -- http://www.fsf.org/licensing/licenses/gpl.html #
# #
# Code based on WebSPELL Clanpackage (Michael Gruber - webspell.at), #
# Far Development by Development Team - webspell.org #
# #
# visit webspell.org #
# #
##########################################################################
*/

// important data include
include("_mysql.php");
include("_settings.php");
include("_functions.php");

$_language->read_module('index');
$index_language = $_language->module;
// end important data include
?>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="copyright" content="Copyright © 2010 by gamer-designs.de cms by webspell.org" />
<meta name="description" content="free webSPELL Clantemplate by gamer-designs.de" />

<title><? echo PAGETITLE; ?></title>
<link href="_stylesheet.css" rel="stylesheet" type="text/css" />
<script src="js/bbcode.js" language="jscript" type="text/javascript"></script>
<script type="text/javascript" src="js/crawler.js">
/*
Text and/or Image Crawler Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/ username: jscheuer1
This Notice Must Remain for Legal Use
*/
</script>
</head>

<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/slide.css" type="text/css" media="screen" />






<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/slide.js" type="text/javascript"></script>

<div id="toppanel">
<div id="panel">
<div class="content clearfix">
<div class="left">
<h3>Login Bereich</h3>
</div>
<div class="left">
<?php if(!$userID) {
$_SESSION['ws_sessiontest'] = true;
?>
<form method="post" name="login" action="checklogin.php">
<h3>Member Login</h3>
<label class="grey" for="log">Username:</label>
<input name="ws_user" type="text" size="23" value="Username" onfocus="this.value=''" />
<label class="grey" for="pwd">Password:</label>
<input name="pwd" type="password" size="23" value="Password" onfocus="this.value=''" />
<div class="clear"></div>
<input type="submit" name="submit" class="btn" title="Login now." alt="login" />
<a class="lost-pwd" href="index.php?site=lostpassword">Lost your password?</a>
</form>
<?php
} else include ('login.php'); ?>
</div>
<div class="left right">

<?php if(!$userID) {
?>
<form method="post" name="register" action="index.php?site=register">
<h3>Sign Up!</h3>
<label class="grey" for="signup">Username:</label>
<input type="text" name="nickname" value="Nickname" maxlength="30" />
<label class="grey" for="email">Email:</label>
<input type="text" name="mail" value="Mail" />
<input type="hidden" name="saveregister" value="1" />
<input type="submit" class="btn" alt="Create Account." />
</form>
<?php
} else include ('counter.php'); ?>
</div>
</div>
</div>

XantypiaxD

Sieht nach einem typischen (margin) Fehler aus.
Irgendein Element hat einen bestimmten margin-Wert, der das Element nach unten "zieht".

Weise dem Universalselektor (*) mal "margin:0;" und "padding:0;" zu

Unregistriert

was meinst du mit universalsektor??

XantypiaxD

Du schreibst in deine css-Datei folgendes:

PHP

* {
margin:0;
padding:0;
}

Das heißt, für alle Elemente z.B. p, h1, h2, h3, h4, ... wird margin und padding, 0 gesetzt.

Unregistriert

ja habs gemacht. Leider immernoch nicht ich schick dir mal meine Stylesheets:

/* Main Layout */

* {
margin:0;
padding:0;
}

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
margin: 0px;
background-color:#455272;
}

table {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #2a2a2a;
}

a.navi, a.navi:visited, a.navi:active {
font-family: Tahoma;
font-size: 11px;
font-weight: bold;
color: #6a6a6a;
text-decoration: none;

}
a.navi:hover {
color: #4D4C4C;
font-weight: bold;
text-decoration: underline;
}

a.footer, a.footer:visited, a.footer:active {
font-family: Tahoma;
font-size: 10px;
font-weight: bold;
color: #ffffff;
text-decoration: none;

}
a.footer:hover {
color: #ffffff;
font-weight: bold;
text-decoration: underline;
}

img { border: none; }

hr {
color: #666666;
background-color: #666666;
border: 0px;
border-top: transparent;
border-bottom: transparent;
margin: 2px 0;
height: 1px;
}

/* Links */
a, a:visited, a:active {
color: #000000;
text-decoration: none;
font-weight: normal;
}

a:hover {
color: #ff6000;
text-decoration: none;
font-weight: normal;
}

a.titlelink, a.titlelink:visited, a.titlelink:active {
color: #FFFFFF;
text-decoration: none;
font-weight: bold;
}

a.titlelink:hover {
color: #FFFFFF;
text-decoration: underline;
font-weight: bold;
}

a.category, a.category:visited, a.category:active {
color: #333333;
text-decoration: none;
}

a.category:hover {
color: #000000;
text-decoration: underline;
}

/* Font types */
h2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-transform: uppercase;
font-weight: bold;
}

small {
color: #383838;
font: normal 9px Verdana, Arial, Helvetica, sans-serif;
}

.title {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
font-weight: bold;
background-color: #455272;
}

.category_big, .category_big a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
font-weight: bold;
}

.category {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
font-weight: normal;
}

/* Forms */
form {
border: none;
margin: 0px;
padding: 0px;
}

input, textarea, select {
border: 1px solid #989898;
background-color: #F0F0F0;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
color: #666666;
}

input:active, textarea:active, select:active, input:focus, textarea:focus, select:focus {
border: 1px solid #CCCCCC;
background-color: #F6F6F6;
color: #2C2C2C;
}

input[type='radio'], input[type='checkbox'],
input[type='radio']:focus, input[type='radio']:active,
input[type='checkbox']:focus, input[type='checkbox']:active {
border: 0px;
}

.input {
background-color: transparent;
border: none;
margin: 2px;
}

/* Infomessages - Miscellaneous */
.tooltip {
position: absolute;
display: none;
background-color: #FFFFFF;
color: #000000;
border: 1px solid #DDDDDD;
border-left: 4px solid #0E8AEA;
padding: 4px 10px;
z-index: 100;
}

.errorbox {
background-color: #FFCCCC;
border: 1px dashed #D60000;
color: #666666;
font-size: 10px;
width: 350px;
padding: 8px;
margin-top: 10px;
margin-bottom: 10px;
text-align: left;
}

/* BBCode Tags */
.quote {
color: #383838;
text-align: left;
font: normal 9px Verdana, Arial, Helvetica, sans-serif;
margin: 0 auto;
padding: 3px;
}

.list {
padding-left:0;
margin-left:0;
list-style-type: disc;
list-style-position:inside;
}

.list_num {
padding-left:0;
margin-left:0;
list-style-type: decimal;
list-style-position:inside;
}

.list_alpha {
padding-left:0;
margin-left:0;
list-style-type: lower-latin;
list-style-position:inside;
}

.code {
color: #000000;
text-align: left;
margin: 0 auto;
padding: 3px;
font: normal 10px Verdana, Arial, Helvetica, sans-serif;
}

.codeinner {
color: #000000;
font: 11px 'Courier New', Courier, monospace;
}

.codeline0 {
background-color: #F3F3F3;
height: 15px;
padding-left: 3px;
white-space: nowrap;
}

.codeline1 {
background-color: #FFFFFF;
height: 15px;
padding-left: 3px;
white-space: nowrap;
}

threadi

Welcher Abschluss fehlt da? Ich kann auf den ersten Blick keinen gravierenden Fehler entdecken? Kannst Du evtl. zeigen wie es aussehen sollte?

Unabhängig davon solltest Du mal den HTML-Code korrigieren - insbesondere das fehlende <body> muss noch ergänzt werden:
http://validator.w3.org/check?verbose=…Fsite%3Dmembers

Unregistriert

Ja sicher kann ich dir Zeigen worum es geht:
http://www.rop-clan.de/images/Fehlerbilder/fehler1.jpg

Dort siehst du genau was der Fehler ist.
hab deinen Link angeklickt die Fehler die er da anzeigt sind meist nicht zu korrigieren da er alles zusammenfügt.

threadi

Wer ist "er"? Wenn "er" so einen miesen Code erzeugt, solltest Du "ihn" wechseln. Damit wirst Du nicht glücklich da es immer wieder zu Problemen kommt.

Zudem besteht deine Seite nur aus Tabellen. Tabellen sind für tabellarische Daten gedacht, nicht zur Gestaltung. Und das ist auch das Problem was Du momentan hast. Die Stelle wo die Lücke ist, kann man auf Grund des Tabellenmischmaschs nicht genauer steuern.

Mein Tipp: neu machen. Sorry.

Unregistriert

Und wie soll ich das Design dann bitte machen?

synaptic

mit DIVs und CSS, so wie man jede website macht..

The User

Wobei man mir noch erklären muss, in wie fern es eine Trennung von Inhalt und Design gibt, wenn es so Dinger mit dem inhaltsvollen Namen <div> gibt, die in bestimmten Schachtelungen und Reihenfolgen auf der Seite stehen müssen, damit das Design passt. Aber Synaptic hat Recht.

threadi

Nein, auch nicht mit "DIVs" sondern mit HTML und CSS. HTML zeichnet die Inhalte semantisch aus, CSS gestaltet sie. Die ominösen "DIVs" verwendet man nur um einzelne Bereiche zu gruppieren, sie sind aber nicht die Grundlage eines Designs.

The User

Die Theorie ist mir klar, aber CSS kriegt es halt nicht hin, das vollständig umzusetzen. Die Gruppierung ist nur zu oft nur für das Design, nicht aber für die Semantik von Bedeutung.. Du kannst nicht beliebigen HTML-Code nehmen und dann beliebig per CSS den stylen, das geht in der Praxis nicht, schon gar nicht, wenn man sich so Sachen wie faux-columns oder vertikale Zentrierung implementiert, kannst mir aber auch nicht erzählen, dass Informationen über die Verteilung von Inhalten auf verschiedene Sidebars o.ä. etwas mit Semantik zu tun hätte, um ein nicht ganz so abgedrehtes Beispiel zu nennen.

synaptic

semantik wird meiner meinung nach überbewertet.
will sagen, wenn ich eine tabellarische darstellung von inhalten brauche, benutze ich eine tabelle und zeichne keine tabellen-ähnliche struktur mit containern nach.
aber ein ganzes layout mit tables umzusetzen ist vollkommen sinnbefreit.
und ich hab bewusst "mit divs und css" geschrieben, weil es nunmal die container sind, mit denen man bereiche (divisions => DIVs) erzeugt und damit auch entsprechend dann via css-angaben layouts realisiert.

hätte ich HTML und CSS geschrieben, wäre der murks den der TE da erstellt bekommen hat natürlich auch mit inbegriffen und die nächste frage wäre gewesen: "häh? das is doch mit html und css oder wie???"
oder lieber threadi, wie setzt du designs um?
nimmste nen gesamtbild als background und schraubst dann mit position:absolute die einzelnen elemente, die keine divs sind drüber?
nen design besteht nunmal aus elementen, die in containern zusammengefasst positioniert und gestyled werden!

threadi

Ich schaue erst nach was das vorliegende Design inhaltlich erfordert und definiere die dafür nötigen Elemente. Da sind noch keine <div>'s und <span>'s dabei. Erst wenn ich die CSS-Datei einbinde und beginne das eigentliche Design aufzubauen, füge ich hier und da ein <div> ein. Z.B. für einen Kopfbereich der mehrere Elemente enthält. Aber dafür gibt es in HTML5 endlich auch <header> (hab ich bisher nur zu testzwecken genutzt, finde ich aber äußert sympatisch). Eine <div>-Suppe wie man sie so oft findet (das Forum ist btw. auch eine) versuche (!) ich ständig zu vermeiden.

Aber um nicht noch weiter vom Thema abzukommen und dem eigentlichen TO zu helfen, sollte man evtl. fragen, ob er mit den bisherigen Tipps zurecht kommt, ob er noch irgendwelche Hinweise für die richtige Umsetzung ohne Tabellen benötigt?!

Unregistriert

Ja aber leider kenne ich mich damit nicht aus. Hab mich da schonmal son bisschen belesen aber ich verstehe nicht wie die div und die css zusammengehören und wie der befehl für die tabellen ist.
hat nicht mal wer ne stunde zeit für mich um mir das mal kurz zu erklären?

The User

Zitat von threadi

Ich schaue erst nach was das vorliegende Design inhaltlich erfordert und definiere die dafür nötigen Elemente.

Witzbold, und das nennst du dann Trennung von Design und Inhalt. Schon wenn du sidebar_left und sidebar_right als divs hast, ist die schöne Trennung egtl. dahin. Richtigi Trennung kannst du nur über serverseitige Templates oder JavaScript oder XSLT hinbekommen, und die letzteren beiden sind ja nicht so ganz das Wahre.

threadi

Als Moderator solche Worte? Verwunderlich.

Mir liegen Designs meist als PSD oder AI vor. Da sind auch schon Beispielinhalte für Überschriften, Absätze, Menüpunkte etc. drinne. Wenn nicht forder ich das als erste Inhalte noch an. Dadurch kann man an einem reinen Designentwurf durchaus erkennen, welche Inhalte wo stehen und wie ausgezeichnet sein müssten. Ein Menü definiere ich dann natürlich auch erstmal als <ul>-Liste, einfach an den Anfang oder ans Ende der HTML-Datei. Und die Texte als Texte. Erst dann kommt wie gesagt die Einteilung mit <div>'s und auch Klassen und IDs. Das hat alles noch rein gar nichts mit irgendwelchen Servereinstellungen oder Funktionen zu tun. Es geht rein um die HTML-Kodierung und CSS-Definition. Nicht um Effekte mittels JavaScript oder dynamische Funktionen mit php. Die kommen erst viel später, wenn es um die eigentliche Integration des fertigen HTML-Codes in eine Webseite geht.

@Unregistriert: ein Tipp wäre http://www.css4you.de - da wird vieles haargenau erläutert.

synaptic

threadi, user... genau für diese diskussion hatte ich den anderen thread ins leben gerufen!!