• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Homepage an Fenstergröße anpassen

Status
Für weitere Antworten geschlossen.
S

Sabsi

Neues Mitglied
Hallöchen...
ich bin neu hier und blutiger ANFÄNGER...

Ich habe begonnen mich mit dem Thema Homepage erstellen zu beschäftigen, da eine befreundete Band eine neue möchte und der, der sich bis jetzt darum gekümmert hat, einfach keine Lust mehr hat.

Ich habe allerdings gemacht bevor ich alles bedacht habe.
Genauer gesagt...ich bin fast fertig mit der Seite...
Aber ich habe vergessen, dass es ja Leute gibt die eine andere Auflösung haben als ich...

Wenn ich meine Seite aufrufe...über den ganzen Bildschirm...sieht es total richtig aus...
Wenn ich allerdings das Fenster vekleinere verschieben sich einige Elemente, ie zum Beispiel meine Navigation..


Kann ich meine Seite noch irgendwie retten oder muss ich alles nochmal machen???

Code: 
<html> 
<head> 
<title>UnKaputtbar</title>
<style type="text/css">
<!--
body
{
text-align: center;
}
table.main
{
magin: 0 auto;
width: 400px;
height: 100%;
border: 0;
}
td.scroll
{
height:410px;
background:ffffff
scrollbar-base-color:cccccc;
scrollbar-3d-light-color:cccccc;
scrollbar-arrow-color:666666;
scrollbar-darkshadow-color:cccccc;
scrollbar-face-color:ffffff;
scrollbar-highlight-color:ffffff;
scrollbar-shadow-color:ffffff;
scrollbar-track-color:ffffff;
}
--> 
</style>
<style> <!--a{text-decoration:none} //--> </style>
 </head>
 
<div> 
<body BACKGROUND="C:\Sabsi's Daten\Homepages\UnKaputtbar\Hintergrund 2 Kopie.jpg" link="cc0000" vlink="cc0000" alink="cc0000" hover="#ff0000"> 
</div>
 
<div align="center">
<img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Rahmen-Gigs.gif">
</div>
 
<!--Navigation-->
<div style="position:absolute; top:253px; left:333px; z-index:1">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\UnKaputtbar.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - News.jpg" border="0"></A>
</div>
 <div style="position:absolute; top:253px; left:406px; z-index:2">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Band.html"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - Band.jpg" border="0"></A>
</style>
</div>
<div style="position:absolute; top:253px; left:482px; z-index:3">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Media.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - Media.jpg" border="0"></A>
</div>
<div style="position:absolute; top:253px; left:569px; z-index:4">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Gigs-nächste Gigs.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - Gigs.jpg" border="0"></A>
</div>
<div style="position:absolute; top:253px; left:641px; z-index:5">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\shop.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - Shop.jpg" border="0"></A>
</div>
<div style="position:absolute; top:253px; left:713px; z-index:6">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Kontakt.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - Kontakt.jpg" border="0"></A>
</div>
<div style="position:absolute; top:253px; left:830px; z-index:7">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Links.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\Button - Links.jpg" border="0"></A>
</div>
 
<!--Rahmenbeschmückung-->
<div style="position:absolute; top:850px; left:540px; z-index:9; font-family:Helvetica; font-size:10pt">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Impressum.html">Impressum</A>
</div>
<div style="position:absolute; top:850px; left:640px; z-index:9; font-family:Helvetica; font-size:10pt">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\Copyright.html">Copyright</A>
</div>
<div style="position:absolute; top:600px; left:930px; z-index:8">
<A HREF="[URL]http://www.myspace.com/unkaputtbarpoppunk[/URL]" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\myspace_banner.gif" border="0"></A>
</div>
<div style="position:absolute; top:550px; left:225px; z-index:9">
<A HREF="C:\Sabsi's Daten\Homepages\UnKaputtbar\shop.html" coords="20,10,15,20"><img src="C:\Sabsi's Daten\Homepages\UnKaputtbar\CD Cover.jpg" border="0" width="90"></A>
</div>
<!--Tabelle links-->
<div style="position:absolute; top:400px; left:220px; z-index:9">
<table border="0" cellpadding="0" cellspacing="0">
  <colgroup width="100" span="3"></colgroup>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="2"><b>Letztes Update</b></font>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="1">31.03.2007</font>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="1">News</font>
    </td>
  </tr>
