Page-Design fertig ... Fragen an euch [Archiv]

Archiv verlassen und diese Seite im Standarddesign anzeigen : Page-Design fertig ... Fragen an euch

Mike1

2006-10-19, 19:35:31

aaaallssooo
erstmal vielen Dank fürs Helfen im Voraus;)

hab das Design von der Page http://mikethehpmaker.mi.funpic.de/HTML/index.htm
soweit fertig, nun gibts ein paar Fragen an euch:
1. Verbesserungsvorschläge anyone?

2. die Site wird in IE nicht ganz korrekt angezeigt:
FF: http://666kb.com/i/aiiegprz9tv8ds4qa.jpg
IE: http://666kb.com/i/aiiegv7icx6d98agi.jpg
2.1 irgendne Idee warum er das CSS in der Navi ned ganz akzeptiert bzw. wie er´s akzeptieren würde?

<html>
<head>
<title>Leftframe</title>
<meta name="author" content="Michael Kiesenhofer">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
body {
background-color:#eaeaea;
}

#box1 { left:3pt; top:-1pt; width:142.5pt; height:265.5pt; position:absolute; }

#box2 { line-height:19pt; font-size:11pt; font-weight: bold; font-family:Arial,sans-serif; position:absolute; top:5pt; left:9pt; width:130pt; height:220pt; z-index:2; }
#box2 > span { line-height:13pt; }
#box2 > a:link { color:black; text-decoration:none; }
#box2 > a:visited { color:black; text-decoration:none; }
#box2 > a:hover { color:#8caae7; text-decoration:none; }
#box2 > a:active { color:black; text-decoration:none; }

#box2 > span > a:link { color:black; text-decoration:none; }
#box2 > span > a:visited { color:black; text-decoration:none; }
#box2 > span > a:hover { color:#8caae7; text-decoration:none; }
#box2 > span > a:active { color:black; text-decoration:none; }

#box3 { left:149pt; top:0pt; width:1pt; height:700pt; position:absolute; }

#box4 { left:0pt; top:270pt; width:150pt; height:265.5pt; position:absolute; text-align:center; vertical-align:middle; font-size: 9pt}

#box5 { left:0pt; top:80pt; width:150pt; height:265.5pt; position:absolute;}

</style>

</head>
<body>


<div id="box5">
<SCRIPT LANGUAGE="JavaScript1.2">
var bestwidth = 1279;
var bestheight = 959;
if (screen.width > bestwidth || screen.height > bestheight) {
document.write('<img src="img/school_background_leftframe.jpg">');
}
</script>
</div>

<div id="box1">
<img src="img/background_leftframe.png"> 
</div>

<div id="box2"> 
<img src="img/bluefield.jpg">
<br>
<a href="mainframe.htm" target="mainframe">Home</a>
<br>
<a href="news.htm" target="mainframe">News</a>
<br>
<a href="verschiedenes.htm" target="mainframe">Verschiedenes</a>
<br>
<a href="anmeldung.htm" target="mainframe">Anmeldung</a>
<br>
<a href="ueber_die_schule.htm" target="mainframe">Über die Schule</a>
<br>
<span>
<a href="infos_material_fuer_schueler_lehrer.htm" target="mainframe">Infos und Material- <br> für Schüler/Lehrer</a>
<br>
<br>
</span>
<img src="img/bluefield.jpg">
<br>
<a href="rechtliches.htm" target="mainframe">Rechtliches</a>
<br>
<a href="kontakte.htm" target="mainframe">Kontakte</a>
</div>

<div id="box3">
<img src="img/border_vertikal.jpg"> 
</div>

<div id="box4" class="Stil1"> 
<u>Höhere technische Bundeslehranstalt</u>
<br>
<u>Wien 3, Rennweg 89b, 1030 Wien</u>
<br>
Tel: +43 1 242 15-10, Fax:+43 1 242 15-4212
<br>
<a href="e_mail.htm" target="mainframe">E-Mail</a>
</div>

</body>
</html>

2.2 warum akzeptiert er das noresize in meinem böööhsen Frameset ned?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>HTBLA Rennweg</title>
</head>

<frameset cols="800,*" scrolling="yes" frameborder="0" framespacing="0" border="0" noresize="noresize">

<frameset rows="158,*" cols="*">
<frame src="topframe.htm" name="topframe" scrolling="no">');

<frameset cols="200,*">
<frame src="leftframe.htm" name="leftframe" scrolling="no">
<frame src="mainframe.htm" name="mainframe">
</frameset>
</frameset>
<frame src="border.htm" name="border" scrolling="no">
</frameset>

<noframes>
<body>
<h1>Frameset konnte nicht Angezeigt werden!</h1>
<p>Wahrscheinlich nutzen sie einen komplett veralteten Browser oder ich hab mal wieder Mist gebaut ;-)</p>
</body>
</noframes>
</html>

2.3 irgende (einfache)Möglichkeit .pngs zum Laufen zu bringen?
2.4 warum wird der rechte Teil vom Hintergrund in der extra dafür gemachten Frame ned angezeigt?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Border_Empty</title>

<style type="text/css">

<div id="box2">

<SCRIPT LANGUAGE="JavaScript1.2">
var bestwidth = 1279;
var bestheight = 950;
if (screen.width > bestwidth || screen.height > bestheight) {
document.write('<img src="img/school_background_border.jpg">');
}
</script>

</div>

<div id="box1">
<img src="img/border_vertikal.jpg"> 
</div>

</body>
</html>

2.5 ICH HASSE M$:P die zwingen mich dadurch das sie sich ned an die Regeln halten können dazu euch diesen elendiglich langen Code+mein Gelabber aufzuhalsen

Hawky

2006-10-19, 22:49:39

Hi,

also dann wollen wir mal Kritik üben ;)

Design:
nicht mein Fall hätte man schöner machen können, aber es erfüllt seinen zweck von daher egal.

Code:

1) Mach externe CSS-Files, dass ist "schöner"
2) Menü als Liste anlegen
3) Finger weg von Frames!!! Das is übel, auf der einen Seite nimmst du div's und CSS und auf der anderen Seite machst du mit Frames rum...
4) Abstände (width,height,top...) nur in "px" oder in "em" aber nicht in "pt"! Was sind das für Werte? top:123.9pt.... sowas macht man nicht!

Jetzt zu deinem NaviProblem..

IE kann damit scheinbar nicht:

#box2 > a:link { color:black; text-decoration:none; }
#box2 > a:visited { color:black; text-decoration:none; }
#box2 > a:hover { color:#8caae7; text-decoration:none; }
#box2 > a:active { color:black; text-decoration:none; }

Ich lös das einfach so, meine Links haben ne CLASS dann machste einfach:

.CLASS { color:black; text-decoration:none; }
a.CLASS { color:black; text-decoration:none; }
a.CLASS:hover {color:#8caae7; text-decoration:none;}

Das langt du musst kein active, link, visited benutzen, man kann das zwar tun muss aber nicht.

Gruß
Hawky

Nase

2006-10-20, 02:05:28

IE kann damit scheinbar nicht:

#box2 > a:link { color:black; text-decoration:none; }
#box2 > a:visited { color:black; text-decoration:none; }
#box2 > a:hover { color:#8caae7; text-decoration:none; }
#box2 > a:active { color:black; text-decoration:none; }

Ich lös das einfach so, meine Links haben ne CLASS dann machste einfach:

.CLASS { color:black; text-decoration:none; }
a.CLASS { color:black; text-decoration:none; }
a.CLASS:hover {color:#8caae7; text-decoration:none;}

Das langt du musst kein active, link, visited benutzen, man kann das zwar tun muss aber nicht.Oder du nimmst einfach die > raus, denn ich seh da gerade keinen Sinn drin. Außerdem ist es immer empfehlenswert, sowohl :link, :visited als auch :hover anzugeben, da es sonst zu unerwünschten Ergebnissen kommen kann. Die richtige Reihenfolge der Angaben sollte auch beachtet werden.

Unfug

2006-10-20, 11:14:46

Normalerweise bin ich auch ein Freund des iframe.
Doch finde ich, daß es diesmal nicht wirklich passt.

Du hast ja eine "Feste Höhe" des Iframes und dann sieht einiges (wo ganz wenig Text drin ist) nicht so dolle aus.

Bis auf diesen kleinen Designausrutscher finde ich die Seite sehr gelungen.
Konservativ aber informell und das wichtigste : Schnell navigierbar

Gruß

darph

2006-10-20, 16:15:32

2.5 ICH HASSE M$:P die zwingen mich dadurch das sie sich ned an die Regeln halten können dazu euch diesen elendiglich langen Code+mein Gelabber aufzuhalsenDu hast ja noch nichteinmal einen ordentlichen Doctype angegeben. Du verwendest Inhalte, die als deprecated bezeichnet wurden. Wenn er IE schon raten muß, dann darfst du dich nicht wundern, wenn es nicht so aussieht, wie du es haben willst. ;(

Iframes sind Teil der "Transitional"-Spezifikation. Transitional heißt "übergangsweise (http://dict.leo.org/?lp=ende&lang=de&searchloc=0&cmptype=relaxed&relink=on&secthdr=on&spelltoler=std&search=transitional)" - das existiert, um bestehende Webseiten valide zu gestalten, ohne alles neu machen zu müssen. Es ist nicht dazu da, neue Webseiten mit alten und eigentlich ungültigen Elementen erstellen zu können. Das bezieht sich im Übrigen nicht nur auf Frames, sondern eben auch auf sowas: <font face="Arial, Helvetica, sans-serif">

klick mich sanft Was hat das auf einer professionellen Website zu suchen?

Wahrscheinlich nutzen sie einen komplett veralteten Browser oder ich hab mal wieder Mist gebaut ;-)Du weißt schon, daß genau dieser Text als Beschreibung zur Seite in Google auftauchen wird? Sehr professionell (y)

Es thut mir Leid, aber sowas kannst du nicht verkaufen.

Mike1

2006-10-20, 16:46:42

Du hast ja noch nichteinmal einen ordentlichen Doctype angegeben. Du verwendest Inhalte, die als deprecated bezeichnet wurden. Wenn er IE schon raten muß, dann darfst du dich nicht wundern, wenn es nicht so aussieht, wie du es haben willst. ;(

Iframes sind Teil der "Transitional"-Spezifikation. Transitional heißt "übergangsweise (http://dict.leo.org/?lp=ende&lang=de&searchloc=0&cmptype=relaxed&relink=on&secthdr=on&spelltoler=std&search=transitional)" - das existiert, um bestehende Webseiten valide zu gestalten, ohne alles neu machen zu müssen. Es ist nicht dazu da, neue Webseiten mit alten und eigentlich ungültigen Elementen erstellen zu können. Das bezieht sich im Übrigen nicht nur auf Frames, sondern eben auch auf sowas: <font face="Arial, Helvetica, sans-serif">

Was hat das auf einer professionellen Website zu suchen?

Du weißt schon, daß genau dieser Text als Beschreibung zur Seite in Google auftauchen wird? Sehr professionell (y)

Es thut mir Leid, aber sowas kannst du nicht verkaufen.
ich verkauf so Schrott ja ned...:rolleyes:
ich werds der lieben Schule höchstens schenken wenn der Direx Apetitt auf ne neue Site hat....(und da hatte ich halt vor ihm mal am Sonntag oder so ne Mail zu schreiben und ihn zu fragen was er davon hält, wenn er nix davon hält find ich das zwar traurig(ich verweise immer wieder gern auf: www.htl.rennweg.at ) aber es is mir ziehmlich egal, da ich die Site eigentlich auf der Suche nach ner Webdesign Aufgabe begonnen hab...)
aber ich besseres trotzdem raus:D

Thx@Hawky mit CLASS funzt es=)

Code:

1) Mach externe CSS-Files, dass ist "schöner"
2) Menü als Liste anlegen
3) Finger weg von Frames!!! Das is übel, auf der einen Seite nimmst du div's und CSS und auf der anderen Seite machst du mit Frames rum...
4) Abstände (width,height,top...) nur in "px" oder in "em" aber nicht in "pt"! Was sind das für Werte? top:123.9pt.... sowas macht man nicht!

