✔ Countainer Mag nich wie ich mag

Status
Nicht offen für weitere Antworten.
F

floMatic

Mitglied
Hallo,

mein erster post und gleich ein Problem.:?

Unzwar bin ich gerade dabei eine xhtml seite zu erstellen Nur momentan tun sich bei mir ein paar denkfehler auf -__-.

Dementsprechend hab ich einen div container erstellt der zur plazierung dient.
drinnen befindet siche nochmal ein div container der den inhalt plaziert.
Und darin halt wieder div container.

Das problem hierbei ist jetzt das der erste container seine höhe nicht anpasst.
(steht zwar ein min-height inner css aber dient nur zum kucken).

Hier der html code
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>gastro</title>

<link href="css/design_screen.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="holder">
  <div id="content_holder">
    	<div id="navileft">
       	  <div id="info_gastro"></div>
            <div id="navigation">
           	  <ul>
              	<li><a href="#">ALLGEMEINE INFO</a></li>
                <li><a href="#">REFERENZEN</a></li>
                <li><a href="#">TEAM</a></li>
                <li><a href="#">LIEFERGEBIETE</a></li>
                <li><a href="#">KONTAKTE</a></li>
                <li><a href="#">LINKS</a></li>
                <li><a href="#">AGB</a></li>
              </ul>
            </div>
        </div>
      <div id="content">
      	<div id="content_box">
        	<div id="content_inhalt">
           	  <h1>Überschrift</h1>
            	<p>text</p>
            </div>
        </div>
      	<div id="form">
        	<div id="form_inner">
            <form>
            <table width="100%">
              <tr>
                <td width="28%">Anrede</td>
                <td colspan="3">
                  <input type="text" name="textfield" id="textfield" class="form_inner_input" />                </td>
              </tr>
              <tr>
                <td>Name</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Vorname</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Firma</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Position</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Anschrift</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Telefon</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Email</td>
                <td colspan="3"><input type="text" name="textfield" id="textfield" class="form_inner_input"/></td>
              </tr>
              <tr>
                <td>Mitteilung</td>
                <td colspan="3"><textarea name="textfield" class="form_inner_field" id="textfield" ></textarea></td>
              </tr>
              <tr>
                <td colspan="3">&nbsp;</td>
              </tr>
              <tr>
                <td id="button_align"><div id="send">
                  <div align="right">
                    <input type="submit" name="button" id="button" value="" class="form_inner_button"/>
                    </div>
                </div></td>
                <td width="72%"><div id="reset"><input type="reset" name="button2" id="button2" value="" class="form_inner_button"/></div></td>
              </tr>
            </table>
            </form>
        	</div>
        </div>
      </div>
  </div>
</div>

</body>
</html>

und hier die dazugehörige css
Code: 
body {
	margin: 0px;
	padding: 0px;
	background-image: url(../img/background.jpg);
	background-repeat: repeat-x;
	background-color: #70ad2e;
}


#holder {
	width: 900px;
	min-height: 850px;
	background-image: url(../img/header_back.jpg);
	background-repeat: no-repeat;
	background-color: #000000;
	border-left: solid #FFFFFF 4px;
	border-right: solid #FFFFFF 4px;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
	padding-top: 211px;
	font-family: Trebuchet MS, Tahoma, Verdana, Arial ;
}



#content_holder {
	width: 828px;
	margin-left: 36px;
	background-image: url(../img/content_back.jpg);
	position: absolute;
	
}

#navileft {
	width: 226px;

	float: left;
	padding: 10px;
	position: relative;
}

#info_gastro {
	width: 200px;
	height: 46px;
	background-image: url(../img/info_gastro.jpg);
	margin-bottom: 20px;
}

#navigation {
	width: 200px;
	font-size: 12px;
	font-weight: bold;
	margin-bottom: 20px;
}

#navigation a {
	text-decoration: none;
	color: #000000;
}

#navigation a:hover {
	background-color: #c4c4c4;
}

#navigation ul {
}

#navigation li {
	list-style-type: none;
	list-style-image: url(../img/listcon.gif);
	margin: 10px;
	width: 200px;
	
}

#navigation img {
	border: 0px;
	margin-right: 5px;
}

#content {
	width: 562px;
	
	float: right;
	padding: 10px;
	position: relative;
}

#content_box {
	width: 554px;
	padding: 4px;
	margin-bottom: 10px;
	background-image: url(../img/contentbox_back.jpg);
}

#content_inhalt {
	border: 2px solid #23120c;
	padding-top: 1px;
	padding-left: 8px;
	padding-right: 4px;
	padding-bottom: 2px;
	font-size: 12px;
	color: #FFFFFF;
}

#content h1 {
	font-size: 16px;
}

#form {
	width: 350px;
	padding: 4px;
	background-color: #f7c373;
	margin-bottom: 10px;
}

#form_inner {
	border: 2px solid #be975b;
	padding-top: 5px;
	padding-left: 8px;
	padding-right: 8px;
	padding-bottom: 2px;
	font-size: 12px;
	color: #000000;
}

#form_inner table {
	
	border: 0px;
	margin-top: 10px;
	margin-bottom: 10px;
}

#form_inner tr {
	vertical-align:top;
}

.form_inner_input {
	width: 100%;
}

.form_inner_field {
	width: 100%;
	height: 100px;
}

.form_inner_button {
	width: 87px;
	height: 17px;
	background-color: transparent;
	border: 0px;
}

#send{
	width: 87px;
	height: 17px;
	background-image: url(../img/send_btn.gif);
	background-repeat: no-repeat;
	float: right;
	
}

#reset{
	width: 87px;
	height: 17px;
	background-image: url(../img/reset_btn.gif);
	background-repeat: no-repeat;
}

#button_align {
	
}

#footage {
	clear: both;
	background-color: #00FF66;
	height: 15px;
}

um alles nochmal ein wenig zu verdeutlichen pack ich noch ein bild dazu

Schon mal Danke im vorraus.
 

Anhänge

  • problem.jpg
    problem.jpg
    5,4 KB · Aufrufe: 8
Hi,
danke fr die fixe antwort.

Das problem war in diesem fall das sich jetzt der content_holder nicht automatisch anpasst.
bzw. im firefox gibt es da probleme im ie wirds angezeigt wie ich es möchte.
 
Hast du meinen verlinkten WebmasterFAQ-Artikel gelesen und es schon so versucht?

Code: 
#content_holder {
        width: 828px;
        margin-left: 36px;
        background-image: url(../img/content_back.jpg);
        /*position: absolute;*/
}

.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}

.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height:1%;}
.clearfix {display:block;}
/* End hide from IE-mac */
Code: 
<div id="content_holder" class="clearfix">
Auf diese Weise passt sich nun bei mir die Container-Höhe auch in den nicht-IE-Browsern an.

mfg Maik
 
Ah bist der beste danke.

Bin parralel am lesen nur weil ich ein wening unterzeitdruck stehe hab ichs dazu noch gepostet.

FETTES DANKE NOCHMAL
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück