Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild“

Fabulous

Lichtfänger ;-)

Hallo,

Habe folgendes Problem bei folgender Seite:


Auf der linken Seite ist ein Menü mit einer Grafik im Footer. Diese Grafik soll immer am Ende der Seite sein in Abhängigkeit von Content-Div rechts. Das funktioniert auch soweit nur leider bekomme ich den Hintergrund vom Menü nicht bis zum Ende der Seite verlängert. Habe jetzt schon diverse Sachen ausprobiert und komme nicht weiter.


Code der Webseite (reduziert):

HTML:
<div id="center">
	<div id="wrapper_H">
		<div id="header"></div><!--header-->
			<div id="box" class="clearfix">
			
			
			
				<div id="Menue">
				  	 <br /><br /><br /><br />
				  	 <img src="images/Home.png" alt="home" />
					 <img src="images/Rooms.png" alt="rooms" /> 
					 <img src="images/Activities.png" alt="activities" /> 
					 <img src="images/Prices.png" alt="prices" /> 
					 <img src="images/Bookings.png" alt="booking" />
                     
					    	                  
				</div><!--Menue-->
				
				<div id="Content" class="clearfix">

				</div><!--Content-->
			</div><!--box-->
		
		<div id="Footer_Box" class="clearfix">
			<div id="Footer_Img"><img src="images/Footer.png" /></div>
			<div id="Footer_Text"></div>
		</div><!--Footer_Box-->
	</div><!--wrapper_H-->
</div>
<!--center-->


Hier der Code vom CSS:

HTML:
html{
width:100%;
height:100%;
margin:0px;
}
body{
width:100%;
height:100%;
margin:0px;
}


#center {
position:relative;
width: 890px;
margin: auto;
display:block;

z-index:-100;


}


#wrapper_H{
	position:relative;
	min-height:100%;
	height:auto !important;
	height:100%;
	width:890px;
	margin:0 auto; 
	
	
}

#header{
background-image:url(../images/Header.png);
height:137px;
width:890px;
}

#box{background-image:url(../images/content_bg.png);
min-height:100%;
	height:auto !important;
	height:100%;
	width:890px;
	margin:0 auto; 
}

#Menue{
min-height:100%;
	height:auto !important;
	margin:0 auto; 
	float: right;
float:left;
width:190px;
background-image:url(../images/MenueBG.png);
background-repeat:no-repeat;
}


#Content{
min-height:100%;

	height:auto !important;
	width:680px;
	margin:5px auto; 
	float: right;
}

p {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#CCCCCC;
}

#Footer_Box{
position:absolute;
bottom:0px;
width:890px;

}

#Footer_Img{
left:0px;
width:190px;
}

#Footer_Text{


}


  .clearfix:after {
                    content:".";
                    display:block;
                    height:0;
                    font-size:0;
                    clear:both;
                    visibility:hidden;
            }
            .clearfix {
                    display:inline-block;
            }
            /* Bereich nicht für IE-mac Anfang \*/
            * html .clearfix {
                    height:1%;
            }
            .clearfix {
                    display:block;
            }
            /* Bereich nicht für IE-mac Ende */


Sieht jemand, was falsch ist und könnte mir den entscheidenden Hinweis geben?

Aus irgend einem Grund ist es nicht möglich den Div vom Menü auf 100% abzüglich Header zu verlängern.
 

vincitore

Aktives Mitglied

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

hi, hatte das problem bisher nie, daher kann ich dir es nicht erklären, aber google mal nach faux-columns, damit wird es meist gelöst.
 

Fabulous

Lichtfänger ;-)

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Faux-Columns helfen mir hier leider nicht weiter, da ich am Ende einer Faux-Column keine Inhalte Einsetzen kann.
 

patrick_l

Hat es drauf

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Über die Grafik in der Sidebar würde ich mir an wenigsten Gedanken machen. Erst einmal würde ich dein Grundgerüst ordentlich aufbauen. Unter anderem die Navigation mit einer unsortierten Liste <ul> umsetzen.

HTML:
<ul>
    <li><a href="#">page 1</a></li>
  <li><a href="#">page 2</a></li>
  <li><a href="#">page 3</a></li>
  <li><a href="#">page 4</a></li>
</ul>
Über CSS die einzelnen Grafiken einbinden und mit text-indent Text ausblenden. Du hast wie gesagt in deinem HTML und CSS einige Fehler. Daher von mir der Tipp, das du dich nochmal mit den Grundlagen auseinander setzen solltest.

Den Navigationsbereich und Content in eine weitere Div packen. Dieser dann die Grafik mit background und der position left bottom zuweisen. Hier mal fix das Grundgerüst »

HTML:
    <div id="wrapper">
      <div id="header">
        <!-- Header -->
    </div>
    <div id="main">
        <div id="nav">
          <ul>
            <li><a href="#">page 1</a></li>
          <li><a href="#">page 2</a></li>
          <li><a href="#">page 3</a></li>
          <li><a href="#">page 4</a></li>
        </ul>
      </div>
      <div id="content">
       <!-- Content here -->
      </div>
    </div>
    <div id="footer">
        <!-- Footer -->
    </div>
    </div>
  <div id="wrapper-bg">
      <!-- Background slideshow -->
      <ul>
        <li><img src="" alt="img1" /></li>
      <li><img src="" alt="img2" /></li>
      <li><img src="" alt="img3" /></li>
    </ul>
  </div>
Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

Fabulous

Lichtfänger ;-)

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Ok, habe jetzt das andere Grundgerüst ausprobiert. Habe aber immer noch das Problem, dass das Menü nicht die gleiche Länge hat wie der Content, wenn der Contentbereich länger ist.
 

patrick_l

Hat es drauf

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Dann musst du nach "Faux Columns" schauen. Ohne fixe Angaben zur Sidebargröße wirst es nicht anders lösen können, da eine Div sonst immer der Größe des eigentlichen Inhalts entspricht bzw. mit wächst.

Daher auch von mir der Tipp das besagte Image der umliegenden Div zu verpassen. Alternative dazu wäre eine weitere Div innerhalb deiner Sidebar. Diese absolut positionieren. Das Problem beim floaten ist einfach das nicht mit Wachsen zu den umliegenden Nachbarn.

Edit:
HTML:
<!--// HTML5 //-->
    <div id="wrapper">
      <header>
        <!-- header -->
    </header>
    <div id="main">
        <section>
          <!-- content -->
      </section>
      <aside>
          <!-- sidebar -->
      </aside>
    </div>
    <footer>
        <!-- footer -->
    </footer>
  </div>
Code:
/* Simple CSS Reset */
* {padding:0; margin:0; border:none; outline:none; list-style:none; font-size:100%;} 
html, body {min-width:100%; min-height:100%;}

#wrapper {bla:blub;}
header {bla:blub;}
#main {width:960px; background:#ccc url(assets/images/bg-sidebar.png) no-repeat bottom left;}

Also einfach der umschließenden Div die Hintergrundgrafik verpassen.

Liebe Grüße, Patrick
 
Zuletzt bearbeitet:

manfred_hst

Nicht mehr ganz neu hier

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Vielleicht solltest du bei #menu das background-repeat:no-repeat; rausnehmen oder ändern in repeat y.
 

patrick_l

Hat es drauf

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Vielleicht solltest du bei #menu das background-repeat:no-repeat; rausnehmen oder ändern in repeat y.

Der Hintergrund und das Wiederholen hat keinen Einfluss auf die Div. Diese ist entweder so groß wie der Inhalt oder die fixen Maße. Mit dem "repeaten" wird also die Größe nicht beeinflusst.

Liebe Grüße, Patrick
 

manfred_hst

Nicht mehr ganz neu hier

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Auf der linken Seite ist ein Menü mit einer Grafik im Footer. Diese Grafik soll immer am Ende der Seite sein in Abhängigkeit von Content-Div rechts. Das funktioniert auch soweit nur leider bekomme ich den Hintergrund vom Menü nicht bis zum Ende der Seite verlängert.
dies hattest du aber schon gelesen?
grüße
Manfred
 

patrick_l

Hat es drauf

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

dies hattest du aber schon gelesen?

Ja, habe ich auch gelesen. Wenn ich mir die Grafik anschaue, ist sie ja eigentlich nicht im Footer, sondern am Ende der Sidebar.

Was jetzt das Fortsetzen der oberen Grafik angeht, hast du ja recht mit dem "Repeat". Nur eben von mir die Ergänzung das die Div ohne feste Größe oder Inhalt nicht weitergeht.

Liebe Grüße, Patrick
 

tyler312

Noch nicht viel geschrieben

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Hallo,

also Patrick hat völlig recht mit dem was er sagt mit den HTML fehlen.

Zu deinem Problem: FAUX COLUMNS sind nie eine gute Lösung. Um zwei Sections oder Divs auf die selbe höhe zu bekommen muss man die höhe des größeren per javascript auslesen und den anderen anpassen. das ist nicht schwer. habe ich selbst schon öfter benutzt.

<code>
(function($) {
var fixContentHeight = function(){
$('#contentHeightStyle').remove();
var max768Height = 0;
$('.contentheight768').each(function() { max768Height = Math.max($(this).outerHeight(),max768Height); })
var max640Height = 0;
$('.contentheight640').each(function() { max640Height = Math.max($(this).outerHeight(),max640Height); })
$("<style id=\"contentHeightStyle\" type='text/css'>\
@media screen and (min-width:551px) { .contentheight640 { height: "+max640Height+"px }}\
@media screen and (min-width: 768px) { .contentheight768 { height: "+max768Height+"px }}\
</style>").appendTo("head");
};
$(document).ready(function(){
window.setTimeout(fixContentHeight, 500);
$('#contact .contact p').each(function() {
if ($.trim($(this).text()) == '') {
$(this).hide();
}
});
});
$(window).resize(fixContentHeight);
})(jQuery);
</code>
 

Myhar

Hat es drauf

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

FAUX COLUMNS sind nie eine gute Lösung. Um zwei Sections oder Divs auf die selbe höhe zu bekommen muss man die höhe des größeren per javascript auslesen und den anderen anpassen.

Faux Columns sind sehr wohl eine gute Lösung. Warum auch nicht? Es ist eine schlechte Lösung, dies mit JS zu realisieren.
 

newbie50plus

Nicht mehr ganz neu hier

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Moin, Moin!
Ich habe eine Lösungsmöglichkeit gefunden.
Da ich nicht den ganzen Code hier einstellen wollte bitte die nachfolgenden Link nutzen:
1. 2.
3.
Den Lösungsansatz habe ich unter "Equal height columns" gefunden und ihn von Markus René Einicher übernommen.
Zusälich habe ich den DIV(Footer Image) rausgenommen. Die "Diestel" in das Menü versetzt (is keine Strafversetzung;)) und neues DIV (#flower) angelegt.
Getestet in: FF, IE10, Chrome u. Safari.
Unter anderem gibt es auf der Seite von Chris Coyier
noch sehr gute Beispiele.
Gruß Fred
 
Zuletzt bearbeitet:

newbie50plus

Nicht mehr ganz neu hier

AW: Linksbündiges Menü mit Footer und durchgängigen Hintergrund Bild

Moin,
die Lösung mit den Hintergrundbildern.
Allerdings klappt es nicht im IE 9 und 10?!?:(
Gute Nacht
Fred
 
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

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Statistik des Forums

Themen
175.189
Beiträge
2.582.075
Mitglieder
67.259
Neuestes Mitglied
SaschMasch1312
Oben