webseiten auflösungsproblem

$martey Delux · Jul 14, 2007

dürfte wohl ne zeimliche noobfrage sein
hab auch nicht viel ahung vom proggen mit html und css obwohl einfache dinge bis jetzt ganz gut funktioniert haben aber wie stelle ich es am einfachsten an dass ich wenn ich meine website erstelle und auf ein andere auflösung switche mein banner und die anderen grafiken die ursprüngliche größe behalten und nur der hintergrund sich erweitert

also ich hab mir das ganze so vorgestellt:
oben ein banner zentriert (soweit unproblematisch)
dann eine dynamisches linkmenü darunter (sollte ich auch noch hinbekommen)
darunter dann ein schlichtes hintergrund"fenster" besser gesagt ein feld auf dem der anzeigetext plaziert ist und das ganze auf nem andersfarbigen <body>
an der seite auf eben diesem body sollen dann auch noch einige grafische schaltflächen platz finden

und alles sollte in verschiedenen auflösungen gescheit aussehen
ich hab zwar was in dieser verbindung von blinden pixeln gehört kann mir aber nicht ganz vorstellen wie das funktioniert

besonders wichtig wäre es zu wissen ob ich bei allen grafiken width und height als attribute mit einbauen sollten und vorallem ob ich maßangaben am besten

in point (pt) centimeter (cm) pixel (px) element (em) oder percent (%) angeben sollte

Osbes · Jul 14, 2007

Ja, es ist sicherlich eine noobische Frage, aber auch solche werden beantwortet
Man kann HTML nicht "proggen", da es eine Auszeichungssprache ist. Man schreibt es lediglich. Gleiches gilt für CSS, mit dem unterschied, das es eine Formatierungssprache ist.
Er hat "blinde Pixel" gesagt, steinigt ihn ... Im Ernst, als Verfechter von guten Internetauftritten gebrauche bitte NIEMALS diese Technik.
Aber hier kannst du dich mal drüber informieren: http://de.selfhtml.org/grafik/sorten.htm#blinde_pixel
Zum Thema Maßeinheiten lies dir bitte folgendes durch:
http://de.selfhtml.org/css/formate/wertzuweisung.htm#numerische
Zum Thema "widht" und "height"
http://www.w3.org/TR/html401/struct/objects.html#h-13.7.1

W3C - HTML401 said:

When specified, the width and height attributes tell user agents to override the natural image or object size in favor of these values.

When the object is an image, it is scaled. User agents should do their best to scale an object or image to match the width and height specified by the author. Note that lengths expressed as percentages are based on the horizontal or vertical space currently available, not on the natural size of the image, object, or applet.

The height and width attributes give user agents an idea of the size of an image or object so that they may reserve space for it and continue rendering the document while waiting for the image data.

Click to expand...

Konkret gesagt macht es sinn, wenn die größe der Bilder Einfluss auf weitere Darstellungen deiner Seite stehen. Wenn sie nur für sich stehen kannst du sie beruhig weglassen.
Bsp.:
( Hier gehören sie dazu, da div keine weitere größenangabe hat )
HTML:
```
<div>
   <img src="bild.jpg" width="100" height="100" />
</div>
```
( Hier kann man es sein lassen )
HTML:
```
<div style="width:100;height:100">
   <img src="bild.jpg" />
</div>
```
Des Effekt ist simpel, wenn du "width" und "height" nicht angibst, die Grafik aber deine Seite strecken würden ( oberer Fall ), passiert dies immer erst wenn die gesamte HTML-Seite aufgebaut wurde, da dann erst der Browser die Header-Informationen aus den Grafiken lädt und die Seite nachträglich streckt.
Dies sieht meist ziemlich scheiße aus ...
Es gibt kein weiteres "body"
Eine Seite ist wie folgt aufgebaut ( ganz Simpel, weder "strict" noch XHTML ):
HTML:
```
<html>
<head>
HEADER INFORMATIONEN
</head>
<body>
INHALT
</body>
</html>
```
Formuliere nochmal genau, was du überhaupt willst und mach am besten mal ein Beispiel deiner Umsetzung.

Kasian · Jul 14, 2007

So wie ich das verstanden habe, will er zentriert seine Page in einer bestimmten Größe haben und je nach Bildschirmauflösung soll sich halt der BG ändern.

Ne Tabelle würdsch nehmen(ich bin auch ein noob

)
€dit:
Wasn hiermit?
http://de.selfhtml.org/html/frames/eigenschaften.htm#unveraenderbar

Osbes · Jul 14, 2007

Weder das eine noch das andere ist eine Lösung. Wenn, dann will er bislang die richtige CSS-Deklaration kennen ... aber da ich noch nicht weiß für welchen Bereich es nun sein soll kan ich ihm kein Beispiel darstellen.

