• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Problem mit Clearfix - andere Lösungsvorschläge?

P

paprika

New member
Hallo zusammen

Ich hab schon wieder ein Problem... bei der Webseite die ich erstellen möchte, habe ich das Problem, dass bei einem kleinen Bildschirm die Navigation und/oder der Footer über den Wrapper hinausragt. Damit ich das Easy Clearing verwenden kann, muss ich die Höhe des Wrappers löschen. Dann wird aber das mittlere Hintergrundbild (div class="header-hintergrundbild") nicht mehr angezeigt - ausser wenn ich einen festen Pixelwert eingebe. Dies möchte ich aber nicht, denn das Hintergrundbild soll sich je nach grösse des Bildschirmes verändern. Habt ihr eine Idee wie ich dieses Problem lösen kann?

aktueller Code ohne Clearfix:

HTML: 
<div id="background">
	<div id="background_left"></div>
	<div id="background_m">
		<div id="wrapper"> 
			<header>
				<a class="open" href="#navMain"><img src="bilder/layout/menu.png" alt="Menü"/></a>
				<div id="wappen"><img src="bilder/layout/header/sterne_wellen.png" alt="Logo"/></div>
				<div class="titel">Name der Seite</div>

    			<div class="header-hintergrundbild"></div>
    		</header>              
                   
                    <div id="quicklinks2">
						<div class="print"><img src="bilder/layout/quicknavigation/print.png" alt="Drucken" height="21">Drucken</div>
                   		<div class="kontakt"><img src="bilder/layout/quicknavigation/kontakt.png" width="20" height="21" alt="Kontakt">Kontakt</div>  
                        <div class="home"><img src="bilder/layout/quicknavigation/home.png" width="21" height="21" alt="Home">Home</div>
   						<div class="suche"><img src="bilder/layout/quicknavigation/search.png" alt="Suche" height="21">Suchen</div>
               		</div> 
			<nav id="navMain">
				<div class="titel-navigation">Navigation</div>
					<ul id="navigation">
	  					<li class=menu li"><a href="#link">Link</a>
                        	<ul>
                            	<li><a href="#link">Link</a>
                                </li>
                                <li><a href="#link">Link</a>
                                </li>
                                <li><a href="#link">Link</a></li>
                                <li><a href="#link">Link</a></li>
                                <li><a href="#weitere">...</a></li>
                                
                            </ul></li>
        				<li class="menu li"><a href="#Link">Link</a>
                        	<ul>
                            	<li><a href="#link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                
                            </ul></li>
       					<li class="menu li"><a href="#Link">Link</a>
                        	<ul>
                            	<li><a href="#link">Link
                                </a></li>
                                <li><a href="#link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#div">...</a></li>
                                
                            </ul></li>
        				<li class="menu li"><a href="#Link">Link</a>
                        	<ul>
                            	<li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                            </ul></li>
        				<li class="menu li"><a href="#Link">Link</a>
                        	<ul>
                            	<li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">...</a></li>

                                
                            </ul></li>
        				<li class="menu li"><a href="#Link">Link</a>
                        	<ul>
                            	<li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                <li><a href="#Link">Link</a></li>
                                
                            </ul></li>
   					</ul>
			</nav>       
            
			<main>
				<div class="begruessung">
              		<h2>Herzlich willkommen</h2>
					<p>	Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
                 	</p>
                </div>
				<div class="news">
                	<div class="news_text">News</div>
                    <div class="news_inhalt">
                  		<ul class="news_punkt">
	  						<li>Öffnungszeiten</li>
        					<li>News</li>
       						<li>News</li>
        					<li>News</li>
       					</ul>
                    </div>
 				</div>
			</main>

			<footer>
				<div id="anschrift">
					<h4>Firma</h4>
       		 		<div class="adresse">Adresse</div><div class="komma">, </div>
            		<div class="adresse">Postfach</div><div class="komma">, </div>
         			<div class="adresse">PLZ Ort</div><br>
         	        <div class="tel">Tel. 000 000 00 00</div>
         			<div class="fax">Fax 000 000 00 00</div>
				</div>
    			<div class="oeffnungszeiten">
    				<h4>Öffnungszeiten</h4>
    				</div>
  
			</footer>
		</div>
	</div>
	<div id="background_right"></div>
</div>

