XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Seite optimieren (http://xhtmlforum.de/showthread.php?t=34617)

Petty 03.03.2005 09:27

Seite optimieren
 
Hallo, ich hab eine Frage, auf die ich jetzt erst beim Layouten gestossen bin.
@hemfrie Wenn der Thread nicht hierher gehört, bitte verschieben, ich weiß nicht, wohin ich den schreiben soll.

Also ich erstelle meine Seiten mit dem Laptop (Auflösung: 1024X768). Wie muss ich jetzt meine Seite optimieren bzw. erstellen, um die ganzen Verhältnisse möglichst optimal anzupassen. Auf einem 17Zoller zu.Bsp. kann ich eine Layoutbreite von 80% einstellen, um diese auch auf Laptops optimal ohne Scrollbalken (horizontal) darstellen/optimieren zu können. Sind Einstellungen mit einer niedrigen Auflösung optimal oder was muss ich schon bei der Erstellung der Seiten beachten, zwecks Größe, Auflösung usw.

Danke im voraus
petty

Boris 03.03.2005 11:00

Du kannst nichts "beachten". Denn eben genau die Monitor und Browsergröße wirst Du weder wirklich herausfinden oder ändern können eines Users.

Du kannst dem User entweder eine variable Webseite anbieten (in %) oder eine mit fest definierter Breite. 768 Pixel Breite sind bei 800x600 gerade noch komplett zu sehen, bei 1024 sieht es noch sehr angenehm aus.

Bei 1280x1024 wäre es rein theoretisch "sehr klein", aber ich kenne kaum einen, der bei einer solch hohen Auflösung mit maximiertem Browserfenster surft.

Optimal wären drei StyleSheets zu Auswahl - für 800er und 1024er Breiten, und eines für 100% Breite. :)

Petty 03.03.2005 11:55

hallo Adagio, danke dir, :)
ich wollte nur vermeiden, dass horizontale Scrollbalken oder kilometerlange erscheinen, beim User.
Die Seite erstelle ich sowieso flexibel. Und bei der Erstellung ist es für mich ein Problem, dass ich keinen großen Monitor habe, um das zu sehen. Aber da finde ich einen Weg.

Das mit den drei unterschiedlichen Stylesheets beträfe aber dann nur die festen Größen richtig??

Irgendwo habe ich mal gelesen, dass eine Webseite auf width: 80% eingerichtet wurde, um die Nutzer von 800x600 Darstellungsgröße zu berücksichtigen - daher meine Frage.

Danke dir
Petty :)

come@death 03.03.2005 21:54

Ich habe schon einige gute Erfahrungen mit flexiblen Layouts gemacht - also Breitenangaben mit em. Damit vergrößert sich die Seite relativ zur Textgröße (ok eigentlich funktioniert em technisch anders, aber es sieht nunmal so aus).

Petty 03.03.2005 22:26

Super, dann schicke ich morgen mal einen Code rum.
Bisher habe ich immer nur versucht, diesen 3px Jog von IE zu verstehen, ohne daran zu denken, dass der Hack dazu nur bei Pixellayout zutrifft.
Dann hab ichs mit float versucht bzw. margin-left usw.

Ich stell den morgen mal rein

Danke dir
Petty

Petty 04.03.2005 15:23

Hallo!! ;)

Hiermal einer meiner mehrfachen Versuche mit flexiblen Layouts. Gebaut hab ich es in Opera. Es ist NUR ein Versuch.

Ich habe mir mehrere Sachen angesehen und versucht umzusetzen, irgendwie habe ich da Probleme, welche Eigenschaften/Werte zwingend zu den einzelnen Varianten dazugehören und wie gesagt, die Frage von oben. Ich hab mal gelesen, dass man beim Bau der Seiten erstmal von eiiner Größe von 600x800 Pixel ausgehen soll - oder ist das schon veraltet.
Bei festen Containergrößen sto´ße ich auf den 3pxJog im Ie, (nehm ich aber nicht wegen der Barrierefreiheit. Bei flexiblen Größen muss ich entweder floaten oder über margin regeln. wenn ich für die Container margins und paddings vereinbare muss ich den Boxmodelbug einbauen??? Das ist so ziemlich alles, was ich darüber weiß. Aber ich lese grade in Css-Praxis nach. Und hab schon einiges gefunden.

Liebe Grüße Petty

Petty 04.03.2005 15:24

Und hier ist der Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Layout1</title>
<style type="text/css" media="screen,projection">
html, body, ul, li {
margin: 0;
padding: 0;
border: 0;
font: 100.01%/1.4 verdana, helvetica, sans-serif;
color: #000;
background: #dedede;
height: 100%;
text-align: center;
}
#header {
margin: 0 auto 0 auto;
padding: 0;
height: 6em;
background: #EDED87;
}
#headnavi ul {
margin: 0;
background-color: #FCD194;
color: White;
float: right;
width: 100%;
}

#headnavi ul li {
display: inline;
}
#headnavi ul li a {
background: blue;
color: #fff;
border: 1px solid white;
}


#zweitnavi {
float: left;
width: 11em;
height: 30em;
background: #EDED87;
}
#inhalt {
margin: 0 0 11em 0;
background: #fff;
height: 30em;
}

</style>
</head>

<body>
<div id="header"></div>
<div id="headnavi">
<ul id="navilist">
<li class="buttonlist">Home
<li class="buttonlist">Kontakt
<li class="buttonlist">Hilfe
<li class="buttonlist">Impressum
[/list]</div>
<div id="zweitnavi"></div>
<div id="inhalt"></div>
<div id="footer"></div>


</div>

</body>
</html>

Ach ja, einheitliche Höhen sind ja so nicht zu erreichen.

LG Petty

Boris 04.03.2005 15:34

600x800 stimmt nicht ganz, eher 800x600 und noch exakter ca. 768 Pixel (da Du die Scrollbar + Fensterleisten noch abziehen musst). ;)

Floaten oder positionieren musst Du meistens, das hat nichts damit zu tun, ob man ein flexibles oder festes Layout bauen will.

Zitat:

Bei festen Containergrößen sto´ße ich auf den 3pxJog im Ie
Dagegen gibts ja Lösungen oder Hacks.

Zitat:

wenn ich für die Container margins und paddings vereinbare muss ich den Boxmodelbug einbauen
Nein, Du brauchst den Bug nicht extra einbauen, der ist im IE5 und IE5.5 schon drin ;)

Du meinst Boxmodel-Hacks gegen den Boxmodelbug ;)

Du musst es nicht zwingend einbauen. Das kommt ganz auf die Webseite an, wie sie mit dem Fehler aussieht. Wenn es nicht weiter schlimm ist, kann man es auch sein lassen. Ich baue meine Webseiten immer erst so, dass der Firefox und IE6 sie ohne Probleme anzeigen. Und dann checke ich mit IE5 und 5.5 nach ... und baue ggfs. Hacks ein oder ändere etwas am CSS-Aufbau.

Petty 04.03.2005 15:54

Hallo! :D :D

Sorry für die Bugs die ich HIER in den Thread eingebaut habe. :D
Ich bin einfach mit allem Wissen vollgestopft, und bring dann mal was durcheinander.

Zitat:

Dagegen gibts ja Lösungen oder Hacks.
Ja, aber wenn ich alles flexibel baue brauch ich den nicht?

Zitat:

Nein, Du brauchst den Bug nicht extra einbauen....
Ja, irgendwann werd ich mir die Ausdrücke merken. :) Natürlich baue ich den HACK gegen den Bug ein.

Gibt es noch andere Sachen, die ich falsch gemacht habe? Im Code

LG Petty ;)

Boris 04.03.2005 15:59

Du solltest absehen, DIVs eine Höhe verpassen zu wollen.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:42 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023