zu 1.: naja, ich find interne praktischer:wink:
zu 2.: welches Menü und was meinst du mit "Liste" in diesem Fall?:redface:
zu 3.: hab zuerst eh nach einfachen Alternativen gesucht(hab auch hier nen Thread aufgemacht), wurde aber ned fündig, CMS hab ich ja probiert aber um meine Vorstellungen zu verwirklichen hät ich wohl flüssig PHP sprechen müssen, und das kann ich ned:redface: (und hab im Moment auch keine Zeit es ordentlich zu lernen)
und die Frames waren nur ein bisschen umständlich aber sonst bin ich ganz zufrieden damit=)
zu 4.: was is an pt so böhse? also da steht nix böhses darüber:| : http://de.selfhtml.org/css/formate/wertzuweisung.htm

WerWolf

2006-10-21, 15:04:08

zu 1) So kannst du auf mehreren Seiten die gleiche .css benutzen und sparst dem Nutzer ladezeit (auch wenn nur minimal).

zu 2) <ul><li>menüpunkt1</li><li>menüpubkt2</li></ul>, es ist ja eine auflistung - lässt sich auch mit CSS formatieren, z.B. inline und ohne Bullet

zu 3) Deine Reihenfolge ist schon die Richtige - erst statische Seiten, dann irgentwann dynamisch - So wird's was :)

zu 4) Die Masseinheit im Web ist Pixel, wenn du pt benutzt muss der Browser das erst in px umrechnen und ich kann mir gut vorstellen, dass das nicht alle Browser immer genau gleich machen - ausserdem hast du selber einen besseren Überblick über die Abmessungen und Abstände.

Mach weiter, sieht sonst ganz gut aus!

Hawky

2006-10-21, 16:59:11

@WerWolf

Danke, besser hätte ichs nicht ausdrücken können!

@Topic
Joomla ist zu empfehlen, nicht nur für Fortgeschrittene, sonder auch für Anfänger, allerdings, sollte man statisches Webdesign beherrschen bevor man ein CMS benutzt, weil dann lernt mans nicht!