</table>
</div>
<div style="position:absolute; top:530px; left:220px; z-index:9">
<table border="0" cellpadding="0" cellspacing="0">
  <colgroup width="100" span="3"></colgroup>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="2">aktuelle CD</font>
    </td>
  </tr>
</table>
</div>
<!--Tabelle rechts-->
<div style="position:absolute; top:400px; left:923px; z-index:9">
<table border="0" cellpadding="0" cellspacing="0">
  <colgroup width="100" span="3"></colgroup>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="2"><b>Nächste Gigs</b></font>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="1">31.03.2007</font>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="1">GARAGE PANKOW</font>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="1">20.04.2007</font>
    </td>
  </tr>
  <tr>
    <td align="center" valign="middle">
        <font color="ffffff" face="Helvetica" size="1">EXIL EBERSWALDE</font>
    </td>
  </tr>
</table>
</div>
 
<!--weiße Bereich-->
<div style="position:absolute; top:375px; left:375px; z-index: 9; class=scrollbar">
 <table class="main" cellpadding="0" cellspacing="0">
     <tr>
     <td class="scroll">
       <div style="overflow: auto; height: 100%; width: 500px; text-align: left">
        <font color="000000" face="Arial" size="2">
TEXT 
</font>
     </td>
   </tr>
 </table>
</div>
 
</body>
</html>

Ja auf diese Weise ist meine ganze Seite aufgebaut...
(Nicht hauen, falls es irgendwo umständlich oder unüblich ist)

Nicht wundern, dass da Festplattenpfade sind...ich mache die ganze Seite erstmal nur auf der Festplatte...
 
Zuletzt bearbeitet:
1. Alle HTML-Tags werden klein geschrieben.
2. Layout-Tabellen sind out.
3. Les bei SelfHTML erstmal was über CSS und prozentuale Angaben. Oder geh hierhin und lerne: http://www.css4you.de
4. Code einrücken (nicht zwingend, dient aber zur Übersicht, haste nur bei den Tabellen gemacht und benutz bitte Tabs anstatt Whitespaces)
5. CSS kommt in eine externe Datei mit der Endung *.css
6. Pack bitte keine Tabellen in Divs, außer zur tabellarischen Darstellung von Informationen
7. Auch das style-Attribut hat nix in HTML verloren, das lässt sich über CSS-Klassen oder -IDs auch steuern.
8. Wenn ein Dokument im gleichen Ordner liegt wie das aktuelle, brauchste nur ./filename.htm angeben, net den ganzen Pfad.

Ich erwarte nicht von dir, dass direkt alles perfekt ist, aber wenn man mit dem HP-Bauen anfangen will, sollte man sich die Coding-Standards direkt angewöhnen, das war nämlich auch mein Fehler, dass mein Code nicht lesbar war.

Zu deiner Frage: Ich würed nochmal alles neu machen... Auch wenns anstrengend is, direkt gut anzufangen kann hilfreich für später sein, wenn man sich direkt guten Stil und Fehlervermeidung angeeignet hat.
 
okay...werde ich beachten...

Wie funktioniert es denn, dass die HP sich an die Fenstergröße anpasst??
Einfach Positionen und Größen in % angeben? und das reciht?
 
Obwohl ich stritk dagegen bin, optische Auszeichnungen über HTML vorzunehemen, wäre das hier ein einfaches Beispiel:

HTML: 
<table width="50%"></table>

Die Tabelle geht dann über die halbe Seite und fertig :wink:
 
Das heißt jetzt?
Ich soll jetzt alles in diese Tabellenaweisung schreiben???
oder wie?

Danke schonmal für deine Hilfe
 
Nein, aber du kannst ja viel mit CSS hinterher machen, dafür sind auch diese prozentualen Angaben gut, fang lieber an zu lernen, bevor ich dich hier noch mehr verwirre.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben