Antworten auf deine Fragen:
Neues Thema erstellen

Bei Minimierung des Browsers wird nicht mehr repeatet

O

onpoint

Aktives Mitglied

Hallo,

ich verzweifel seit mehreren Stunden an einem kleinen Problem.

Folgendes:

Ein Bild eines Headers wird nach Achse X repeatet.

Wenn man den Browser maximiert hat funktioniert alles super. Auch beim Rauszoomen repeatet er das Bild die komplette Browserbreite lang.

Doch minimiere ich den Browser und scrolle mit den daraufhin entstandenen Scrolbalken nach rechts, hört der Background auf sich zu repeaten. Wie kann das sein?

Also zusammgengefasst: Das Bild wird nicht mehr wiederholt, sobald man das Browserfenster minimiert.

Hatte jemand das selbe Problem oder weiß einen Rat?

Hier mein CSS Code (zum Footer, da gibt es das selbe Problem)

HTML: 
#footer {
    background:url(../Bilder/footer_index.jpg) 0 0 repeat-x;
    height:163px;
    
    
}

#footer #footerinhalt {
    background:url(../Bilder/footer.png) 0 0 no-repeat;
    width:1115px;
    height:163px;
    overflow:hidden;
    
}
 

cebito

cebito

undefined

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

Das ist normal, ein div ist ohne weitere Angabe immer 100% vom Elternelement breit. Stellt sich die Frage, WER den Scrollbalken verursacht. Das ist aus diesem Schnipsel freilich nicht erkennbar. Mach das ausfindig und gib header und footer eine entsprechende min-width.
 
O

onpoint

Aktives Mitglied

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

cebito schrieb:
Das ist normal, ein div ist ohne weitere Angabe immer 100% vom Elternelement breit. Stellt sich die Frage, WER den Scrollbalken verursacht. Das ist aus diesem Schnipsel freilich nicht erkennbar. Mach das ausfindig und gib header und footer eine entsprechende min-width.
Zum Vergrößern anklicken....

In Prozent? Oder in Pixel?

In Prozent reagiert er nicht, es bleibt so, wie zuvor auch.
Dem ganzen in Pixel eine min-width zu geben wäre eher kontraproduktiv, da ich diese bei ca. 1000px setzen würde. Bei Nutzern mit größeren Bildschirmen würde er trotzdem stoppen, oder setze ich da falsch an?

Hier wäre der Code meiner gesamten CSS Datei:

HTML: 
* {
    margin:0;
    padding:0;
    border:0;
}

html {
    background-color:#f9f6ee;
    height:100%;
    width:100%;
}

body {
    color:#424242;
    font-size:12px;
    font-family: 'Droid Sans', sans-serif;
    height:100%;
    width:100%;
}

h1 {
    font-weight:700;
    color:#424242;
    font-size:14px;
    display:inline;
}

h2 {
    font-weight:400;
    color:#2c4918;
    font-size:14px;
    display:inline;
}

p {
    padding:5px;
}

.clear {
    clear:both;
}

/*------------------*/


/*Header*/

#header {
    
}
    

#header-index1 {
    background:url(../Bilder/header-index1.jpg) 0 0 repeat-x;
    height:150px;
    
}

#header-index2 {
    background:url(../Bilder/header-index2.jpg) 0 0 repeat-x;
    height:86px;
    position:relative;
}

#header-index1 #header-logo {
    background:url(../Bilder/logo.png) 0 0 no-repeat;
    width:1192px;
    height:150px;
    overflow:hidden;
}

#header-index2 #header-logo2 {
    background:url(../Bilder/header-logo2.png) 0 0 no-repeat;
    width:1192px;
    height:86px;
    overflow:hidden;
}

#header-index2 #bgnavi {
    background:url(../Bilder/bgnavi.png) 0 0 no-repeat;
    width:336px;
    height:350px;
    position:absolute;
    top:5px;
    left:700px;
}

.linkstart {
    background:url(../Bilder/linkstart.png) 0 0 no-repeat;
    width:290px;
    height:48px;
    margin:14px 0 0 24px;
    -moz-transition-property:background-color;
    -moz-transition-duration:2s;
}


.linkstart:hover {
    background:url(../Bilder/linkstarthover.png) 0 0 no-repeat;
    
}

.linkstart.active {
    background:url(../Bilder/linkstarthover.png) 0 0 no-repeat;
    
}



.linkpersoenliches {
    background:url(../Bilder/linkspersoenliches.png) 0 0 no-repeat;
    width:290px;
    height:48px;
    margin:20px 0 0 24px;
    -moz-transition-property:background-color;
    -moz-transition-duration:2s;
}

.linkpersoenliches:hover {
    background:url(../Bilder/linkspersoenlicheshover.png) 0 0 no-repeat;
    
}

.linkpersoenliches.active {
    background:url(../Bilder/linkspersoenlicheshover.png) 0 0 no-repeat;
    
}

.linkportfolio {
    background:url(../Bilder/linksportfolio.png) 0 0 no-repeat;
    width:290px;
    height:48px;
    margin:21px 0 0 24px;
    -moz-transition-property:background-color;
    -moz-transition-duration:2s;
}

.linkportfolio:hover {
    background:url(../Bilder/linksportfoliohover.png) 0 0 no-repeat;
}

.linkportfolio.active {
    background:url(../Bilder/linksportfoliohover.png) 0 0 no-repeat;
}

.linkleistungen {
    background:url(../Bilder/linkleistungen.png) 0 0 no-repeat;
    width:290px;
    height:48px;
    margin:21px 0 0 24px;
    -moz-transition-property:background-color;
    -moz-transition-duration:2s;
}

.linkleistungen:hover {
    background:url(../Bilder/linkleistungenhover.png) 0 0 no-repeat;
}

.linkportfolio.active {
    background:url(../Bilder/linksportfoliohover.png) 0 0 no-repeat;
}

/*Content*/

#content {
    background:url(../Bilder/bgcontent.jpg) 0 0 repeat;
    margin:10px;
    -moz-border-radius:5px;
    margin-top:-5px;
    overflow:hidden;    
    
}

.neuigkeitenimg {
    background:url(../Bilder/neuigkeiten.png) 0 0 no-repeat;
    width:480px;
    height:69px;
    margin:20px 0 0 79px;
    
}

.hightlightcontent {
    width:401px;
    height:auto!important;
    background-color:rgba(0,0,0,0.1);
    margin:5px 0 20px 92px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;
    padding: 20px 29px 0 29px;
    float:left;
    
}

.contentlinie {
    background:url(../Bilder/contentlinie.png) 0 0 no-repeat;
    width:389px;
    height:28px;
    margin-top:5px;
}

.text {
    text-align:justify;
    padding-bottom:20px;
    margin-top:-5px;
}

/*Sidebar*/

#sidebar {
    float:right;
    width:600px;
    
    
}

.highlightsidebar {
    width:245px;
    height:auto!important;
    background-color:rgba(0,0,0,0.1);
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
    -o-border-radius:8px;
    border-radius:8px;
    float:left;
    z-index:5000;
}
    

/*Footer*/

#footer {
    background:url(../Bilder/footer_index.jpg) 0 0 repeat-x;
    height:163px;
    
    
}

#footer #footerinhalt {
    background:url(../Bilder/footer.png) 0 0 no-repeat;
    width:1115px;
    height:163px;
    overflow:hidden;
    
}

Lg
 
cebito

cebito

undefined

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

Was nutzt die CSS? Nichts ohne HTML! Aber ehrlich hätt ich auch keine Lust das nachzubauen. Also stell es doch online, dann muss man nicht raten.
 
S

_schatzi_

hmpf

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

Hallo!

Ich hoffe, ihr verzeiht mir eine Anfänger-offTopic-Zwischenfrage:
Wozu ist hier der Selektor "html" gut? Wird der nicht sowieso von "body" überschrieben?
Und warum "height:100%" auf "html" und/oder "body"?
 
cebito

cebito

undefined

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

_schatzi_ schrieb:
Wozu ist hier der Selektor "html" gut?...
Und warum "height:100%" auf "html" und/oder "body"?
Zum Vergrößern anklicken....
Wenn ich eine Höhe in % angeben will, ist das nur möglich, wenn die Höhe des Elternelements bekannt(definiert) ist. Da sich die Elemente in der Höhe normalerweise nach ihrem Inhalt richten, ist diese Höhe meist nicht bekannt, es sei denn ich definiere bspw.
Code: 
#irgendwas{height:100px;}
Dann hat ein Kind mit 50% Höhe eben 50px, hab ich die Höhenangabe nicht, weiß der Browser nicht, woran er die 50% messen soll.
Wenn ich html (mit 100%) und abwärts definiere, orientiert er sich am sichtbaren Browserfenster (=html:100%). Das vererbt sich dann nach unten, solange die "Kette" nicht unterbrochen wird.

Sichtbares Browserfenster ist 1000px hoch:
Code: 
html{height:100%;}/* 1000px */
body{height:100%;}/* 1000px */
#wrapper{height:75%;}/* als Kind von body 750px */
  #inner{height:50%;}/* als Kind von body wäre 500px */
 #inner{height:50%;}/* als Kind von wrapper wäre 375px */
 
S

_schatzi_

hmpf

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

OK!
Das klärt zumindest meine zweite Frage. Stichworte: Liquid Design und/oder MediaQueries.
Vielen Dank dafür!
Aber was ist der Unterschied zwischen "html" und "body"?
 
Myhar

Myhar

Hat es drauf

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

Der Unterschied ist folgender:
HTML: 
<html> <!-- Das ist html -->
<head> </head>
<body> </body> <!-- Das ist der body, ein Kindelement von html -->
</html>
 
O

onpoint

Aktives Mitglied

AW: Bei Minimierung des Browsers wird nicht mehr repeatet

Es hat sich erledigt :)

Ich habe dem Header und dem Footer wie du sagtest eine Mindestbreite gegeben. Dafür habe ich den Wert 1200px genommen, da er bei 1000px min-width trotzdem rechts noch ein kleines Stück abschneidet.

Leute mit Monitoren einer geringeren Auflösung müssen wohl ein klein wenig horizontal scrollen, aber ich denke das kann man verzeihen.

Danke dir für die Hilfe!

Lg
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden
Zu den Gratis-Inhalten

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Gesamt: 146 (Mitglieder: 1, Gäste: 145)
Robots: 111

Statistik des Forums

Themen
118.615
Beiträge
1.538.352
Mitglieder
67.528
Neuestes Mitglied
Links Stream es
Oben