php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 26-04-2010, 03:57
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard DIV 100% horiz. füllen, auch bei scrollen

Okay, sorry für den etwas wirren Titel.
Ich weiss nicht wie ich das besser beschreiben könnte in einem Satz.

Es geht darum, dass ich einen Header und Footer habe, welche beides schwarze DIVs sind die 100% breite bekommen haben per CSS.

Das passt auch ganz gut solange man nicht vertikal scrollen muss.
Sobald es aber ein Element hat, welches eine feste Grösse hat (zB ein Bild mit 800px Breite) und dieses das Browserfenster zwingt zu scrollen, wird die 100% Angabe vom DIV nur auf das Browserfenster gemessen und nicht auf die "effektive Breite der Homepage".

Ich denke dies ist korrektes Verhalten von CSS, da 100% nunmal auf das Sichtbare im Browserfenster bezogen sind.

Ich habe einen kleinen Video gemacht vom Verhalten:
YouTube - CSS Unschönheit

Noch einige Angaben zum Code (lediglich den Container und den Header):
Code:
#container {
	min-height: 100%;
	position: relative;
	margin-left: 0;
	margin-right: 0;
	background-color: #ADF;
}

#header {
	background-color: #111;
	color: #EEE;
	padding: 10px;
	padding-top: 40px;
	border-bottom: 40px solid #FFF;
	letter-spacing: 1px;
	width: auto;
	right: 0px;
}
Code:
 <div id="container">
            <div id="header">
                NEW DESIGN
            </div>

... Restlicher Code
Die Seite ist als XHTML 1.0 Strict deklariert.

Wie gesagt, ich denke nicht, dass es ein "Fehler" vom Code ist, alles ist valide (HTML als auch CSS) und verhält sich wie es sollte.
Aber ich hätte gerne, dass die schwarzen Balken gestreckt werden auf das sichtbare und nicht nur das Browserfenster selbst.

Ich hatte bereits gedacht, ich könnte den Header und Footer in der Breite auf 4'000px definieren und irgendwie dafür sorgen, dass einfach diese beiden Elemente keine vertikalen Scrollleisten verursachen.
Aber irgendwie find ich einfach nicht heraus wie man das machen könnte. Bin wohl auch schon etwas zu müde, aber das beschäftigt mich gerade und lässt mich nicht los.

Weiss jemand wie ich das lösen könnte?
Mit Zitat antworten
  #2 (permalink)  
Alt 26-04-2010, 10:11
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Hallo,

das mit dem Video ist ja ganz nett gemeint, aber die 5 Zeilen HTML lassen nichts über die Struktur des Dokuments erkennen und das CSS ist gespickt mit Angaben, die irgendwie keinen so richtigen Sinn machen, weil sie vermutlich die Reste zahlloser Versuche sind.

Am besten wäre ein Onlinebeispiel, um es sich direkt anzusehen.

Gruß,

Amica
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #3 (permalink)  
Alt 26-04-2010, 12:10
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ich hab es mal auf Dropbox geladen:
Link zum Beispiel

Du hast recht, im CSS hatte es noch viele andere Eigenschaften drin, die eigentlich nicht nötig sind (hauptsächlich die margin/padding: 0).
Ich hab die kurz mal aus dem CSS entfernt um es ein wenig übersichtlicher zu machen.

Ich habe vor dem Einschlafen noch etwas gedacht.
Den oberen Balken könnte ich mit einem background-image im Body machen, den unteren aber nicht, da der sich ja in der Position verändert.
Naja, es ginge relativ einfach auch beim unteren, aber dann fehlt die verflixte IE-Kompatibilität.
Mit Zitat antworten
  #4 (permalink)  
Alt 26-04-2010, 12:31
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Ok, jetzt sehe ich den Grund. Du verwendest absolute Positionierung, d. h. dass die auf diese Weise positionierten Elemente aus dem Flow genommen werden und deren effektive Größe damit unabhängig von den Elternelementen ist. Der body passt sich ja normalerweise seinen Kindern an, aber nur, wenn diese sich im Flow befinden.

Ich würde an deiner Stelle einfach mit float arbeiten und das div#trennlinie halte ich für eine schlechte Idee.
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #5 (permalink)  
Alt 26-04-2010, 12:44
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Okay werde ich am Nachmittag mal schauen.
Header, Navi und Content kann man mit float machen, machte ich Anfangs auch, dann aber durch endloses Ausprobieren wohl auf absolut gestellt.

Aber den Footer kann ich ja nicht mit float positionieren.
Damit der ganz unten am Browser ist, muss er ja mittels absolut positioniert sein.
Mit Zitat antworten
  #6 (permalink)  
Alt 26-04-2010, 13:23
AmicaNoctis
  Moderatorin
Links : Onlinestatus : AmicaNoctis ist offline
Registriert seit: Jul 2009
Beiträge: 5.709
Blog-Einträge: 9
AmicaNoctis sorgt für eine eindrucksvolle AtmosphäreAmicaNoctis sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von fabio Beitrag anzeigen
Aber den Footer kann ich ja nicht mit float positionieren.
Damit der ganz unten am Browser ist, muss er ja mittels absolut positioniert sein.
Das stimmt, also meinst du sowas?
__________________
Hast du die Grundlagen zur Fehlersuche gelesen? Hast du Code-Tags benutzt?
Hast du als URL oder Domain-Beispiele example.com, example.net oder example.org benutzt?
Super, danke!
Mit Zitat antworten
  #7 (permalink)  
Alt 26-04-2010, 15:28
fabio
 Registrierter Benutzer
Links : Onlinestatus : fabio ist offline
Registriert seit: Aug 2003
Ort: Wetzikon, ZH, CH
Beiträge: 408
fabio ist zur Zeit noch ein unbeschriebenes Blatt
Standard

Ja jein, erstmal danke für das Beispiel.

Leider passen mir zwei Sachen nicht, wobei sich beide eventuell lösen liessen durch Stylesheets.

Drucken geht bei deiner Demoseite gar nicht, zumindest nicht mit Safari und Firefox. Hier könnte ich zwar ein spezielles Print-CSS deklarieren, aber irgendwie habe ich mich mit der Idee noch nicht angefreundet.
Das andere ist das "inlinescrollen", damit haben Android/iPhone/iPad gar keine Freude, zumal auf so kleinen Bildschirmen ein fixierter Header/Footer nur unnötigen Platz wegnehmen. Auch hier könnte ich womöglich mit seperaten Stylesheets ein eignes Design für mobile Geräte machen.
Aber irgendwie finde ich geht das entgegen dem Sinn.
Eine normale/barrierenfreie Homepage sollte von allen Endgeräten mit dem gleichen Stylesheet korrekt anzeigbar sein, und nicht eben für jedes Gerät neu definiert werden.
Der Sinn von Android/iPhone ist ja gerade, dass sie "the real web" anzeigen, und keine spezielle "mobile-Version".


Was ich meinte, ist nicht, dass der Footer immer an unteren Browserrand ist (quasi fixed), sondern nur am Browserrand wenn genügend Platz vorhanden ist, und ansonsten mit dem Inhalt nach unten schieben.
Also in dieser Art:
Footer Demo 2
(die nutzen die gleiche/ähnliche Technik)
Leider sieht man auch da, dass wenn man vertikal zum scrollen kommt, der grüne Balken nicht ganz füllt.

Wie auch immer, Amica, ich habe bereits zu viel deiner Zeit beansprucht und will dich nicht noch mehr belästigen mit der Sache.
Ich habe mich vorhin mit der Grafikerin abgesprochen und für sie ist es auch in Ordnung, wenn ich die Adresse im Header anzeige. Das macht das ganze wesentlich einfacher.
Die Sache ist eben, dass die Homepage ziemlich kurzfristig fertig sein musste, letzten Freitag Besprechung gehabt und Montag in einer Woche sollte sie bereits online sein. Hätt ich genügend Zeit würde ich da natürlich schon nicht so schnell aufgeben, aber was solls, halb so schlimm.

Also, vielen Dank für deine Mühe
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
scrollen combie Fragen/Vorschläge zum Forum 9 29-09-2006 13:01
Per JS in nem Div scrollen MrBona HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 05-10-2005 00:29
Scrollen Benny-one Off-Topic Diskussionen 5 27-01-2005 20:42
iframes- horiz.scrollen aussschalten ripper018 HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 13 29-06-2004 12:06
Scrollen bis unendlich hydrococcus HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 21-04-2004 21:48

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

PHP Server Monitor

PHP Server Monitor ist ein Skript, das prüft, ob Ihre Websites und Server betriebsbereit sind.

11.09.2018 Berni | Kategorie: PHP/ Security
PHP WEB STATISTIK ansehen PHP WEB STATISTIK

Die PHP Web Statistik bietet Ihnen ein einfach zu konfigurierendes Script zur Aufzeichnung und grafischen und textuellen Auswertung der Besuchern Ihrer Webseite. Folgende zeitlichen Module sind verfügbar: Jahr, Monat, Tag, Wochentag, Stunde Folgende son

28.08.2018 phpwebstat | Kategorie: PHP/ Counter
Affilinator - Affilinet XML Produktlisten Skript

Die Affilinator Affilinet XML Edition ist ein vollautomatisches Skript zum einlesen und darstellen der Affili.net (Partnerprogramm Netzwerk) Produktlisten und Produktdaten. Im Grunde gibt der Webmaster seine Affilinet PartnerID ein und hat dann unmittelb

27.08.2018 freefrank@ | Kategorie: PHP/ Partnerprogramme
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 11:40 Uhr.