Code: 
#wrapper {

	height: 95%; 
	width: 100%;
	float:left;
	background-color: rgba(252,252,252,0.1);
	margin: 0;
	padding:10px;
	border-radius: 0px 0px 18px 18px; 
	border: 0.5px solid #000000; 
	moz-box-shadow:0px 2px 12px #292929; /*  Firefox */ 
	webkit-box-shadow:0px 2px 12px #292929; /*  Chrome, Safari */
	khtml-box-shadow:0px 2px 12px #2929299; /*  Konqueror */
	box-shadow:0px 2px 12px #292929; /*  CSS3 box-shadow:[horizontale position] [vertikale position] [größe] [farbe]; */

}

main {
	background-color:rgba(249,249,249,0);
	float: left;
	height:50%;
	overflow:auto; /* Scrollbar */
	padding-left:2%;
	width: 80%;

}
#background_left { /*Bild ganz rechts gross */
	background: url(../.jpg) 50% 70% no-repeat;
	background-size: cover;
	float:left;
	width:12.5%;
	height: 34%;
			
}
#background_right { /* Bild ganz links gross */
	background:url(../jpg) 50% 70% no-repeat; 
	background-size: cover;
	float:left;
	width:12.5%;
	height: 34%;
			
}

#background_topm {
	width:100%;
	height: 2%;
	background:url(..jpg) 50% 70% no-repeat;
	background-size: cover;
	float:left;
			
}
#background_m {
	width:75%;
	height: 100%;
	float:left;
			
}
.header-hintergrundbild {
	height: 83%;
	background:url(.jpg) 50% 70% no-repeat;
	background-size: cover;
}
header {
	height: 28%; 
}


Ich hoffe es ist mit dem beiliegenden Bild etwas klarer, was ich meine...

Vielen Dank für eure Hilfe!
 

Anhänge

  • skizze.jpg
    skizze.jpg
    44,9 KB · Aufrufe: 6
Wie wär's mit einem min-height und min-width für den Wrapper... dann bekommst du zwar Scrollbalken, aber es steht nichts rüber, wenn du da die richtigen Werte eingibst.
 
funktioniert doch - aber sieht leider nicht so toll aus... wäre viel besser ohne Scrollbalken.... wenn ich dem mittleren Hintergrundbild (welches jeweils verschwindet) padding_bottom 17% wächst der Wrapper zwar mit, aber das Hintergrundbild passt nicht mehr ganz richtig...
 
*schäm* ich habe festgestellt, dass es das erste mal wahrscheinlich gar nichts mit dem Clearfix zu tun gehabt hat, als der Wapper mitgewachsen ist. Ich hatte damals noch die Eigenschaften:
Code: 
min-height:95%;
	height:auto;
dem wrapper gegeben. Dann wächst er mit. Aber das Problem ist, dass das Hintergrundbild im Header dann weg ist...
 
Also bei der Seite, die du gezeigt hast, kann man mit min-height für den Wrapper das "Überstehen" unterbinden.
Damit das Headerbild auch noch gut aussieht, musst du auch den beiden Teilen links und rechts auch noch das entsprechenden min-height geben.
 
So, nach dem Umzugswochenende komme ich nun endlich dazu dir zu antworten.

Bei dieser Variante (Webseite) habe ich nun folgende Änderungen vorgenommen:

Code: 
#wrapper {
	min-height: 100%; 
	height:auto;
}

#background_right { 
	height: 34%;
	min-height:34%;
			
}
#background_left {
	height: 34%;
	min-height:34%;
			
}

Das Problem ist nun, dass das Hintergrundbild vom div .header-hintergrundbild verschwindet... und auch das Hintergrundbild von #background_topm ist weg...

Wenn ich noch
Code: 
.header-hintergrundbild {
	padding:8%;
}

ergänze, dann ist das Hintergrundbild zwar wieder sichtbar, doch passt es nicht mehr genau mit dem Bild links & rechts zusammen (Webseite)

Habe ich die falschen Werte bei height & min-height eingegeben?
 
Ich meinte bei den min-height Angaben eine feste Pixelangabe (für #wrapper müssten das ca. 620px sein).
 
Super :) Vielen Dank! Hat einwandfrei funktioniert. Hatte zuerst angst, dass die Seite mit px zu statisch wird. Aber ist perfekt :) Merci!!
PS: Sorry, für die späte Rückmeldung.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben