zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit Header

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 03.05.2012, 12:15
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 03.05.2012
Beiträge: 1
systemius befindet sich auf einem aufstrebenden Ast
Standard 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;
}
Bei der eingabe eines festen Wertes in der Headerbreite unterliegt der Header der tatsächlichen Breite und ab da an entstehen Scrollbalken unten, wie kann ich es machen dass es erst ab 970px mit den scrollbalken beginnt der Header dennoch 1200px breite hat? vielen dank schonmal für eure hilfe, hoffe ihr könnt mir weiterhelfen.

lg
emox
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 03.05.2012, 12:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 485
dazzle89 wird schon bald berühmt werden
Standard

Ich denke, dass das nicht möglich ist. Aber lieber noch die nächsten Antworten abwarten ....
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 03.05.2012, 13:19
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Zitat:
Zitat von systemius Beitrag anzeigen
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?
Ob das Verhindern des horizontalen Scrollbalkens bei einer festgelegten Breite möglich ist, weiß ich nicht. Mit JavaScript (bevorzugt jQuery) wäre das natürlich kein Problem:
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 20:54 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 03.05.2012, 17:30
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

ähem...warum schachtelst du nicht ein div#header-innen in den header, dem kannst du dann die 970px Breite (oder min-width 970/max-width 1200) + die horizontale Zentrierung geben?
Warum man da jetzt JS brauchen sollte erschließt sich mir leider nicht so ganz.

Solche kleinen Codeschnipsel sind ziemlich unbrauchbar, vor allem in Zusammenhang mit der mir etwas rätselhaften Problembeschreibung. Effektive und schnelle Hilfe gibt es i.d.R. nur mit Link zur Problemsite.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus

Geändert von hubspe (03.05.2012 um 17:33 Uhr)
Mit Zitat antworten
  #5 (permalink)  
Alt 03.05.2012, 20:26
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
ähem...warum schachtelst du nicht ein div#header-innen in den header, dem kannst du dann die 970px Breite (oder min-width 970/max-width 1200) + die horizontale Zentrierung geben?
Hm? Horizontale Zentrierung?

Zitat:
Zitat von hubspe Beitrag anzeigen
Warum man da jetzt JS brauchen sollte erschließt sich mir leider nicht so ganz.
Niemand sprach davon, dass man JavaScript brauchen würde - es ist nur eine Lösung von vielen

Zitat:
Zitat von hubspe Beitrag anzeigen
Solche kleinen Codeschnipsel sind ziemlich unbrauchbar, vor allem in Zusammenhang mit der mir etwas rätselhaften Problembeschreibung. Effektive und schnelle Hilfe gibt es i.d.R. nur mit Link zur Problemsite.
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 20:29 Uhr)
Mit Zitat antworten
  #6 (permalink)  
Alt 03.05.2012, 20:40
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von lottikarotti Beitrag anzeigen
Niemand sprach davon, dass man JavaScript brauchen würde - es ist nur eine Lösung von vielen
Wenn es ohne JS geht sollte man es auch ohne machen, weil JS ja nicht überall zur Verfügung steht.

Zitat:
Zitat von lottikarotti Beitrag anzeigen
Versuchen kann man's trotzdem
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
Mit Zitat antworten
  #7 (permalink)  
Alt 03.05.2012, 20:40
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
Wenn es ohne JS geht sollte man es auch ohne machen, weil JS ja nicht überall zur Verfügung steht.
Habe ich doch? ..
__________________
Empfehlenswerte Links:
jsFiddle | JavaScript Patterns | RedBeanPHP | Mozilla Developer Network -/- W3C Validator | JSLint
Mit Zitat antworten
  #8 (permalink)  
Alt 03.05.2012, 20:43
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von lottikarotti Beitrag anzeigen
Habe ich doch? ..
siehste, jetzt reden wir scheinbar auch grad aneinander vorbei.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #9 (permalink)  
Alt 03.05.2012, 20:46
Benutzerbild von heiko_rs
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 18.09.2005
Ort: Berlin
Beiträge: 9.867
heiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblickheiko_rs ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von systemius Beitrag anzeigen
wie kann ich es machen dass es erst ab 970px mit den scrollbalken beginnt der Header dennoch 1200px breite hat?
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.)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 03.05.2012, 20:49
Benutzerbild von lottikarotti
Ein ♥ für's Web
XHTMLforum-Mitglied
 
Registriert seit: 18.04.2012
Ort: Karlsruhe
Beiträge: 396
lottikarotti wird schon bald berühmt werden
Standard

Zitat:
Zitat von hubspe Beitrag anzeigen
siehste, jetzt reden wir scheinbar auch grad aneinander vorbei.
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 00:25 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

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 aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem beim Erstellen von mehrspaltigen Layouts Rebelhig CSS 0 11.03.2009 11:06
Problem (Warning: Cannot modify header information - headers already sent by ....) georgzed Serveradministration und serverseitige Scripte 6 17.02.2009 23:02
Problem mit Header Darstellung Gecko CSS 2 27.12.2006 09:15
gelöst: Problem mit w3 Header Unsk1ll3d (X)HTML 13 04.01.2006 23:52
Problem mit w3 Header (delete this post pls) Unsk1ll3d (X)HTML 0 03.01.2006 18:53


Alle Zeitangaben in WEZ +2. Es ist jetzt 19:41 Uhr.