|
|||
Problem mit Header
Hallo Liebe ForumUser,
ich habe ein Problem beim Header. Wenn ich meinen Header auf 100% stelle läuft er über die ganze Seite. Das ist auch richtig so. der Headerbereich der in die Scrollbalken fährt ist 970px Breit. Der Header passt sich immer der Browserbreite an. Das ist auch alles gut so. Wenn ich aber den Header eine feste Breite von zb. 1200px gebe und den Browser in der Breite kleiner mache entsteht bei den 1200px ein Scrollbalken unten, dabei soll er erst bei 970px Breite sein. Wie kann ich das verhindern? Code:
#header{ border-bottom:1px solid #660000; height:100px; width:100%; background-color: #A2A2A2; background: -moz-linear-gradient(top, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.4) 70%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.1)), color-stop(70%,rgba(255,255,255,0.4)));background: -webkit-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 70%);background: -o-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 70%);background: -ms-linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 70%);background: linear-gradient(top, rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.4) 70%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#FFFFFF',GradientType=0 ); position:relative; margin-left:auto; margin-right:auto; } lg emox |
Sponsored Links |
|
||||
Zitat:
Code:
$(window).resize( function( ) { $('body').css( { 'overflow-x' : $(window).width() >= 980 ? 'hidden' : 'auto' } ) ; } ) ; Allerdings könntest du dem Header eine Breite von 100% zuweisen und mittels der Eigenschaft min-width eine minimale Breite für dein Element festlegen. Bei einer Angabe von bspw. 980px, würde der horizontale Scrollbalken somit erst ab einer Breite < 980px erscheinen. Diesen Weg würde ich bevorzugen Hier ein entsprechendes Beispiel: - Verwendung der Eigenschaft min-width Es sei angemerkt, dass die zweite Lösung auschließlich CSS verwendet. Das darin enthaltene JavaScript dient nur der Visualisierung der aktuellen Breite des div-Containers und kann somit ignoriert werden. Gruß, lotti.
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint Geändert von lottikarotti (03.05.2012 um 21:54 Uhr) |
|
||||
Zitat:
Zitat:
Versuchen kann man's trotzdem
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint Geändert von lottikarotti (03.05.2012 um 21:29 Uhr) |
|
||||
Zitat:
Klar kann man, aber das sind i.d.R. uneffektive Ratespielchen, weil man schnell aneinander vorbeiredet. Kein Link zum Problem bläht vor allem den Fred unnötig auf.
__________________
Ein mehrfacher Gruß aus dem Südosten Klaus |
|
||||
Habe ich doch? ..
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint |
|
||||
Das heißt, der Viewport ist z.B. 980px breit, und es gibt keinen horiz. Scrollbalken. Warum zum Teufel soll der Header dann 1200px breit sein? Man sieht die Überbreite nicht, man kann sie nicht erscrollen, welchen Sinn ergibt sie dann?
__________________
Wer keinen Link auf seine problembehaftete Seite posten kann, weil diese noch nicht online ist: Testcase bauen, online stellen, Link posten. Internet-Grundregel: Unbekannte Begriffe googeln! (Erspart 99% aller Nachfragen.) |
Sponsored Links |
|
||||
Nur damit die Leser das nun nicht durcheinander bringen: Ich habe zwei "mögliche" Lösungen für das genannte Problem, bezogen auf die oben aufgeführten Angaben (u.a. das CSS), geschildert. Die erste nutzt JavaScript, die zweite ist pures CSS. Bei der zweiten Lösung habe ich zudem explizit erwähnt, dass ich diese der JavaScript-Lösung vorziehe - warum sollte klar sein Vielleicht sollte ich das in meinem ersten Post deutlicher kennzeichnen.
Gruß, lotti.
__________________
Empfehlenswerte Links: jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint Geändert von lottikarotti (04.05.2012 um 01:25 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Problem beim Erstellen von mehrspaltigen Layouts | Rebelhig | CSS | 0 | 11.03.2009 12:06 |
Problem (Warning: Cannot modify header information - headers already sent by ....) | georgzed | Serveradministration und serverseitige Scripte | 6 | 18.02.2009 00:02 |
Problem mit Header Darstellung | Gecko | CSS | 2 | 27.12.2006 10:15 |
gelöst: Problem mit w3 Header | Unsk1ll3d | (X)HTML | 13 | 05.01.2006 00:52 |
Problem mit w3 Header (delete this post pls) | Unsk1ll3d | (X)HTML | 0 | 03.01.2006 19:53 |