Tabellen nutzt man nur, wenn man Daten in tabelarischer Form darstellen will, davon habe ich aber noch nix gehört, bzw. ist dies für die Darstellung einer Webseite unerheblich.

Und IFrames sind nur eine Art von Frames, die man nur nutzt, wenn man eine Seite in eine andere laden will, da aber bislang noch nicht mal von eigentlichen Frames die rede war ist dies auch unerheblich.
Wobei ich IFrames auch nur einsetzen würde, wenn es aufgrund von techn. Begrenzung ( Sei es nun Wissen oder Möglichkeiten ) anders nicht umsetzbar ist.

//EDIT
Bei dem von dir gezeigten ( das in dem EDIT ) geht es nur darum, das die Größe von Frames nicht verändert werden kann. Dies hat aber nichts mit der Bildschirmauflösung des Nutzers, oder des gesamten Fensters zutun.

$martey Delux · Jul 14, 2007

zugegeben meine beschreibung war ein wenig unglücklich formuliert
meinte in obiger beschreibung ein zweites wallpaper welches über das haupt-wallpaper gelegt ist

bevor ich jetzt groß drumherum rede und missverständnisse auftauchen hab ich mal nen grafischen entwurf (
http://www.bilder-speicher.de/07071423278666.vollbild.html )der seite angefertigt damit du siehst was ich meine (hoffe es ist verständlich) derweil arbeite ich mal die links durch

Osbes · Jul 15, 2007

ok, ich stelle hier dann später ein beispiel des gewollten rein, bin erstmal pennen

BseBear · Jul 16, 2007

also wenn ich das recht verstehe soll der bereich um die seite variabel sein, damit die zentriert is? oO

wenn ja, kannst das ganz einfach mit 2 divs lösen. der erste würde dann so aussehn

PHP:

<div id=sitecontainer style='width:100%;height:100%'>
<div id=site style='width:xxxpx;height:xxxpx;text-align:center'>
</div>
</div>

Dann wird deine Seite nicht gestreckt und soweit ich das verstanden hab willst genau das verhindern oder? oO

Osbes · Jul 16, 2007

@BseBear
Wenn man schon attr. angibt, dann bitte in der Form NAME="VALUE" da alles andere falsch ist.
Des Weiteren ist es unsinnig einen ID-Wert UND style="" zu vergeben, da sowohl style="", als auch id="" auf ein eindeutiges element verweisen.
Außerdem ist "width:100%;height:100%" 100% des Inhaltes und nicht des Fensters.

@M&M Deluxe
Hier ein Codebeispiel:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>M&M</title>
<style type="text/css">
<!--
.header {
background-color:        #CCC;
border:                  #000 1px solid;
height:                  150px; 
width:                   900px;
}


.main {
width:                   900px;
}

.left {
background-color:        #BBB;
border:                  #000 1px solid;
width:                   150px;
float:                   left;
height:                  700px;
}

.right {
background-color:        #BBB;
border:                  #000 1px solid;
width:                   150px;
float:                   right;
height:                  700px;
}

.middle {
background-color:        #BBB;
border:                  #000 1px solid;
margin:                  0 160px; 
height:                  700px;
}

.footer {
width:                   900px;
background-color:        #CCC;
border:                  #000 1px solid;
}
-->
</style>
</head >
<body>
  <div align="center">
    <div class="header">
    KOPFZEILE
    </div>
    
    <div class="main">

      <div class="right">
      RECHTS
      </div>
        
      <div class="left">
      LINKS  
      </div>
        
      <div class="middle">
      MITTE
      </div>
    </div>
    
    <div style="clear:both;"></div>
    
    <div class="footer">
    FUSSZEILE
    </div>
  </div>
</body>
</html>

$martey Delux · Jul 16, 2007

dankeschön werde es mal ausprobieren und das von mir geschriebene in weaverslave entsprechend umändern hoffe ich kriegs entsprechend korrekt angepasst und schaffe es hoffentlich btw meine horizontale navigationsleiste mit aufklappmenü so hinzukriegen wie ich es mir vorstelle das aufklappen haut zwar hin aber es schaut bescheiden aus.. naja will euch damit jetzt nicht auch noch belästigen

ich versuchs erst mal selbst weiter

BseBear · Jul 16, 2007

Osbes said:
@BseBear
Wenn man schon attr. angibt, dann bitte in der Form NAME="VALUE" da alles andere falsch ist.

Komisch dass der HTML Validator vom w3c kein bißchen meckert wenn man ' verwendet

Des Weiteren ist es unsinnig einen ID-Wert UND style="" zu vergeben, da sowohl style="", als auch id="" auf ein eindeutiges element verweisen.]

Ich wollt ihn nur nich mit css Klassen verwirren :anime

btw würde man sowas aber trotzdem mit id's und nicht mit Klassen regelrn. Schließlich kommt jeder Teil der Seite nur einmal vor.

Außerdem ist "width:100%;height:100%" 100% des Inhaltes und nicht des Fensters.

das hab ich allerdings grade auch gesehn^^

Osbes · Jul 16, 2007

ja, man könnte "id" sicherlich verwenden, aber ich bin doch noch "class" verfallen, da es auch eine kaskade im gegensatz zu "id" erlaubt.

zum thema NAME=VALUE und NAME='VALUE'

ja, es ist eine Betrachtung von XHTML, dass man es in der Form NAME="VALUE" schreiben muss ( wobei NAME und VALUE natürlich immer lowercase sind )

Unter HTML4 wäre auch NAME='"&#3 9;&#3 4;VALUE&#3 9;&#3 4;"' denkbar, jedoch wäre keine einzige dieser Möglichkeiten sinnvoll, da HTML4 damit ziemlich aleine dasteht ( HTML5 soll sich dahingehend an XHTML richten )

die Form NAME=VALUE ist unter HTML4 auch nur in Spezialfällen erlaubt. Grob gesagt sind es A-Z 0-9 und ein paar Zeichen ( ich glaube es waren 4 Sonderzeichen, müsste ich nachschauen welche / wieviele ).

Daher stimmt deine Aussage natürlich für HTML4, aber soweit ich mich entsinne haben selbst die Entwickler davon abgeraten dies zu nutzen, ferner es jemanden vorzuschlagen ^^. Es ist auch garnicht nützlich, da man zu keiner Zeit ein " in dieser schreibweise in der Quelltextbetrachtung braucht.
Man kann ruhig das innere " umwandeln.

-Admi- · Jul 16, 2007

Der Vor- bzw Nachteil von id ist, dass es sie nur einmal geben darf. Hat man also zufällig 2mal die selbe id vergeben, bekommt man das mit einem Fehler quittiert. Von der Wirkungsweise her ist aber wurst, ob class oder id genutzt wird.

height:100% funzt m.E. nicht im IE

Der hat mit prozentualen Höhenangaben schon seit jeher Probleme. D.h. die Höhe würde einzig über den inneren Container gesteuert.

@Osbes in deinem Beispiel fehlt was im Kopf

<?xml version="1.0" ?>
<!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">
...

Das zukünftige "HTML" ist noch nicht wirklich abzusehen. Es gibt derzeit 3-4 ernst gemeinte Entwürfe verschiedener Gremien (XHTML 2, HTML 5, etc), die nicht wirklich zueinander finden. Eins wird vom W3C favorisiert. Das andere wollen die Browserhersteller lieber. Bis da irgendwas mal entschieden wurde, wird XHTML 1/HTML 4 weiterhin "aktuell" sein.

@smartey
http://www.thestyleworks.de/tut-art/index.shtml#tut-art1
http://www.css4you.de/wslayout1/index.html
http://de.selfhtml.org/css/layouts/mehrspaltige.htm

Osbes · Jul 16, 2007

<?xml version="1.0" ?> führt aber beim IE zum Quirksmode und ist nach XHTML rein optional, weshalb man davon absehen sollte.

Und da dort so schön "Transitional" steht muss man den XHTML-Namespace ( xmlns ) auch nicht angeben.

Gab es den jemals "ein" HTML ? .^^

-Admi- · Jul 17, 2007

Das ist nunmal die Syntax, die Selfhtml nahe legt (warum auch immer). Und ein fehlender Namespace wurde mir bei XHTML schonmal von einem Validator bemängelt, also sollte der wohl rein.

Osbes · Jul 18, 2007

Namespaces in XML 1.0 / XHTML 1.0 said:
The prefix xmlns is used only to declare namespace bindings and is by definition bound to the namespace name http://www.w3.org/2000/xmlns/. It MUST NOT be declared . Other prefixes MUST NOT be bound to this namespace name, and it MUST NOT be declared as the default namespace. Element names MUST NOT have the prefix xmlns.

Das einzige was bemängelt werden kann ist eine falsche Angabe.

Sinnvoll wäre eine Deklaration ja auch erst, wenn du mehrere Varianten verwendest.

-Admi- · Jul 18, 2007

Ich hatte damals definitiv gar keine Angabe zum NS drin, weil ich davon auch gar nichts wusste ^^. Irgendein Validator (entweder W3C oder selfhtml) hat mir dann gesagt, da fehlt noch was und bei der Nachverfolgung kam dann der xmlns im html-Tag ins Gespräch.

webseiten auflösungsproblem

Similar threads