Höhe Webseite verkleinern

Trafficpoint · 27. März 2014

Hallo liebe Community,

ich erstelle gerade meine erste Webseite und bin blutiger Anfänger. Ich schaffe es auf der folgenden Seite einfach nicht die Höhe der Webseite zu verkleinern. Kann mir jemand weiterhelfen.

Hier die URL der Seite: http://www.ismail.bplaced.net/webdesign-hannover.html

Und hier die relevante Stelle im Quellcode:

CSS

body {
margin:0;
padding:0; 
width:400px; 
height:1150px; 
background-image: url(balek.jpg); 
background-size:1000px 1150px; 
background-repeat: repeat-x;
}

Danke für eure Hilfe

unkown-6363 · 27. März 2014

Hallo und herzlich Willkommen im Forum!

Hast du HTML5 & CSS schrittweise gelernt? Sieht nicht so aus ... oder du hast ein schlechtes Buch ..
Du solltest hieram besten anfangen mit lernen.

Bei deinem Layout scheint so einiges nicht hinzuhauen.
Bin kein Experte, aber so sollte man sicherlich nicht für sich als Webdesign-Agentur werben xD

Dein <html> block ist 1500px hoch.

Warum wirbst du mit HTML5, wenn du das nicht mal selber verwendest ..

Und was hat das im Screenshot zu sehende für einen Sinn? So viele <style>...
html-seminar.de/woltlab/attachment/538/

Bei Problemen und Fragen aller Art eifnach Fragen. Hier beißt keiner

wolf · 27. März 2014

Ich darf mal ganz lieb empfehlen, sich diese liste zum Thema html5 anzuschauen: http://www.html-seminar.de/befehlsuebersicht.htm
Außerdem das hier zum Thema CSS(3) http://www.html-seminar.de/css-lernen.htm

Persönlich empfehle ich, HTML und CSS KLAR zu trennen,
also NICHT so etwas zu bauen:

HTML

<body style="width:200px">

Sondern besser:

HTML

<body>

CSS

body{
    width: 200px;
}

Da lassen sich Fehler schneller finden

Außerdem lassen sich alle styles in EINEN

HTML

<style></style>

Block packen!
Beispiel:

HTML

<!DOCTYPE html><!-- Html 5 Doctype -->
<html>
<head>
    <style type="text/css">
        body{
            width: 100%;
            height: calc(100% - 30px);
            background-color: yellow;
            color: #FFF;
        }
        header{
            background-color: rgba(255,255,255, .5);
        }
        nav{
            width: 50%;
            height: 100px;
            border-left: 3px solid #777777;
        }
        nav.subnav{
            background-color: rgba(0,0,0, 1);
        }
    </style>
</head>
<body>
    <header>
        <nav>
            <ul>
                <li>Hauptpunkt 1</li>
                <li>Hauptpunkt 2</li>
                <li>Hauptpunkt 3</li>
            </ul>
        </nav>
    </header>
    <aside>
        <nav class="subnav">
            <ul>
                <li>Unterpunkt 1</li>
            </ul>
        </nav>
    </aside>
</body>
</html>

Alles anzeigen

Man kann dir übrigens leere Mails schicken

Trafficpoint · 27. März 2014

Hallo Wolf,

danke für dein Feedback. Also bitte die seite nicht inhaltlich bewerten. Sie dient nur zur Übung. Das nächste mal werde ich CSS und HTML klar trennen und CSS von einer externen Datei einbinden. Die unnötigen Tags <style> habe ich entfernt. Da habe ich auch einige Böcke gefunden. Zum Teil waren einige Elemente durch das abschließende } geschlossen. Das Problem konnte ich aber immer noch nicht lösen.

Ich schau mir deine vorgeschlagenen Seiten mal an und versuche eine Lösung zu finden. Danke.

wolf · 27. März 2014

Außerdem würde ich empfehlen so wenig wie möglich mit Grafiken zu arbeiten, z.b. den Hintergrund mit css lösen statt mit nem Bild, genauso den header Balken(weiß)

http://www.colorzilla.com/gradient-editor/
Hier kannst du auch einfach mit css n Hintergrund erstellen..!

Trafficpoint · 27. März 2014

Ich habe noch einige Fehler entdeckt. In Zukunft werde ich mehr mit background-color arbeiten anstatt so viele Bilder zu nehmen. Den blöden Fehler konnte ich aber immer noch nicht lösen. Das Hinertgrundbild kommt nur in CSS vor und im HTML-Bereich vor:

CSS

body {
margin:0;
padding:0; 
width:400px; 
height:800px; 
background-image: url(balek.jpg); 
background-size:1000px 1150px; 
background-repeat: repeat-x;
}

Liegt des vielleicht daran?

ich meinte, dass das Hintergrundbild garnicht im HTML-Bereich behandelt wird. Könnte dort die Problemquelle sein?

wolf · 27. März 2014

Verstehe nicht was das Problem ist?

Bitte setze deine Codes in die dafür vorgesehenen BB Codes (Buttons)
Dies trägt zur lesbarkeit bei.
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/bbcode.png]

Außerdem, gewöhne dir an deinen Code so zu schreiben:

CSS

body {
    margin:0;
    padding:0;
    width:400px; 
    height:800px;
    background-image: url(balek.jpg);
    background-size:1000px 1150px;
    background-repeat: repeat-x;
}

Außerdem würde ich keine Größen px angaben für body machen, weiterhin, background-size eher auf 100% 100% setzen..

Trafficpoint · 28. März 2014

Hallo Wolf,

danke für deine Tipps. Ich habe alle Bilder ausgetauscht und stattdessen background-color verwendet. Habe den Code umgebaut und konnte das Problem dann lösen und zwar mit der folgenden Lösung:

CSS

html, body {
margin:0;
padding:0;
height:128%;
overflow:hidden;
background-color:silver;
}

Für die Höhe des Dokuments habe ich einen Prozentwert angegeben. Ich denke jetzt kann sich die Seite schon sehen lassen. kannst dir auch gerne den Quellcode anschauen. Vielleicht gibt es
ja noch was zu bemängeln außer dass ÇSS in einer separaten Datei erstellt wird.

Hier noch mal der Link: http://www.ismail.bplaced.net/webdesign-hannover.html

The Scout · 28. März 2014

Bist du dir sicher? Schau mal, wo zB das Logo sitzt.
Firefox 27, Auflösung 1280x800.
Was ich auch sehr witzig finde ist: Wenn man in Vollbild schaltet, bleibt das Logo an seiner Position, verhält sich also wie

CSS

position: fixed;

Irgendwie nicht Sinn der Sache, oder?

Und noch ein Tipp: Lagere in Zukunft dein CSS in eigene Datei aus, wie das geht, steht im HTML Seminar. Ist besser für die Performance und für dich, da du dann bei mehreren Seiten nur noch ein File ändern musst, um auf allen Seiten das Design zu ändern. Außerdem kann das Stylesheet dann gecached werden.

Und drittens: Bitte beherzige den Tipp von wolf, zur Codeformatierung hier im Forum:

Code

[code=php]Dein PHP Code

SQL

Dein mySQL Code

CSS

Dein CSS Code

HTML

Dein HTML Code

JavaScript

Dein JavaScript Code

[/code]Dadurch bleiben Einrückungen erhalten und es gibt Syntax Highlighting.

Trafficpoint · 28. März 2014

Hallo,

also das Problem mit dem Logo konnte ich soweit beseitigen. Ich habe die Position einfach auf static gesetzt . Zudem habe ich die Seite so eingestellt, dass wenn man sie verkleinert zentriert dargestellt wird, so wie das bei den meisten Webseiten im Netz der Fall ist.

Wenn ich die Webseite verkleinere gibt es keine Probleme. Alles wird korrekt angezeigt.

Problem: Wenn ich die Website vergrößere. Kann man wegen overflow:hidden nicht runterscrollen, Hat jemand eine Lösung?

unkown-6363 · 28. März 2014

Trafficpoint:

Tipp. Wenn du das ganze Layout umstellen willst, kann es auch mal sehr hilfreich sein alles neu zu coden.
Dabei findet man selbstständig optimierungsmöglichkeiten (du kennst deinen code selber besser als wir).

außerdem ist ein overflow:hidden; für body{} bzw html{} in der Regel nicht nötig, wenn man sein Layout sauber aufbaut. Du musst da irgendwo Mist drin stehen haben der das bewirkt!

Trafficpoint · 28. März 2014

Scheint ganz zu sein.

Das zentrale Problem besteht darin, dass ich über body { width: und height: } die Höhe und Breite nicht steuern kann. Aus welchem Grund auch immer. War auch meiner erste Website. Also beim nächsten mal gehe ich auf jeden Fall anders vor. Es ist jetzt auch sehr müßig nach der Ursache zu suchen.

wolf · 28. März 2014

An deiner stelle würde ich komplett neu anfangen, mit html 5 Grundgerüst und css3, gestalten ähnlich wie die Alte aber ohne alles unnötige.

unkown-6363 · 28. März 2014

Zitat von Trafficpoint

, dass ich über body { width: und height: } die Höhe und Breite nicht steuern kann..

Die Höhe und Breite steuert man auch über das Layout und die Anzahl der Inhalte und nicht über den body-container

Trafficpoint · 2. April 2014

Hallo Wolf,

ich habe die Seite neu gecoded nach HTML5 nach deinem Beispiel. Ich habe sehr genau auf mögliche Fehlerquellen geachtet. Jetzt passt die Höhe, aber dafür kann ich die Breite der Seite nicht einstellen. Die neu gecodete Seite findet sich unter der folgenden URL: http://www.ismail.bplaced.net/home1.html

The Scout · 2. April 2014

Das ist aber kein HTML 5 , sondern HTML 4.0 Transitional, zumindest dem Doctype nach.

Hier mal ein Einstieg fuer dich:

HTML

<!Doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Der Seitentitel</title>




    <meta name="description" content="Eine kurze Seitenbeschreibung" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- IE zur Anzeige mit modernsten Mitteln zwingen -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- Damit mobile Geraete keine komischen Skalierungen vornehmen -->




    <link rel="stylesheet" href="link-zur.css" /> <!-- Pfad anpassen -->
    <script src="link-zum.js"></script> <!-- Pfad anpassen.
      -- Man kann auch ein async="async" oder ein defer="defer" einfuegen.
      -- Asynchron laden und entweder direkt ausfuehren, oder wenn die Seite auch fertig ist
      -->
  </head>




  <body>
    <!-- Dein Seitencontent, Anlehnung an deine Aufteilung -->




    <header>
      <nav>
      </nav>
    </header>




    <aside>
      <nav>
      </nav>
    </aside>




    <section>
    </section>




    <footer>
    </footer>
  </body>
</html>

Alles anzeigen

Viel Spass!

wolf · 2. April 2014

Dein doctype (erste Zeile) sollte so aussehen:

HTML

<!DOCTYPE html>

Das hier darfst du duchs 2. ersetzen:

HTML

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />




<!-- WIrd zu diesem hier: -->
<meta charset=UTF-8" />

-Das Element <li> für Liste sollte auch so geschrieben werden ..
- Abstände bitte nicht mit <br>'s lösen..
Und Bitte NICHT so:

HTML

<nav>
      <ul>
        <il>Über Uns<br><br></il>
        <il>Unser Konzept<br><br></il>
        <il>Kontakt<br><br></il>
      </ul>
</nav>

Lieber so:

HTML

<nav>
	<ul>
		<li>Punkt 1</li>
		<li>Punkt 2</li>
		<li>Punkt 3</li>
	</ul>
</nav>
<style>
 
        nav li a{
		/* Damit nicht nur der Text klickbar ist */
		display: block;
		/* Für den Abstand */
		padding: 10px;
	}
</style>

Alles anzeigen

Ebenfals hier:

HTML

<!-- hier die <br>'s lieber mit paddings/margins lösen : -->
<h1><br>Trafficpoint - die Internetagentur für Hannover!</br></h1>
 <p><br> [...] und operative Umsetzung ihres Social-Media-Auftritts,
<!-- "<br><br>"   >>  Hier lieber n 2. <p> Tag anfangen.. : -->
Webtracking und -analytics.<br><br>Die Implem [...]

Trafficpoint · 13. Mai 2014

Hallo Wolf,

ich habe in der Zwischenzeit ein wenig weiter geübt und meine Homepage in HTML5 gecoded. Die Seite wird mittlerweile bei allen relevanten Webbrowsern wie Firefox, Explorer und Chrome korrekt dargestellt. Die Kontaktformulare und die Anbindung meines Newsletters an meine MySQL-Datenbank funktionieren ebenfalls. Ich habe allerdings noch ein kleines Problem. Die horizontale und vertikale Navigationen sind beide unterstrichen, obwohl CSS was anderes befiehlt. Hier ein Link: http:www.trafficpoint-hannover.de/s…optimierung-hannover.html

Hier der entsprechende Befehl in der CSS-Datei:
a:link {font-weight:bold; text-decoration:none; color:#000;}
a:visited {font-weight:bold; text-decoration:none; color:#000;}
a:focus {font-weight:bold; text-decoration:none; color:#000;}
a:hover {text-decoration:blink; color:#000;}
a:active {font-weight:bold; text-decoration:none; color:#000;}

Danke.

wolf · 13. Mai 2014

einfach

CSS

a{
    text-decoration: none;
}

The Scout · 13. Mai 2014

CSS

text-decoration: blink;

Nicht dein Ernst, oder? Augenkrebs ...

Und immer noch, dein Doctype (erste Zeile im HTML) ist falsch.

HTML

<!-- Das hast du (XHTML 1 Transitional): -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">




<!-- Das ist der für HTML 5 -->
<!doctype html>

Und guck mal hier: W3C Validator. Der gibt immer gute Ansatzpunkte, was noch zu ändern ist.

Höhe Webseite verkleinern

Jetzt mitmachen!

Teilen