Homepage an Bildschirm anpassen

H

Hirnbreaker

0
Hallo,
ich habe absolut kein Plan, wie ich am besten meine Homepage an die Bildschirmgröße des Betrachters anpassen kann!! Wie mache ich das am besten? Bin echt am verzweifeln.

Arbeite mit CSS,HTML (PHP ist bei dem Vorhaben eher nicht so wichtig).

Als Beispiel das Board hier, ob ich es mit 800x600 oder 1024x768 anschaue, es ist "gleich" oder irre ich mich selber??

Achso, ich habe schon versucht mit % zu arbeiten, jedoch kommt da bei mir völliger Humbuck raus, wäre schön, es würde mir jemand erklären, was ich genau in Prozent angeben muss und was in Pixel (feste Zahl).


Danke
 
Wie ist die HP überhaupt aufgebaut? Mit Frames? Wenn sie mit Frames ist: Du kannst für einen Frame die restliche Bildschirmbreite festlegen. Du hast also links die Navigation, die 150 px breit sein soll, dann schreibst du beim Frameset 150,* - Stern steht für den 2. Frame der einfach den Rest ausfüllt.

In % kannst du Tabellen angeben. Du kannst also sagen: Die ein Spalte soll 50% des Bildschirms ausmachen, und die beiden anderen je 25%. Einfach beim defienieren der Tabelle statt px % hinschreiben.
 
Ja ist mir Frames!

Hab noch nie mit Frameset gearbeitet, nur mit iframes!!

Wie mache ich das denn eigentlich mit dem Banner (also der Breite). Angenommen ich habe ne HP, die von Oben aufgebaut wie folgt aussieht:

Banner
Menü
Inhalt (Iframe)

Ganz simple (ohne großen grafischen Aufwand) Beispiel: www.dp-clan.de.be

So und diese HP möchte ich anpassen. Wie würdest du das am besten tun??

PS: Die Hp ist von mir und komplett mit festen Zahlen geschrieben. Ohne irgendwelche Prozentangaben.
 
Ich würde nicht zu Frames raten, denn Frames sind veraltet und es existert meistens eine bessere Alternative. Ich persönlich finde, das Frames eine Seite entstellen und sie amateurhaft wirken lassen, aber wie gesagt, das ist nur meine persönliche Meinung ;)

cya xsheep
 
Original von Hirnbreaker
Ganz simple (ohne großen grafischen Aufwand) Beispiel: www.dp-clan.de.be
Zum Vergrößern anklicken....
Der Link funzt nicht!

Zum Frameset: Es kommt drauf an wie die Frames definiert sind. Wenn man natürlich überall Scrollbars hat und eindeutig sieht, wo die Frames sind, dann sieht das scheiße aus. Aber es ist halt eine praktische Art um zB eine Naviation einzubinden.
Meine HP (www.remotec.at.tt) ist auch mit Frames aufgebaut und sieht, find ich, nicht so schlecht aus, nächstes Update kommt, wenn mein PC wieder funzt :rolleyes: PHP unterstüzt der Server auf dem die Seite liegt nicht und daher fällt php-include schonmal weg. Aber jetzt B2T, die Diskussion mit Frames gabs schon oft genug ;)

Für dich würde der HTML-Code in etwas so aussehen
Code: 
<frameset rows="60,50,*,1">
<frame src="banner.htm" name="Banner">
<frame src="nav.htm" name="Navigation">
<frame src="willkommen.htm" name="Hauptframe">
<frame src="unten.htm" name="Abschluss">
</frameset>
In dem Fall wäre der Banner (ganz oben) 60px hoch, die Navigationsleiste 50px hoch, dann kommt der Hauptframe dessen Höhe sich automatisch anpasst und das 1 steht für einen Abschlussframe, der 1px hoch ist. Dieser Abschlussframe ist nicht unbeding notwendig, ich mache das, weil ich finde, dass es etwas besser aussieht.
Du kannst natürlich auch hier mit % arbeiten, dann würde es <frameset rows="xx%,yy%,zz%,xy%"> Allerdings hat das in deinem Fall nicht viel Sinn, weil die Höhe des Banners ja immer gleich ist.

Vergessen solltest du auch nicht folgendes reinzuschreiben:
Code: 
<noframes>
    <body>
      <p><a href="nav.htm">Navigation</a> <a href="willkommen.htm">Startseite</a></p>
    </body>
  </noframes>

mfg

RemoteC
 
