[Hilfe/Tipps gesucht] Unfertige Webseite

SyrinxX · 26.01.2009

Salü,

ich bin gerade eine Webseite am aufbauen und suche jemand der lust und zeit hat sich meine Arbeit mal anzuschauen und zu sagen ob ich auf dem richtigen weg bin.
Die Webseite ist meine erste Arbeit mit Div und css.

Wäre sehr dankbar wenn sich jemand bereit erklären würde sich das mal anzuschauen.

Die Seite:

Der Code:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" >
<title>Raiddatenbank</title>

<style type="text/css">
<!--

div#header {
    width:98%;
    height:180px;
    margin:0px 10px;
}

div#head_left {
    background-image:url(./images/RDBLogo.png);
    width:500px;
    height:180px;
    float:left;
}

div#head_middle {
    background-image:url(./images/RDBLogo_mid.png);
    height:180px;
}

div#head_right {
    background-image:url(./images/RDBLogo_right.png);
    width:67px;
    height:180px;
    float:right;
}

div#menue {
    width:172px;
    height:505px;
    margin:185px 10px;
}

div#menue_img {
    background-image:url(./images/menue.jpg);
    width:172px;
    height:505px;
    float:left;
}

div#links {
    width:172px;
    height:163px;
    margin:695px 10px;
}

div#links_img {
    background-image:url(./images/links.png);
    width:172px;
    height:163px;
    float:left;
}

div#abup {
    width:172px;
    height:163px;
    margin:713px 24px;
}

div#abup_img {
    background-image:url(./images/abdeckungoben.png);
    width:144px;
    height:23px;
    float:left;
}

div#abdown {
    width:172px;
    height:163px;
    margin:800px 24px;
}

div#abdown_img {
    background-image:url(./images/abdeckungunten.png);
    width:144px;
    height:23px;
    float:left;
}

div#login {
    margin:0px 10px;
    font: 12px tahoma,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    white-space: nowrap;
    float:right;
}

div#login_text {
    color: #ffcc00;
    font: 12px tahoma,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    white-space: nowrap;
}

div#text {
    color: #ffcc00;
    font: 10px tahoma,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    white-space: nowrap;
}

div.menu_control a {
    color: #ffcc00;
    font: bold 12px tahoma,verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
    white-space: nowrap;
}

div.menu_control a:link, .menu_control_alink {
    color: #ffcc00;
    text-decoration: none;
}

div.menu_control a:visited, .menu_control_avisited {
    color: #ffcc00;
    text-decoration: none;
}

div.menu_control a:hover, .menu_control a:active, .menu_control_ahover {
    color: #999999;
    text-decoration: none;
}

form
{
    display: inline;
}

-->
</style>
</head>

<body bgcolor="#2F2F2F">
<script type="text/javascript" src="http://www.sponsorads.de/script.php?s=53600"></script>

<div id="header" style="position:fixed;">
<div id="head_left"></div>
<div id="head_right"></div>
<div id="head_middle">
<div style="position:absolute; right:50px; top:30px;"><?php include("counter.php");
?></div>
<div style="position:absolute; right:50px; top:50px;"><?php include("user.php");
?></div>
<form action="login.php" method="post">
<div id="login_text" style="position:absolute; right:300px; top:82px;">Benutzername</div>
<div id="login_text" style="position:absolute; right:300px; top:108px;">Kennwort</div>
<div style="position:absolute; right:200px; top:80px;"><input type="text" style="background-color:#ffcc00" "font-size: 9px" size="10" accesskey="u" tabindex="101" value="Benutzername" onfocus="if (this.value == 'Benutzername') this.value = '';" /></div>
<div style="position:absolute; right:200px; top:105px;"><input type="password" style="background-color:#ffcc00" "font-size: 9px" size="10" tabindex="102" /></div>
<div id="login_text" style="position:absolute; right:50px; top:80px;"><input type="checkbox" name="cookieuser" value="1" tabindex="103" id="cb_cookieuser_navbar" accesskey="c" />Angemeldet bleiben?</div>
<div style="position:absolute; right:100px; top:105px;"><input type="submit" class="button" value="Anmelden" tabindex="104" title="Gib zur Anmeldung deinen Benutzernamen und dein Kennwort in die dafür vorgesehenen Textfelder ein oder klicke auf die 'Registrieren'-Schaltfläche, um ein neues Benutzerkonto anzulegen." accesskey="s" /></div>
</form>
</div>
</div>

<div id="menue" style="position:fixed;">
<div id="menue_img"></div>
<div class="menu_control" style="position:relative; left:40px; top:-460px;"><a href="http://www">Registrieren</a><br /><br /><a href="http://www">Login</a><br /><br /><a href="http://www">GWars</a><br /><br /><a href="http://www">Space Pioneers</a><br /><br /><a href="http://www">oGame</a>
</div>
</div>

<div id="links" style="position:fixed;">
<div id="links_img"></div>
</div>

<div style="position:fixed; left: 37px; top: 721px; height: 23px; width: 135px;">
    <div id="text" align="center">
        <marquee direction="up" scrollamount="2" loop="true" height="110" >
Links Dynamisch<br />per Variable &uuml;bergeben<br /><br />Hier l&auml;uft der Text<br />von unten nach oben.
        </marquee>
    </div>
</div>

<div id="abup" style="position:fixed;">
    <div id="abup_img"></div>
</div>

<div id="abdown" style="position:fixed;">
    <div id="abdown_img"></div>
</div>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-2220876-2";
urchinTracker();
</script>
</body>
</html>

Gruß Indy

sokie · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

absolute und fixe positionierungen führen bei deiner Seite dazu, dass sie bei kleineren Bildschirmauflösungen nicht mehr zu benutzen ist, weil sie sich ja nun auch nicht scrollen lässt. (darüber hinaus wird "fixed" erst ab IE7 unterstützt).
Das Prinzip der Trennung von Inhalt und Design, welches durch CSS eigentlich gegeben ist hast Du auf der Seite durch exessiven Gebrauch von inlinestyles (style="...") gründlich verworfen.
der Code macht den Eindruck als wäre da veraltetes Tabellenlayout 1:1 durch div-missbrauch ersetzt worden.

ich bin gerade eine am aufbauen und suche jemand der lust und zeit hat sich meine Arbeit mal anzuschauen und zu sagen ob ich auf dem richtigen weg bin.
Die Webseite ist meine erste Arbeit mit Div und css.

das liest sich für mich, als hättest du dich hingesetzt und nach der Planung der Seite diese mit div und css aufgebaut.
ich habe schwierigkeiten mir vorzustellen, dass jemand so einen Code freiwillig so zusammenschreibt. Eher scheint es als sei da eine Software dafür verantworlich.

SyrinxX · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

sokie schrieb:
absolute und fixe positionierungen führen bei deiner Seite dazu, dass sie bei kleineren Bildschirmauflösungen nicht mehr zu benutzen ist, weil sie sich ja nun auch nicht scrollen lässt. (darüber hinaus wird "fixed" erst ab IE7 unterstützt).
Das Prinzip der Trennung von Inhalt und Design, welches durch CSS eigentlich gegeben ist hast Du auf der Seite durch exessiven Gebrauch von inlinestyles (style="...") gründlich verworfen.
der Code macht den Eindruck als wäre da veraltetes Tabellenlayout 1:1 durch div-missbrauch ersetzt worden.

Deswegen frag ich ja hier ob mir jemand hilft bzw. Tipps gibt...
fixed soll eigendlich nur der Header und der linke bereich sein, also bei scrollen stehenbleiben.

sokie schrieb:
das liest sich für mich, als hättest du dich hingesetzt und nach der Planung der Seite diese mit div und css aufgebaut.
ich habe schwierigkeiten mir vorzustellen, dass jemand so einen Code freiwillig so zusammenschreibt. Eher scheint es als sei da eine Software dafür verantworlich.

Nee, das hab ich wirklich von hand gemacht.
Da es für mich die erste Webseite ist hab ich keine ahnung ob jemand der sich damit auskennt das nie freiwillig machen würde.

Ich hab glaub ich dieses gefährliche halbwissen, oder doch nixwissen?

microwar · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

Also für mich sieht das Ganze schon recht positiv aus,
ich würde versuchen, noch mehr Anweisungen aus dem <body> in die Stylesheets einzulagern (in die entsprechenden <div> container).
Der Bereich links unten macht wohl noch Probleme.
Wahrscheinlich wirst Du die ganzen Stylesheets in eine externe CSS Datei verschieben?
Explizite Veresserungen kann ich Dir leider nicht bieten, aber auf dem richtigen Weg bist Du auf jeden Fall

cebito · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

Hab grad nicht soviel Zeit, aber; beschäftige dich mal mit Mindestbreiten,
sonst siehts irgendwann so aus:

Kann mich sonst sokie nur anschließen, und: schau dir mal dein Design
im IE6 an, du wirst überrascht sein, hab jetzt keinen Screenshot, denn
da hätt ich ca 5-6 gebraucht... :rolleyes:

SyrinxX · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

cebito schrieb:
Hab grad nicht soviel Zeit, aber; beschäftige dich mal mit Mindestbreiten,
sonst siehts irgendwann so aus:

Kann mich sonst sokie nur anschließen, und: schau dir mal dein Design
im IE6 an, du wirst überrascht sein, hab jetzt keinen Screenshot, denn
da hätt ich ca 5-6 gebraucht...

Ich hab den Header jetzt anders gemacht...
Jetzt springt die rechte Grafik nicht mehr nach unten.

Der Code:

Code:

div#header {
    background-image: url(./images/RDBLogo_mid.png);
    background-repeat: repeat-x;
    background-color: #2F2F2F;
    position:relative;
    height: 180px;
    margin: 10px;
}

div#header_left {
    background-image: url(./images/RDBLogo.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 500px;
    height: 180px;
}

div#header_right {
    background-image: url(./images/RDBLogo_right.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 67px;
    height: 180px;
}

...............

<div id="header">
<div id="header_left"></div>
<div id="header_right"></div>
</div>

Wie gesagt, jetzt bleibt die rechte Grafik oben, nur jetzt kommt die linke irgendwann rechts zum vorschein wenn man den Browser ganz schmal schiebt.
Ist das normal?
Ich denke mal ja weil die linke Grafik halt irgendwann breiter als der Browserbereich ist.
Denke ich da richtig?

Gruß Indy

sokie · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

Das finde ich das kleinste Problem. Niemand wird auf die Idee kommen sein Browserfenster kleiner als 400px zu schieben, wenn er darin mit einer Webseite arbeiten will.
kritischer ist die Tatsache, dass die Seite kleineren Auflösungen unbrauchbar wird, weil sie sich in der Höhe nicht scrollen lässt. (Grund: position fixed)
Ansicht im Browser bei 1024x768
Ansicht imIE6 (Grund: fixed wird nicht unterstützt)

zu den inlinestyles:
Du hast nun eigentlich für jedes Element Bezeichner (IDs etc.) hier sollten auch die formatierungen über den CSS Bereich (besser CSS Datei) erfolgen, und nicht am Element selbst. Das würde zum einen den Quelltext übersichtlicher machen, zum anderen wäre die ganze Optik über eine Datei steuerbar, zum dritten wäre natürlich die html-Datei um einige kb leichter.

SyrinxX · 26.01.2009

AW: [Hilfe/Tipps gesucht] Unfertige Webseite

sokie schrieb:
Das finde ich das kleinste Problem. Niemand wird auf die Idee kommen sein Browserfenster kleiner als 400px zu schieben, wenn er darin mit einer Webseite arbeiten will.

Ich wollte es nur anmerken ;-)

sokie schrieb:
kritischer ist die Tatsache, dass die Seite kleineren Auflösungen unbrauchbar wird, weil sie sich in der Höhe nicht scrollen lässt. (Grund: position fixed)

Habe jetzt alle "position fixed" entfernt.
Trotzdem bleibt das Scrollproblem bestehen.

sokie schrieb:
zu den inlinestyles:
Du hast nun eigentlich für jedes Element Bezeichner (IDs etc.) hier sollten auch die formatierungen über den CSS Bereich (besser CSS Datei) erfolgen, und nicht am Element selbst. Das würde zum einen den Quelltext übersichtlicher machen, zum anderen wäre die ganze Optik über eine Datei steuerbar, zum dritten wäre natürlich die html-Datei um einige kb leichter.

Ich hab nur der einfachheit halber beim erstellen der Seite alles in einer Datei, nach abschluß soll es natürlich getrennt sein.

Ich hab jetzt überall mal rahmen drumrum gemacht zur besseren orientierung.

Aber irgendwie will es nicht so wie ich will :-(

Nochmal der Code:

Code:

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

div#header {
    border: solid;
    background-image: url(./images/RDBLogo_mid.png);
    background-repeat: repeat-x;
    background-color: #2F2F2F;
    position: relative;
    height: 180px;
    margin: 10px;
}

div#header_left {
    border: solid;
    background-image: url(./images/RDBLogo.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 500px;
    height: 180px;
}

div#header_right {
    border: solid;
    background-image: url(./images/RDBLogo_right.png);
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    width: 67px;
    height: 180px;
}

div#menue {
    border: solid;
    background-image: url(./images/menue.png);
    background-color: #2F2F2F;
    background-repeat: no-repeat;
    position: relative;
    height: 300px;
    width:172px;
    margin-top: 10px;
    margin-left: 10px;
}

div#links {
    border: solid;
    background-image:url(./images/links.png);
    background-color: #2F2F2F;
    position: absolute;
    height:163px;
    width:172px;
    margin-left: 10px;
}

div#content {
    border: solid;
    padding: 1em 1em 2.5em 1em;
} 

div#wrapper {
    border: solid;
    position: relative;
    height: auto !important;
    min-height: 100%;
    background: #2F2F2F;
}

div#footer {
    border: solid;
    position: absolute;
    bottom: 10px;
    height: 163px;
    width: 100%;
    background: #2F2F2F;
}

----------------------

<div id="wrapper">

<div id="header">
<div id="header_left"></div><!--Ende header_links-->
<div id="header_right"></div><!--Ende header_rechts-->
</div><!--Ende header-->

<div id="menue">
</div><!--Ende menue-->

<div id="content">
test
</div><!--Ende content-->

<div id="footer">
<div id="links">
</div><!--Ende links-->
</div><!--Ende footer-->

</div><!--Ende wrapper-->

Gruß Indy