Hallo!
Mir wurde heute "Blisk" als Browser und Emulator für Smartphones und Tablets empfohlen. Mich würde interessieren was Ihr davon haltet? Da ich arm an solchen Geräten bin, kann ich nicht wirklich testen ob der Emulator was taugt oder ob er - wie so viele - einfach nur die Webseite auf ein bestimmtes Seitenformat "zuschneidet".
Hier der Link zu Blisk:
https://blisk.io/
Bin gespannt auf Eure Meinungen.
Grüße,
Seiml
Hallo!
Hat sich inzwischen erledigt. Ich hab die Seiten jetzt selbst geschrieben. Is auch weitgehend so geworden wie ich das haben wollte. Vielen Dank Euch trotzdem.
Hier könnt Ihr´s Euch mal anschaun: bau.seitzfiktion.de -> runterscrollen oder auf "projekte" klicken -> dann kommen drei Layout-varianten. Welche ich davon nutzen werde, muss ich noch ausprobieren. Hab auch vor, noch ein paar mehr zu machen, aber zunächst reichen mal die vorhandenen.
Was mir jetzt noch Probleme macht sind die verschiedenen Browser. Im Firefox auf Win7 läuft die Seite so wie sie soll. Im Internetexplorer stimmt ziemlich viel nicht. Und wie das Ganze auf nem Mac oder im Smartphone aussieht weiss ich noch gar nicht. Könnt Ihr mir Tips geben, wie ich da ran geh? Ich hab schon versucht Browser-Emulatoren zu finden, aber die sind zum einen alle Kostenpflichtig und zum Anderen wurde hier im Forum auch schon Abgeraten von Emulatoren. Was mach ich nun? Alle Browser runterladen und installieren? Das mach ich ungern, aber notfalls mach ichs. Dann hab ich aber trotzdem noch kein Iphone und keinen Mac zum testen... Wie geht man da am besten vor???
Grüße,
Seiml
Ich stop den thread hier mal. Da ich noch weitere Fragen zu meiner Seite hab, mach ich mal hier weiter:
www.html-seminar.de/html-css-p…ber-zickt-noch/#post39625
Grüße,
Seiml
Hallo!
ich habe seit gestern meine erste Webseite online. Selbst geschrieben mit html und CSS (mehr kann ich nicht). Noch gibt es einige Problemchen, aber zumindest läuft sie schon mal grob.
Die Startseite mit Hauptmenü oben und Portfolio unten, sowie alle über´s Hauptmenü erreichbaren Seiten passen so grob.
Was noch fehlt sind einzelne Projektseiten. Also die Seiten die man durch das Portfolio auf der Startseite erreicht und auf denen einzelne Projekte präsentiert werden.
Ich bin gerade am Rumprobieren, tu mich aber relativ schwer diese einigermaßen gut hin zu bekommen. Wie gesagt - ich bin blutiger Anfänger auf dem Gebiet der Programmierung. Deshalb meine Frage ans Form:
Gibt es irgendwo fertige Codes die man vorübergehend einfach benutzen kann, ohne noch viel dran schrauben zu müssen?
Viele Details für diese Seiten sind mir momentan egal - wichtig is mir gerade nur daß die Seite mal zum Laufen kommt. Was ich aber trotzdem wichtig fände sind folgende vier Punkte:
- Das Menü sollte genauso aussehen wie auf den bestehenden Seiten.
- Programmierung nur in html und CSS, da ich die Seiten so am besten selbst editieren kann.
- Die Seite sollte so schlicht wie möglich sein. Große Bilder (teilw. Bildschirmfüllend) und kurze, erklärende Texte sollen der Inhalt sein.
- Ein Bildschirmfüllendes Startbild wäre sehr schön
Würd mich freuen wenn mir jemand Tipps geben könnte.
Grüße,
Seiml
Weiß jemand ob es eine Möglichkeit gibt, Scrollen auf Webseiten so zu gestalten, daß von Fullscreen-Bild zu Fullscreen-Bild gesprungen wird?
Also ich möchte ein Fullscreenbild als Startseite. Darunter befinden sich noch weitere Fotos die auch als Fullscreen angezeigt werden sollen. Durch Scrollen soll man zu den Fotos gelangen. Schön wäre, wenn die webseite nicht frei (stufenlos) nach unten scrollen würde, sondern sich jedes Bild automatisch so einstellt daß es komplett am Bildschirm gesehen werden kann. Daß es also den kompletten Bildschirm ausfüllt ohne daß man es per Mausrad ausrichten muß und ohne daß man oben oder unten die angeschnittenen Bilder sieht die drüber oder drunter liegen.
Is sowas möglich? Gibts da schon fertige Lösungen? Geht das rein mit CSS? (Javascript überfordert mich momentan noch stark).
(Ich bin mir auch nicht sicher ob das gut wirkt. Würde es jedoch gern mal ausprobieren.)
Würd mich freuen über Tips.
Grüße,
Seiml
Ok - ich probiers. Vielen Dank jedenfalls erst mal!
Grüße,
Seiml
Vielen Dank für Euer Mitdenken!
@ Basi:
Leider passt das nicht ganz zu meiner Seite. Die Startseite ist folgendermaßen aufgebaut: Im Hintergrund ein Vollbild (Foto). Darauf, am oberen Bildschirmrand, zentriert, das Menü (nur Text, durchsichtiger Hintergrund). Das Menü liegt also in Textform Quasi über dem Hintergrundbild. Deshalb kann sich auch nichts über das Menü schieben, denn der Hintergrund liegt unter dem Menü. Leider.
@ MrMurphy:
Du hast vollkommen recht. Ich dachte auch an ein doppeltes Menü. Eins das wegscrollt und eins das später wieder erscheint.
Du schreibst das gilt als schlechter Stil. Gibts nen grund dafür? Ich bin blutiger Anfänger im Programmieren. Bring mir alles selbst bei. Hab nicht so viel Ahnung von guten und schlechten Stilen und warum diese gut oder schlecht sind. Würde mich sehr freuen wenn Ihr mir das erklären könntet.
@ Alle:
Ich sträub mich ein bisschen vor Javascript (damit wäre mein Ziel recht einfach realisierbar, denk ich). Aus folgenden Gründen:
1. ich kenn mich damit noch gar nicht aus. Würde es deshalb gerne umgehen. Falls das nicht möglich ist, muß ich natürlich in den sauren Apfel beißen und mich da auch rein fuchsen.
2. ich hab bedenken daß Javascript meine Seite unsicher oder Anfällig für Manipulationen und Fremdzugriffe machen könnte. Hat mir mal jemand erzählt. Ich weiß aber auch nicht ob das stimmt. Habt Ihr Tips diesbezüglich?
Was empfehlt Ihr? Schlechten Stil oder Javascript? 
Grüße,
Seiml
Hallo!
ich versuche das Hauptmenü auf meiner Startseite auf spezielle Art zu programmieren. Code-Vorlagen habe ich bereits, jedoch schaffe ich es nicht, den Vorlagecode in meinen vorhandenen Code einzubinden. Irgendwie stehe ich am Schlauch. Wär nett wenn mir jemand helfen könnte.
Voraussetzungen für meine Startseite, die bereits erfolgreich programmiert sind:
- Beim Start erscheint ein Vollbild (responsive) als Hintergrund.
- Mittig ist ein Logo platziert.
- Oben, zentriert befindet sich das Hauptmenü.
- Durch Scrollen nach unten (oder Klick auf "Portfolio) gelangt man zum Portfolio welches aus Quadratischen Bildern auf weißem Hintergrund besteht.
- Alles soll in HTML und CSS programmiert sein. (Keine weiteren Programmiersprachen!)
--> Link zum Code: http://codepen.io/Seiml/pen/EKPPVQ
Mein Wunsch bezüglich des Hauptmenüs:
Da das Menü beim Scrollen oben verschwindet (das soll es auch), fehlt es unten beim Portfolio. Hier soll es wieder auftauchen! Es gibt diverse Lösungen die Java benutzen. Java möchte ich vermeiden. Deshalb würde ich gernd folgende Methode einbauen:
--> http://codepen.io/anon/pen/BKjomb
Nur wie? Wo muß ich was ändern. Bisher war leider keiner meiner Versuche erfolgreich. Würde mich freuen wenn mir jemand helfen könnte!
Browser:
Momentan teste ich im Firefox. Soll letzlich aber auch auf Chrome, Internet-Explorer, Safari und diversen Handys funktionieren.
Grüße,
Seiml
ps: hoffe das ist ok, daß ich den code bei codepen hochgeladen und hier nicht gepostet habe. Falls nicht, bitte bescheidsagen. Dann lade ich ihn hier auch noch hoch. Danke.
Hallo!
leider hänge ich schon wieder an einer Sache fest. Vielleicht kann mir nochmal jemand helfen. Wär super!
Meine Startseite zeigt ein Vollbild als Hintergrund. Vor dem Vollbild soll mittig mein Logo erscheinen. Dieses soll etwa zwei Drittel der Browserfensterbreite einnehmen - egal wie groß das Fenster gerade ist. Ich habe das Logo als PNG-Grafik - daß der Hintergrund des Logos durchsichtig ist. Da sich die Größe des Logos je nach Bildschirm bzw. Browserfenstergröße verändert, wär vielleicht eine Vektordatei besser - oder? Könnte ich mit Indesign erstellen.
Ich schaffs nicht, das Logo mittig und responsive über das Hintergrundbild zu legen. Hat da jemand ne Idee wie man das macht? Oder gibts schon irgendwo eine Anleitung (ich find leider nirgends was brauchbares).
(sollte dann ungefähr so aussehen wie in folgendem Wordpress-Theme: https://themify.me/demo/themes/landing/ - nur dass eben mein Logo anstelle von Schrift mittig plaziert wird.)
bisherige Codes:
index.html:
<!DOCTYPE html> <!-- sagt dem Browser welche Art von Befehlen benutzt werden -->
<html> <!-- Anfang des HTML -->
<head> <!-- enthält Metainformationen d. Seite (Titel, etc.) -->
<meta charset="UTF-8" />
<title>Meine Website</title> <!-- wird im Browserfenster angezeigt. Überschrift die in Suchmaschinen angezeigt wird -->
<meta name="description" content="Kurzbeschreibung" />
<link href="style.css" type="text/css" rel="stylesheet" /> <!-- Verweis auf CSS -->
<link href="navigation.css" type="text/css" rel="stylesheet" />
</head>
<body id="home"> <!-- enthält eigentliche Inhalte der Seite -->
<!-- STARTBILDSCHIRM -->
<header id="startbildschirm">
<ul id="navi"> <!-- Hauptmenü -->
<li id="navi01"><a href="index.html">Home</a></li> <!-- Menü-Link zur Startseite -->
<li id="navi02"><a href="index.html#portfolio">Projekte</a></li> <!-- Sprung-Link zu Projekte -->
<li id="navi03"><a href="vita.html">Vita</a></li> <!-- Menü-Link zu Vita -->
<li id="navi04"><a href="impressum.html">Impressum</a></li> <!-- Menü-Link zum Impressum -->
</ul>
</header>
<!-- PORTFOLIO -->
<ul class="portfolio-gruppe" id="portfolio"> <!-- Anfang des Portfolios -->
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
<a href="produkt-blechzoo.html" class="portfolio-projekt"> <!-- Link zu einem Portfolio-Objekt -->
<img src="bilder/blechzoo_300x300.jpg" alt="zum Blechzoo" /> <!-- Link zu einem Portfolio-Bild -->
</a>
</ul>
</body>
</html>style.css:
* {
box-sizing: content-box;
}
header { /* betrifft den Header */
border: solid red;
background: transparent url(bilder/weltfullhd.jpg) no-repeat center top; /* Hintergrundbild auf Startseite, horizontal zentriert */
background-size: cover; /* für Vollbild auf Startseite */
height: 100vh; /* für Vollbild auf Startseite */
margin-bottom: 0px; /* Abstand unterm Header */
}
#logo { /* Logo - Ausrichtung */
border: solid yellow;
}
body { /* betrifft den Body */
font-size: 100%; /* Schriftgröße */
font-family: verdana, arial, helvetica, sans-serif; /* Schriftart */
margin: 0;
}
/* PORTFOLIO: */
#portfolio { /* Abstände, Ausrichtung, etc. definieren */
width: 90%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
/* "Flexbox" - zur Anordnung der Portfolio-Bilder*/
.portfolio-gruppe { /* ganzer Block mit allen Projekten */
border: 0px solid blue;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.portfolio-projekt { /* einzelne Projekte */
border: 0px solid red;
width: 300px; /* Bildgröße - wie echt */
height: 300px; /* Bildgröße - wie echt */
margin: 25px; /* Abstand ums Bild auf allen Seiten */
}navigation.css:
/* waagerechtes Menü, ohne Aufzählungszeichen */
#navi li { /* betrifft alle "li-Elemente" im Bereich "navi" in den HTML-Dateien */
display: inline; /* Listenelemente nebeneinander */
list-style-type: none; /* Aufzählungszeichen entfernen */
}
/* MENÜPUNKTE: Ausrichtung, Abstände, Hintergrund etc. definieren */
#navi {
padding: 20px;
margin: 0px;
text-align: center; /* Menü zentrieren */
}
/* MENÜPUNKTE: Text formatieren */
#navi a { /* Gestaltung der Hyperlinks */
text-decoration: none; /* Unterstreichung entfernen */
padding: 20px 20px; /* oben&unten re&li */
color: white; /* Schriftfarbe */
font-size: 18px; /* Schriftgröße - festgelegt für ältere Browser */
font-size: 1rem; /* Schriftgröße - relativ. 1rem = Standardschriftgröße des Browsers (i. d. R. 16px), sofern im Elternelement für Schriftgröße 100% eingestellt ist */
}
/* Farbänderung bei Mouseover */
#navi a:hover {
color: #EDEDF8;
}
/* aktuellen Menüpunkt hervorheben: */
#navi, /* im Hauptmenü... */
#home #navi01 a, /* ...werden alle Hyperlinks mit der ID navi01, die in einer Kiste mit der ID home liegen... */
#vita #navi03 a, /* ...werden alle Hyperlinks mit der ID navi03, die in einer Kiste mit der ID vita liegen... */
#impressum #navi04 a { /* ...werden alle Hyperlinks mit der ID navi04, die in einer Kiste mit der ID impressum liegen... */
color: #C3D9FF; /* ...eingefärbt */
}
/* bis zur nächsten SPRUNGMARKE scrollen statt springen */
html {
scroll-behavior: smooth;
}Grüße,
Seiml
Das Bild am Startbildschirm zentriert darzustellen würde funktionieren wenn ich folgende codes einfüge:
in der index.html folgendes einfügen
<header id="startbildschirm">
<div id="logobox">
<img id="logo" src="bilder/logo.png" />
</div>
</header>style.css
header { /* betrifft den Header */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}Jedoch wird dann auch das Hauptmenü in der Mitte des Bildschirms angezeigt statt am oberen Rand - sowie sämtliche weitere Inhalte der Webseite, wenn man welche hinzufügt. Verkleinert man das Browserfenster kanns passieren daß das Menü am oberen Bildschirmrand aus dem Bild geschoben wird (sobald das Browserfenster kleiner als das Logo wird). 
Und das Logo is auch noch nicht "responsive". Bleibt also immer gleich groß, was dazu führt daß es bei stark unterschiedlichen Bildschirmgrößen entweder vergleichsweise winzig sein kann oder größer als der Bildschirm - also beschnitten wird.
Es bleiben die Fragen:
Wie kann ich die Zentrierung des Logos vom Menü trennen? Wie mache ich das Logo "responsive"?
Was halten die Profis von meiner Zentrierungsmethode? Kann man damit weiterarbeiten oder würdet Ihr ganz anders vorgehen?
Grüße,
Seiml
Perfekt - Funktioniert!
Das mit den Rändern hab ich noch nicht ganz auf´m Kasten. Muss ich mich nochmal reinfuchsen.
Jetzt kanns weitergehen...
Vielen Dank jedenfalls für die Erklärungen und die Gedult.
Grüße,
Seiml
ich probiers mal:
index.html:
<!DOCTYPE html> <!-- sagt dem Browser welche Art von Befehlen benutzt werden -->
<html> <!-- Anfang des HTML -->
<head> <!-- enthält Metainformationen d. Seite (Titel, etc.) -->
<meta charset="UTF-8" />
<title>Meine Website</title> <!-- wird im Browserfenster angezeigt. Überschrift die in Suchmaschinen angezeigt wird -->
<meta name="description" content="Kurzbeschreibung" />
<link href="style.css" type="text/css" rel="stylesheet" /> <!-- Verweis auf CSS -->
<link href="navigation.css" type="text/css" rel="stylesheet" />
</head>
<body id="home"> <!-- enthält eigentliche Inhalte der Seite -->
<header id="startbildschirm">
<ul id="navi"> <!-- Hauptmenü -->
<li id="navi01"><a href="index.html">Home</a></li> <!-- Menü-Link zur Startseite -->
<li id="navi02"><a href="projekte.html">Projekte</a></li> <!-- Menü-Link zu Projekte -->
<li id="navi03"><a href="vita.html">Vita</a></li> <!-- Menü-Link zu Vita -->
<li id="navi04"><a href="impressum.html">Impressum</a></li> <!-- Menü-Link zum Impressum -->
</ul>
</header>
<a href-"portfolio/produkt-blechzo.html">Blechzoo</a>
<p>
blablablablablablablablablablablablabla blablablablablabl ablablablablablablabl ablablablablablablablablablabla blablablablablablablablab lablablablablablablablablablabl abl ablablablablablablablabl ablablablablab lablablablablab lablablablabblablablablablablablablablablablablabla blablablablablabl ablablablablablablabl ablablablablablablablablablabla blablablablablablablablab lablablablablablablablablablabl abl ablablablablablablablabl ablablablablab lablablablablab lablablablab
</p>
<p>
blablablablablablablablablablablablabla blablablablablabl ablablablablablablabl ablablablablablablablablablabla blablablablablablablablab lablablablablablablablablablabl abl ablablablablablablablabl ablablablablab lablablablablab lablablablabblablablablablablablablablablablablabla blablablablablabl ablablablablablablabl ablablablablablablablablablabla blablablablablablablablab lablablablablablablablablablabl abl ablablablablablablablabl ablablablablab lablablablablab lablablablab
</p>
<p>
blablablablablablablablablablablablabla blablablablablabl ablablablablablablabl ablablablablablablablablablabla blablablablablablablablab lablablablablablablablablablabl abl ablablablablablablablabl ablablablablab lablablablablab lablablablabblablablablablablablablablablablablabla blablablablablabl ablablablablablablabl ablablablablablablablablablabla blablablablablablablablab lablablablablablablablablablabl abl ablablablablablablablabl ablablablablab lablablablablab lablablablab
</p>
</body>
</html>style.css
header { /* betrifft den Header */
background: transparent url(bilder/weltfullhd.jpg) no-repeat center top; /* Hintergrundbild auf Startseite, horizontal zentriert */
background-size: cover; /* für Vollbild auf Startseite */
height: 100vh; /* für Vollbild auf Startseite */
border: 1px dashed red;
margin-bottom: 50px; /* Abstand unterm Header */
}
body { /* betrifft den Body */
font-size: small; /* Schriftgröße */
font-family: verdana, arial, helvetica, sans-serif; /* Schriftart */
border: 1px dashed blue;
}
p { /* betrifft die Absätze */
max-width: 600px; /* maximalbreite des Absatzes */
margin: 0 auto 20px; /* Abstand zwischen den Absätzen */
}navigation.css
#navi li { /* betrifft alle "li-Elemente" im Bereich "navi" in den HTML-Dateien */
display: inline; /* Listenelemente nebeneinander */
list-style-type: none; /* Aufzählungszeichen entfernen */
}
#navi { /* Hintergrund Abstände, Ausrichtung, etc. definieren */
padding: 4px 0;
margin: 0;
}
#navi a { /* Gestaltung der Hyperlinks */
color: black; /* Schriftfarbe schwarz */
text-decoration: none; /* Unterstreichung entfernen */
padding: 4px 8px; /* oben/unten 4px, re/li 8px */
}
#navi a:hover { /* Farbänderung bei Mouseover */
color: #EDEDF8;
}
/* aktuellen Menüpunkt hervorheben: */
#navi, /* im Hauptmenü... */
#home #navi01 a, /* ...werden alle Hyperlinks mit der ID navi01, die in einer Kiste mit der ID home liegen... */
#vita #navi03 a, /* ...werden alle Hyperlinks mit der ID navi03, die in einer Kiste mit der ID vita liegen... */
#impressum #navi04 a { /* ...werden alle Hyperlinks mit der ID navi04, die in einer Kiste mit der ID impressum liegen... */
color: #C3D9FF; /* ...eingefärbt */
}
/* Menü zentrieren */
#navi {
text-align: center;
margin: 0;
padding: 0;
}Leider wird´s nicht farbig (mach ich was falsch?). Hierfür bitte doch nochmal den Link zu codepen probieren.
Vielen Dank!
Seiml
Super! Vielen Dank für die ausführlichen Erklärungen. Dann werd ich mir die verschiedenen Möglichkeiten mal ansehen.
Grüße,
Seiml
Sorry - das is alles völlig neu für mich. Ich bemüh mich, mein Bestes zu geben!
Ich hab den code jetzt auf codepen hochgeladen und in obigem Beitrag einen Link gesetzt.
Leider hab ich nicht verstanden wie das mit dem BB-Code funktioniert. Ich hoffe der Link zu codepen genügt. Falls nicht - gebt bitte bescheid.
Ich hab den HTML-code mal validieren lassen. Zwei Fehler werden gemeldet:
Vielen Dank schon mal.
Grüße,
Seiml
Teilerfolg: die Fehler die beim validieren gemeldet wurden sind erledigt.
Ich hatte den header außerhalb des body. Das war falsch. Hab ihn nun in den Body kopiert und die Fehlermeldung verschwindet beim validieren.
Auf das Problem mit dem Rand hatte das jedoch keine Auswirkung. Der besteht weiterhin.
Hallo!
ich bin dabei eine Website mit Vollbild auf der Startseite zu erstellen. Das hat auch gut funktioniert solange ich das Bild im body hatte. Da ich jedoch den Body für ein Portfolio (mit einfarbigem Hintergrund) benötige habe ich für das Vollbild noch einen header angelegt. Seitdem erscheint um alle Seiten ein weißer Rand. Das Vollbild geht also nicht mehr ganz bis zum Browserrand. Weiß jemand woran das liegt?
Rahmenbedingungen
HTML-Version: 5
zusätzliche Techniken:
Einschränkungen:
Browser & Betriebssystem: Firefox 41.0.1 & Windows 7 pro
Editor: Sublime Text 2
Problembeschreibung
Fehlermeldung/-beschreibung: siehe oben
bisherige Lösungsversuche: bin eigentlich grob nach diesem Tutorial vorgegangen: https://www.youtube.com/watch?v=hExwnLlj2xk Hier funktioniert der code problemlos.
Vielen Dank! Hab das mal so gemacht wie Du sagtest, daß ich die Nav, also die Liste aller Punkte des Hauptmenüs, in alle HTML-Seiten eingetragen hab. Das Funktioniert auch.
Ich dachte es gäbe eine Möglichkeit diese Liste in einer extra-Datei zu schreiben und dann in allen HTML-Dateien einfach nur einen Verweis zu dieser Datei zu setzen. Das würde Änderungen am Menüinhalt erleichtern, weil man diese nicht in jeder HTML-Datei ändern müßte.
Falls das möglich ist, würde ich mich über eine Nachricht freuen.
Grüße,
Seiml
Hallo!
ich bin ganz neu hier, weil ich vor ca. zwei Wochen angefangen habe mir mittels dieser Seite HTML und CSS beizubringen. Durch das Seminar bin ich weitgehend durch. Jetzt versuche ich meine erste Webseite nach meinen Vorstellungen zu erstellen, hab jedoch noch einige Start-Probleme und würde mich freuen wenn mir jemand helfen könnte.
Kurze Beschreibung der Webseite die ich bauen möchte:
- Startseite soll ein Vollbild als Hintergrund zeigen welches so groß ist wie das Browserfenster. Darüber liegt mein Logo (png-datei mit durchsichtigem Hintergrund). Oben, mittig ist das Hauptmenü - bestehend aus Schrift ohne Hinterlegung.
- Die Startseite soll nach unten zu meinem Portfolio scrollbar sein. Unter dem Vollbild kommt weißer Hintergrund auf welchem Bilder von Projekten zu sehen sind. Klick auf ein Bild führt zu Seiten über das jeweilige Projekt.
- Übers Hauptmenü kommt man zu weiteren Seiten wie "Impressum", "Über mich", "Kontakt" etc.
Ich habe bisher einige Seiten als HTML angelegt und mit Beispielinhalten gefüllt. (index.html, impressum.html, uebermich.html,). Außerdem die style.css. Den Code für das Hauptmenue hab ich auch schon.
Fragen:
1. wie lege ich nun mein Hauptmenue an, so daß es auf allen Seiten erscheint? Muß ich es in die index.html integrieren? Oder muß ich eine extra HTML-Datei anlegen in der nur der Code für das Menü steht? In beiden Fällen wüßte ich nicht wie ich es schaffe das Menü dann auf den einzelnen Seiten anzuzeigen. Oder wird das ganze Menü im CSS geschrieben? Oder denk ich völlig falsch?
2. Ich bin mir noch unklar wie ich die Ordnerstruktur meiner Website anlegen soll. Also wie ich die HTML-, CSS- und sonstigen Dateien sortieren soll. Gibt es hierfür irgendwo sinnvolle Beispielvorschläge?
Würde mich freuen wenn mir jemand weiterhelfen könnte. 
Vielen Dank schon mal.
Grüße,
Seiml