Original von xsheep
Ich würde nicht zu Frames raten, denn Frames sind veraltet und es existert meistens eine bessere Alternative. Ich persönlich finde, das Frames eine Seite entstellen und sie amateurhaft wirken lassen, aber wie gesagt, das ist nur meine persönliche Meinung ;)

cya xsheep
Zum Vergrößern anklicken....


Dem stimme ich zu.

Am besten du machst div gerüste.
Aber fang besser garnie mit Tabellen an ;)

topic, es kommt sehr drauf an wie die Seite aufgbaut ist. Div layer kannst du relative breiten geben, zB 50% und die dann an die Child elemente vererben.

Ich für meinen Teil baue webseiten mit absoluten Breiten so dass sie för 1024x768px und mehr gut aussehen, denn diese Auflösung macht 87% meiner Besucher aus. (viele drüber, und soweite ich mich erinnere waren nur 3% mit ner tieferen Auflösung unterwegs).
 
@Remotec
Danke, der link ist moemntan irgendwie down, da komplette funpic.de nen fehler hat!

Ja ich persönlich nutze auch ungern frames, jedoch den einen immer (iframe) um meinen inhalt anzuzeigen.

Ich nutze aber Tabellen! Ich kann mir auch net vorstellen ohne zu arbeiten!? Das wäre ja reines geschreibe in css!?

Wie würde sowas denn aussehen? Also nur mit <div class="blub">blub</div> oder wie!??
 
index.html
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
<head>
<div id="header">
<b>inhaltblablabla</b>
</div>
</html>
Zum Vergrößern anklicken....

style.css
#header
{
background-color:#000000;
overflow:hidden;
position:absolute;
width:700px;
height:75px;
z-index:1;
left:150px;
top:15px;
}
Zum Vergrößern anklicken....

so z.B. mache ich das immer wobei ich halt immer mit php arbeit eund immer bloss in den div's include...
 
Ja, so ähnlich habe ich das bisher auch gemacht! (nur mit tables)

Aber wenn du dein Beispiel mit der Auflösung 800x600 öffnest und dannach mit 1024x786 bleibt die Größe gelich, d.h. unter 800x600 musst du mehr scrollen! ;)

Ich will das ja anpassen!
 
Bei Boards wie diesem funktioniert das anpassen an den Bildschirm recht simpel.
Die ienzigen Grafiken, die angepasst werden müssen sind die horizontalen (ich hoffe ich liege richtig! :P Verwechsel horizontal und vertikal manchmal. Naja die, die so liegen halt: ---- *fg*). In diesem Board ist es zum Beispiel so, dass die horizontalen Grafiken (zum Beispiel der rote Farbverlauf den du hier überall wiederfindest) eine winzig kleine Grafik ist, bei der man einfach nicht sieht, wenn man sie mehrfach nebeneinander setzt. Desweiteren ist die Tabellenbreite 100% und die Grafik wird als Hintergrundbild in den Titel gesetzt und in der horizontalen einfach wiederholt.
Bei der Grafik im Titel ist es so, dass sie wahrscheinlich auch als Hintergrundbild oder einfaches Bild nur eben rechtsbündig ausgerichtet ist.
Vielleicht siehst du, was ich meine, wenn du dein Browserfenster mal nicht maximierst und dann die breite ein bißchen hin und her schiebst. Ab einer bestimmten größe hört er auch auf die breite anzupassen.

Das alles ist dann mit CSS realisiert. Schau einfach mal genauer bei den ganzen "background-[...]" Attributen nach.

Hoffe ich habe dir vielleicht ein bißchen weiter geholfen.

Ach ja! Bin neu hier! Hallo erstmal! ;)
 
Hi!

Ja du hast es mir schonmal ein wenig näher gebracht! ^^

Doch kannst du mir nochmal helfen? Wie würdest du das Problem bei dieser Homepage lösen? www.dapartiou.de.be oder www.dp-clan.de.be

Sind beide von mir, und da wirst du evtl gleich sehen, was ich meine!! :(

Wäre echt cool, du oder jemand anders würden wir sagen, was ich da anders machen muss, damit sich die HP anpasst!?


Riesen Dank....
 
Also wenn ich das richtig sehe hast du in der CSS-Datei die Breite der Container-Tabelle main1 auf einen festen Wert gesetzt. Schonmal geguckt, ob da das Problem liegt?
Informier dich vielleicht auch mal genauer über die CSS-Eigenschaft "position: absolute/relative". Da fand ich bei mir oft die Ursache des Problems.

Oder meinst du hier das Problem, dass der Content nicht zentriert ist?
 
Hi,
hmm also ich hab einfach eine Tabelle um die ganze HP gemacht:

<table width="100%" height="100%">
<tr>
<td align="center">

HOMEPAGE....

</td>
</tr>
</tabel>


Jetzt wird die HP immer der Bildschirmgröße angepasst (jedoch nur wo sie sitzt (mittig)) an der Größe verändert sie sich net, da ich da ja auch feste Zahlen (verbessert mich, wenn das anders heißt) :) genommen habe! Wird denn z.B. das hackerboard auch so angepasst oder verändert die sich auch mit der gesammtgröße? Kann das net erkennen! ^^

Und nochwas, wie würde ich denn machen, wenn ich die HP net immer mittig haben möchte, sondern so wie dapartiou.de.be (untenlinks)? Also jetzt habe ich das ja per <td align="center> gelöst! Geht das auch irgendwie anders?

Danke!
 
Also im Burning Board allgemein ist es glaube ich mit der automatischen Anpassung so, dass es eine Container-Tabelle gibt, die aus einem Feld besteht. Die breite wird (glaube ich) mit den CSS-Eigenschaften
Code: 
position: absolute;
width: 100%;
so eingestellt, dass sie relativ zum Fenster ist. Wenn die Eigenschaft position auf relative steht wird das Element relativ zu seinem Übergeordneten Element ausgerichtet. Ich habe selber oft genug Probleme mit der Sache und krieg es immer durch rumprobiererei irgendwie hin. Wie genau weiß ich aber nicht mehr! ^^
Google einfach mal danach! Findest bestimmt ein Tut, was sich mit automatischer Breitenanpassung eines Table-Designs befasst.

Ich hoffe ich verstehe deine 2. Frage richtig und du willst die Website nicht zentriert, sondern in einer Ecke des Fensters ausrichten. Mach einfach ne Tabelle mit einer Zelle. Bei dieser kannst du dann die Eigenschaften valign und align nutzen um es auszurichten.
 
Hi, ja das hatte ich gemeint! Danke!

Ist diese ganze Anpassung denn eigentlich mit

<div id="bla">blub</div>

möglich?

Also komplett ohne Table?

Ansonten hab ich aber alles verstanden! Ich danke euch, ihr seid die Besten! ;)

Gruß hirnbreaker
 
Eine Anpassung der Seitenbreite ist natürlich auch mit DIV-Tags möglich, allerdings ist hier die Seite dann etwas anders aufgebaut. Als ich das letze mal mit DIV-Tags ne Seite gebastelt habe, war sie nur in einem Browser vernünftig.
Das ist leider das Problem an CSS, dass du nicht sicher sein kannst, dass es in anderen Browsern genauso aussieht wie in deinem, also solltest du es immer mit verschiedenen ausprobieren.

Ein guter Anfang sind zum Beispiel Internet-Explorer und Firefox. Wen's glücklich macht noch Opera, Netscape und und und ^^

Mehr zum DIV-Aufbau einer Seite bei google unter "tableless design" ^^
 
Hihi, das Problem mit CSS kenne ich. Ich hab selber IE und Firefox drauf, wenn die HP auf den beiden läuft bin ich schon zufrieden! ^^

Hatte auch irgendwo mal ne Liste wo die Befehle drinstehn (welche,wo kompatiebel sind).

Aber ob man Table oder Div nimmt ist doch eigentlich gehoppst wie gsprungen, denn wenn ich das mache sieht das bei mir wie folgt aus:


<table id="blubb">

oder

<div id="blub">

...gibts da son großen Unterschied??

Naja danke schonmalm, hast mir wirklich sehr weitergeholfen!!
 
ARGH, nein bitte nicht ;(
versuchs mal damit dem IE ein paar Befehle vorbeizuschmuggeln ;)
Code: 
<!--[if gte IE 5.5000]>
<HIER DAS STYLESHEET INCLUDEN>
<![endif]-->
Rest wie gewünscht und den Opera ignorieren wir weil den benutzt eh keiner der auf so ne HP geht :D
Imrahil

*EDIT*
Es geht klaro mit Tables und mit DIVs aber ich sage es mal so: tables zum Layouten sind zu unflexibel (meine Meinung) ich benutz lieber DIVs.
 
Das stimmt! Das sog. Tableless-Design ist eine super Möglichkeit sehr individuelle Designs zu gestallten und vorallem: das Design einer Website durch austauschen der CSS-Datei in (mehr oder weniger) null komma nichts komplett zu verändern.
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben