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

Variable Website höhe

O

oneFabs

Neues Mitglied
Hey Leute!

Also ich habe mich jetzt mal nach längerem mitlesen auch registriert, weil ich glaube, dass ihr mir helfen könnt. Warscheinlich ist es für euch ein sehr einfaches Thema, dennoch hab ich im Internet nichts passendes gefunden, bzw das, was ich gefunden habe, konnte ich nicht richtig umsetzten oder es hat einfach nicht funktioniert.

Also ich habe jetzt meine Webseite für meine Auflösung programmiert gehabt, nur jetzt möchte ich einfach, dass die Websitelänge sich automatisch an verschiedene Auflösungen anpasst. Allerdings ist die Tabelle (HTML) in 4 Reihen unterteilt, und nur die untere ( die mit kkkkkkkkkkkkkkkkkkkkkkkkkkk) soll sich je nach Auflösung verändern.
Könnt ihr mir helfen? Hier ist der Code:

Code: 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.Ver {
    font-family: Verdana, Geneva, sans-serif;
    color: #E6DE7C;
    font-size: 36px;
    padding-left: 40px;
    
}
.Top {
    vertical-align: top;
    padding-top: 40px;
    padding-right: 3px;
}
.normal {
    color:#D6D6D6;
    background-color:#626C63;
    font-size: 36;
    text-align: right;
    padding-right: 10px;
}
.spezial {
    color:#626C63;
    background-color:#D8AA54;
} 
.Navbar {
    text-align: right;
    text-indent: 4px;
}
body,td,th {
    font-family: Verdana, Geneva, sans-serif;
    scrollbar-base-color:#00FF66;
    scrollbar-3d-light-color:#00FF66;
    scrollbar-arrow-color:#FFFFFF;
    scrollbar-darkshadow-color:#000000;
    scrollbar-face-color:#8C8CC6;
    scrollbar-highlight-color:#FFFFFF;
    scrollbar-shadow-color:#000000;
    scrollbar-track-color:#ACACE6;
}
p {
    letter-spacing:;
    line-height:1em;
    width:30;
    margin-left:40px;
    
}


</style>
</head>

<body bgcolor="#999999">
<table width="850" align="center" height="800" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td height="64" colspan="3" bgcolor="#363c38" class="Ver">lllllll</td>
  </tr>
  <tr>
    <td height="177" colspan="3"><img src="http://www.html.de/images/Header1.jpg"/></td>
  </tr>
  <tr>
    <td height="21" colspan="3" bgcolor="#363c38"><p>&nbsp;</p></td>
  </tr>
  <tr>
  
    <td width="651" bgcolor="#363c38" border="323">
    <div class="content" style="height:450px; overflow:auto; border:0px solid #840; padding-right: 30px; text-align:left;">
      <p> kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk
</p></div></td>

    <td width="17" cellspacing="10" bgcolor="#363c38">&nbsp;</td>
    <td  class="Top" width="179" bgcolor="#363c38"><table width="179" height="123" align="right" cellspacing="4">
      <tr>
        <td class="normal" onmouseover="this.className='spezial';" onclick="window.location.href='index.html';" onmouseout="this.className='normal';" height="25">Home</td>
        </tr>
      <tr>
        <td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='vita.html';" bgcolor="#626C63" height="25">Vita</td>
        </tr>
      <tr>
        <td algin="right" class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';"  onclick="window.location.href='kontakt.html';" bgcolor="#626C63" height="25">Kontakt</td>
        </tr>
      <tr>
        <td class="normal" onmouseover="this.className='spezial';" onmouseout="this.className='normal';" onclick="window.location.href='impressum.html';" bgcolor="#626C63" height="25">Impressum</td>
        </tr>
    </table></td>
  </tr>
</table>
</body>
</html>
Vielen Dank schonmal, ihr wäret mir echt behilflich, ich weiß wirklich nicht weiter.

Fabian
 
Missverständnis 1: Webseiten erstellt man nicht für Auflösungen sondern für Viewports, also den Bereich den ein Browser der Webseite zugesteht. Das kann durchaus auch eine kleinere oder "krumme" Zahl sein.

Missverständnis 2: Webseiten erstellt man nicht mit Tabellen. Denn Tabellen sind dafür da tabellarische Inhalte aufzunehmen. Als Grundgerüst einer Webseite sind sie absolut ungeeignet.

