Containerhöhe

Billbos

Hallo,

mein Problem besteht darin, dass mein Container die Höhe nicht anpasst.
Ich habe gesagt, dass er die Höhe des Inhaltes annehmen soll aber er macht es nicht.
Im Internetexplorer 7 geht es aber der Firefox macht mir Probleme, obwohl ich angegeben habe height: 100%;

Hier die Stylesheets

Vielen Dank

Billbos

Code

@charset "utf-8";
/* CSS Billbos_LAYOUT_Index */


*html {
margin: 0;
padding: 0;
}


body {
   background: #FFF url(../img/background.gif);
   font: 100.01% Arial, Helvetica, sans-serif;
   }

#container {
    background: #FFF url(../img/container/background_container_1.gif) top left repeat-y;
    width: 800px;
	height: 100%;
	min-height: 500px;
	margin: 0 auto;
	border: 1px solid;
	}

Alles anzeigen

jojo87

dir ist klar, dass du mit min-height eine minimale Höhe von 500px erzwingst, ja?
Das heißt, dass er bei Inhalten, die niedriger als 500px sind, trotzdem 500px Höhe nimmt.

Gruß,
Jojo

FaFoo

und gib dem body und dem html mal auch ein height:100%...

Billbos

Also ich habe bei dem Container jetzt die min-height herausgenommen, wobei doch min-height für die Mindesthöhe steht und nicht für max-height?
Jetzt kommt ragt trotzdem alles aus dem container. Hier der Screenshot!

[Blockierte Grafik: http://billbos.eu/help/container.jpg]

Bandit

Hähä, wieder so eine lustige sache. Da will jemand für geld homepages basteln und scheitert schon an der eigenen seite. Wer baut dann die seiten für die kunden? Auch wieder forenuser? Das internet verkommt immer mehr zu einem laientreffen

Billbos

HA wenn das meine Homepage wäre würde ich dir Recht geben!

jojo87

ganzen Code bitte.

Billbos

Hier ist der erste Code vom Layout

Code

@charset "utf-8";
/* CSS Billbos_LAYOUT_Index */


*html {
margin: 0;
padding: 0;
}


body {
   background: #FFF url(../img/background.gif);
   font: 100.01% Arial, Helvetica, sans-serif;
   height: 100%;
   }

#container {
    background: #FFF url(../img/container/background_container_1.gif) top left repeat-y;
    width: 800px;
	height: 100%;
	margin: 0 auto;
	border: 1px solid;
	}

Alles anzeigen

DANN DIE NAVIGATION

Code

@charset "utf-8";
/* CSS NAVIGATION */




#navigation {
     width: 800px;
	 background: #003366;
	 margin: 0 auto;
	 padding: 12px 0px 12px 0px;
	 text-align: center;
	 border: none;
	 }

#navigation ul {
     display: inline;
	 margin: 0;
	 padding: 0;
	 list-style-type: none;
	 }

#navigation ul li {
     display: inline;
	 padding: 0;
	 }

#navigation ul li a {
     color: #000;
	 background: #FFF;
	 margin: 0;
	 padding: 2px 5px;
	 text-decoration: none;
	 font-weight: bold;
	 }

#navigation ul li a:hover {
     background: #006cad;
	 border-bottom: 11px solid #FFF;
	 font-weight: bold;
	 }


/* Navigation Bottom */


#navibottom {
      width: 800px;
      background: #003366;
	  font-size: 12px;
	  margin: 0 auto;
	  text-align: left;
	  border-right: 1px solid #000;
	  border-bottom: 1px solid #000;
	  border-left: 1px solid #000;
	  }

#navibottom ul {
      display: inline;
      text-decoration: none;
	  padding: 0;
	  margin: 0;
	  }

#navibottom ul li {
      display: inline;
	  padding: 5px 7px;
	  }

#navibottom ul li a {
      color: #000;
	  background-color: #FFF;
	  margin: 0;
      padding: 0;
	  text-decoration: none;
	  font-weight: bold;
	  }

#navibottom ul li a:hover {
      color: #000;
	  background-color: #999;
	  font-weight: bold;
	  }

Alles anzeigen

FONTS

Code

@charset "utf-8";
/* CSS Billbos_FONT_index */


/* Headings */


h1.angebote {
   color: #FFF;
   text-align: center;
   }

h1 {
	color: #FFF;
	text-align: center;
	padding: 5px; /*???*/
	margin: 0 0 10px 0;
}

.zusatzangebot {
   color: #000;
   font: Arial, Helvetica, sans-serif;
   font-size: 18px;
   text-align: center;
   padding: 5px;
   }

/* Paragraphen */


.zangebot {
   text-align: left;
   color: #0000FF;
   font-weight: bold;
   }

.angebotlist {
   text-align: left;
   color: #0000FF;
   font-weight: bold;
   }

Alles anzeigen

DEFAULT (PROBLEM)?

Code

@charset "utf-8";
/* CSS DEFAULT_index */


* html {
  margin: 0;
  padding: 0;
  }


/* Header */


#header {
    background: #003366 url(../flash/index_header/header_1.swf) no-repeat top;
	margin: 0 auto;
	}

/* Bildercontainer */


#piccontainer {
    width: 770px;
	height: 280px;
	background: #FFF;
	margin: 0 auto;
	border: 1px thin #000;
	}



/* Angebote */


   /* Box aussen */


#bildbox {
     background: #FFF;
	 float: left;
	 width: 150px;
	 height: 270px;
	 border: 1px solid #000;
     margin: 5px 5px 5px 0;
	 padding: 5px;
	 }

   /* Box innen */	 

#boxinside {
      background: #000;
	  width: 140px;
	  height: 100px;
	  border: none;
	  margin: 0px auto;
	  }

#zusatzangebot {
      width: 255px;
	  float: left;
	  height: 270px;
	  border: 1px dotted #000;
	  margin: 5px 0px 5px 0;
	  padding: 5px;
	  }

/* Zusatzangebot Liste */


#zlist ul {
	list-style-type: none;
	margin: 0;
    } 

#zlist li {
	list-style-image: url(../img/index/arrow-right.gif);
	padding: 3px;
	margin: 0;
    }

/* Angebot Liste */


#angebotlist ul {
    list-style-type: none;
	margin: 0;
	}

#angebotlist li {
    list-style-image: url(../img/index/arrow-right.gif);
	padding: 1px;
	margin: 0;
	}

Alles anzeigen

jojo87

und das html dazu?
Oder besser: Link dazu.

Billbos

http://www.billbos.eu

jojo87

ich sehe da hier keins deiner beschriebenen Probleme^^

Billbos

Ich habe auch eine Box herausgenommen. Wenn ich diese Box wieder einfüge wird sie über den Container herausragen, wie lässt sich das beheben? height: 100%, wirkt nicht!

jojo87

ts, hast du schon ma dran gedacht, dem pic-container einfach mal height: auto; zu geben?
Wenn der Immer 280px hoch ist, kann halt auch nur eine Reihe 270px hoher Boxen rein passen.
Logisch, oder?

Btw:

Zitat von bandit600

Hähä, wieder so eine lustige sache. Da will jemand für geld homepages basteln und scheitert schon an der eigenen seite. Wer baut dann die seiten für die kunden? Auch wieder forenuser? Das internet verkommt immer mehr zu einem laientreffen

Zitat von Billbos

HA wenn das meine Homepage wäre würde ich dir Recht geben!

Das ist doch aber deine, um die es hier geht, oder?
Zumindest hast du denselben Link in der Signatur und auch noch einen entsprechenden Nick......

Hallo, ja genau, nur wenn es er besser weiss, soll er es mir doch sagen.
Allgemein, wie kann ich sagen, dass der Container mitwachsen soll, bei steigendem Inhalt?

sejuma

Wenn keine Höhe definiert ist, wächst jeder Container automatisch mit seinem Inhalt. Das braucht man denen nicht zu sagen.

In der Breite darfst du nicht nur die width-Werte der einzelnen Innencontainer nehmen, sondern musst auch noch zusätzlich Border-, Margin- und Paddingwerte berücksichtigen. Vermutlich passen die deshalb nicht nebeneinander rein.

jojo87

Zitat von jojo

dem pic-container einfach mal height: auto; geben

Lesen!

Billbos

Okay vielleicht hast du recht, also lasse ich die Height-Werte weg und definiere nur Breite!

Containerhöhe

Tags

Benutzer online in diesem Thema