Missverständnis 3: Webseiten stylet man mit CSS, nicht mit HTML.

Dein Grundproblem: Du verwendest eine Tabelle mit festen Höhen- und Breitenangaben im HTML.

Die Lösung: schreib die Seite komplett neu ohne Tabellengerüst und verwende CSS zur Gestaltung. Verzichte dabei auf Breiten- und Höhenangaben, dann passt sich die Seite (so sie aus Blockelementen besteht) automatisch an den zur Verfügung stehenden Viewport des Besuchers an.

Und falls diese Antwort bei dir viele Fragezeichen verursacht: schau dir mal aktuelle Anleitungen zum Aufbau von Webseiten an.
 
Danke für die Antwort!

Also ich möchte dir keinesfalls widersprechen, ich hatte schon gelesen, dass CSS geeigneter ist. Die Vorteile schienen mir allerdings nicht dominant genug, um jetzt nochmal alles umzuschreiben.

Nur nochmal des Verständnisses halber: Ich kann mit HTML also die Webseite nicht automatisch an den Viewport anpassen lassen?

Die Sache mit den Höhenangaben weglassen sollte aber doch bei Bildern Probleme verursachen, oder nicht? Falls diese Frage gerade zu oberflächlich und selbstverständlich klingt, beantworte sie nicht, ich lese mir nochmal durch, wie man mit CSS die Webseite aufbaut.
 
oneFabs schrieb:
Nur nochmal des Verständnisses halber: Ich kann mit HTML also die Webseite nicht automatisch an den Viewport anpassen lassen?
Zum Vergrößern anklicken....

Doch, aber es ist eine unsaubere Variante und führt sobald Du CSS zur Gestaltung verwendest dann zu Problemen. Denn CSS-Eigenschaften haben vor HTML-Eigenschaften vorrang.

Die Sache mit den Höhenangaben weglassen sollte aber doch bei Bildern Probleme verursachen, oder nicht?
Zum Vergrößern anklicken....

Nein, denn Bilder sollte man nicht mit festen Maßangaben in HTML einbetten sondern immer 1:1 so anzeigen wie sie sind.
 
Vielen Dank! Ich schreib hier einfach nochmal rein, wenn ich noch unlösbare Fragen habe :D
 
Zuletzt bearbeitet:
Nein. Eine Webseite gestaltet man mit CSS. HTML dient zur Auszeichnung der Inhalte. Und das macht man mit den HTML-Elementen entsprechend der Bedeutung des Textes. Also <h1> bis <h6> für Überschriften, <p> für Absätze, <strong> für Betonungen etc. pp. <div> darf nur als Gruppierungselement verwendet werden - und nicht zu oft, denn sonst endet alles in einer unübersichtlichen und semantisch unkorrekten div-Suppe.
 
Also ich möchte dir keinesfalls widersprechen, ich hatte schon gelesen, dass CSS geeigneter ist. Die Vorteile schienen mir allerdings nicht dominant genug, um jetzt nochmal alles umzuschreiben.
Zum Vergrößern anklicken....

Die Vorteile von CSS dominieren über alle Techniken wie Tabellenlayouts, Frames und was sonst noch aus der Internet-Steinzeit über geblieben ist. Das wirst du wahrscheinlich bei umfangreicheren Projekten merken, wenn es schon zu spät ist. CSS ist leichter zu verwalten und zu pflegen, lässt den Code sauber und übersichtlich und erspart Ladezeit und Bandbreite.
 
hallo!
So, ich habe jetzt die ursprüngliche Webseite in Css umgeschrieben. Allerdings habe ich jetzt immernoch mein ursprüngliches Problem.
Hier erstmal ein bild der Seite, damit man sich das besser vorstellen kann:


Also mein Ziel ist es, Die Höhe des oberen Bereiches (HEADLINEDSF, Bild) fest zu haben und dann den rest, also die "inhalt-div" so variabel zu halten, dass sie sich an den verfügbaren Platz in der Höhe anpasst und man keinen scrollbalken mehr an der seite hat, sondern nur den der "inhalt-div". Im Moment habe ich das Problem, dass ich am Rand in Firefox auch immer einen Scrollbalken habe und, dass die Seite generell nicht das gesamt browserfenster ausfüllt ( siehe Bild).
Könnt ihr mir helfen den unteren Teil also so zu schreiben, dass er sich automatisch an die restliche verfügbare Höhe anpasst? Ich habs mit height=100% etc versucht, aber ich war bisher erfolglos.
Hier noch der code:

Code: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">     

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

                <title>Beispiel 1</title>

                <link rel="stylesheet" type="text/css" href="style.css" />

                </head>

                <body>

                <div id="box">

                       <h1 id="header">Headline1dsf</h1>

                       <ul id="Bild"><img src="Header.jpg" />
            

                          
                    </ul>

                    <div id="inhalt">
                         <p>&ouml;&ouml;&ouml;&ouml;df asdf sfd asdf&ouml;lk &ouml;lakjwe &ouml;t&ouml;alkjba&ouml;dslkjare akegjasg kgjwagk &ouml;lskgjre ag &ouml;ldskfgjr a&ouml;lskgj r ifgj r &auml;akgjarepg agkfgjriaga fds&ouml;kglrk gpaiergjreg adsfgjrpig ag &auml;fgkjdgirg fg&ouml;kldfg riga fgk r fg</p>
                         <p>fgh</p>
                         <p>fg</p>
                         <p>hfdghdfgh</p>
                         <p>fdg</p>
                         <p>h</p>
                         <p>fdgh</p>
                         <p>&nbsp;</p>
                         <p>&nbsp;</p>
                         <p>&nbsp;</p>
                         <p>h</p>
                         <p>h</p>
                         <p>h</p>
                         <p>h</p>
                         <p>h</p>
                         <p>hhh</p>
                       
                      
                    </div>
            
                     <ul id="navigation"> 
                     <li><a href="#">Button 1</a></li>

                              <li><a href="#">Button 2</a></li>

                              <li><a href="#">Button 3</a></li>

                              <li><a href="#">Button 4</a></li>

                              <li><a href="#">Button 5</a></li>
                  </ul>
            

                       <p id="footer">...</p>

                </div>

                </body>

                </html>

und CSS:

Code: 
*{

                padding:0;

                margin:0;

                }


                body{
    font:12px "Trebuchet MS", verdana, arial, sans-serif;
   
                text-align: center;
    background: #0F0F0F;

                }

                

             

                

                h2{
    margin: 1em 0;
    font-size: 16px;
    text-transform: uppercase;
    padding-left: 8px;
    line-height: 18px;  

                }

                


                

                #box{
    width:800px;
    margin: 0 auto; 
    text-align: center;
    background-color: #373C38;
    position: relative;
    
                }

                

                /* Header */

                

                #header{
    
    color:black;
    line-height: 70px; 
    padding-left: 30px;
    border-bottom:none;
    margin-bottom: 0px;
    font-size: 25px;
    text-transform: uppercase;
    text-align: left;

                }

                #header span{

                display: block;

                color: white;

                font-size: 12px;

                text-transform: none;

                margin-top: -45px;   

                font-weight: normal;

                }

                

                /* Navigation */

                

                #Bild{
    list-style: none;
    width: 650px;
    margin-bottom: 10px;

                }
                
                ul#navigation

                {
    width:             171px;
    padding:              0;
    list-style:           none;
    float: right;
    position: relative;
    top: -570px;
    height: 128px;
    margin-top: 1em;
    margin-bottom: 1em;
            
            
                

                }
                
                                ul#navigation1

                {
    width:             171px;
    padding:              0;
    list-style:           none;
    float: right;
    position: relative;
    top: -620px;
    height: 128px;
    margin-top: 1em;
    margin-bottom: 1em;
            
            
                

                }

                

                ul#navigation li

                {
    margin:              0;
    padding:              0;
    text-align:              center;

    border-bottom:       1px solid #373C38;
    

                }

                

                ul#navigation li a

                {
    display:              block;
    height:              22px;
    width:              171px;
    padding-top:              4px;
    text-decoration:       none;
    color:              #373C38;
    background-color: #6B776D;

                }

                

                ul#navigation li a:hover

                {
    background-color:       #DAA851;

                }
                
                
                /* Inhalt */

                

                #inhalt{
    text-align: center; 
    clear: left;
    color: #0F9;
    margin-right: 200px;
    overflow: auto;
    min-height:450px;
    margin-left: 40px;
    margin-top: 60px;
    overflow:auto;
    padding-bottom: 20px;
    padding: 10px 20px;
    max-height: 550px;
    margin-bottom: 20px;
    
                }

                


                

                #footer{

                height: 30px;

                
                background-color: #373C38;

                color: white;

                    
                 position: absolute;
                 bottom: 0;

                }
 
oneFabs schrieb:
dass die Seite generell nicht das gesamt browserfenster ausfüllt
Zum Vergrößern anklicken....

Hallo.

Kann sie auch nicht.
Du gibst ihr ja nur 800px Breite.
Code: 
#box{
    width:800px;
    margin: 0 auto; 
    text-align: center;
    background-color: #373C38;
    position: relative;

Falls es um die Höhe geht:
Code: 
#inhalt{
    text-align: center; 
    clear: left;
    color: #0F9;
    margin-right: 200px;
    overflow: auto;
    min-height:450px;
    margin-left: 40px;
    margin-top: 60px;
    overflow:auto;
    padding-bottom: 20px;
    padding: 10px 20px;
    max-height: 550px;
    margin-bottom: 20px;
     }

Hier gibst du deinem Inhalt eine maximale Höhe von 550px

Gruss
Elroy
 
Zuletzt bearbeitet:
Danke schonmal.
Ja, es ging um die Höhe, das mit der Breite ist schon richtig so.

Nun ja, also das mit der "max-height" ist nurnoch vom experimentieren übrig geblieben. Außerdem muss es da ja auch eine max height geben, da ich ja den scrollbalken im Inhatsfenster haben möchte. Die Seite soll ja eben immer nur das gesamt Fenster füllen, nicht größer, nicht kleiner.
Deshalb such ich ja einen Weg irgendwie das "Box" div oder so variabel zu machen.

Ich hoffe jetzt ist es verständlicher (:
 
overflow: hidden; für den body.. für den div machst du overflow: scroll; ob das allerdings die Leute freut die mit Netbook oder iQuatsch unterwegs sind, ich weiß ja nicht..
http://www.css4you.de/overflow.html

PS: Du hast kein Doctype

PSS:
Du musst dem Box Element natürlich schon 100% höhe geben, dann noch die max height raus und du hast den Inhalt so wie du haben willst.. ich hab das hier mal gemacht, sieht aber schlimm aus, weiß ja nicht was du da alles für Angaben rein hast aber das würd ich dringent empfehlen nochmal sauber und aufgeräumt zu überarbeiten.

edit: Ok hab das mal kurz probiert und scheint mir komplizierter zu sein als ich angenommen habe. Tu dir am besten selbst einen Gefallen und nimm einfach die äußeren Scrollbalken. Kannst ja wenns umbedingt sein muss den Banner per position:fixed; oben festnageln irgendwie.
 
Zuletzt bearbeitet:
Okay, dann habe ich es mal mit Position:fixed probiert.
Allerdings habe ich ein Problem. Mit position:fixed kann man ja nur die absolute Position mittels "top" und "left" etc eingeben, ich brauche allerdings die Relative, da meine Seitenbreite ja variabel ist.

Kann mir da jemand helfen?
 
Ne, das ist doch nur zum zentrieren da oder nicht?

Also. Meine Navigationsliste ist in einer seperaten "div". Allerdings kann ich diese div ja nur durch "position:" an den rechten Seitenrand bekommen. Das Problem ist aber, wenn ich das ganze jetzt mit position:fixed positioniere ist es ja nicht relativ zur seitenbreite sondern eben genau wie wenn ichs mit "absolute" beschreiben würde.

Dann dachte ich mir als andere lösung packste einfach das ganze in noch nen div container, und positionierst den mit positon:relative und gibst dann dem untergeordneten element, also der Navileiste einfach position:fixed. Nur sobald ich das eingebe werden die "top" und "right" attribute für das "position:relative" vom übergeordneten Conainer ungültig und das ganze Gedöns ist schon wieder an der Urspurngsstelle, wo es ja nicht hin soll.

Entweder habe ich was grundlegendes in Sachen positionierung nicht verstanden, oder das ist verdammt kompliziert.

Ich würde mich wahnsinnig über Hilfe freuen!


EDIT: Okay, ich habe keine Ahnung was ich verstellt habe, aber auf einmal funktioniert alles. Ei, vielleicht sollte ich mich nochmal mit CSS grundlagen beschäftigen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben