✔ Breite im Browser passt nicht

selle1 · 1. November 2007

Hallo,

ich habe das Problem, dass die Breite aus einem für mich nicht erklärlichen Grund zu groß angezeigt wird.
Habe mich nun ein wenig mit HTML/CSS beschäftigt, aber das klappt noch nicht so ganz.
Anbei mein Versuch, keine Angst das meiste ist nur Fülltext.

Bitte um Hilfe.

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Medizinportal</title>
<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
}
div#footer{
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:50px;
	background-image: url(../buttons/bg_footer.jpg);
	top: auto;
	/* Nur fuer den IE */
	overflow:hidden;
  
  
}
#header {
	position:absolute;
	width:100%;
	height:100px;
	z-index:1;
	background-image: url(../buttons/bg-top.jpg);
	margin: 0;
	top: 0;
}
#logo {
	position:absolute;
	width:200px;
	height:100px;
	z-index:1;
	margin-left: 50px;
}
#navi {
	position:absolute;
	width:100%;
	z-index:2;
	top: 40px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-size: medium;
	margin-left: 60px;
	left: 18px;
}
a:link {
	font-family: Geneva, Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #666666;
}
a:hover {
	color: #9EB735;
	text-decoration: underline;
}
a:active {
	color: #9EB735;
	text-decoration: underline;
}
a:visited {
	text-decoration: none;
}
#maintext {
	position:absolute;
	width:100%;
	z-index:2;
	left: 0;
	top: 100px;
	margin-bottom: 50px;
	margin-left: 0px;
	margin-right: 20px;
	padding: 0;
}
#text {
	position:absolute;
	z-index:3;
	margin-bottom: 50px;
	margin-top: 45px;
	margin-right: 20px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	overflow: auto;
	margin-left: 200px;
	left: 0px;
}
#Layer1 {
	position:absolute;
	width:200px;
	height:115px;
	z-index:3;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body leftmargin="0" topmargin="0" onLoad="MM_preloadImages('../buttons/home1.jpg','../buttons/leistung1.jpg','../buttons/kontakt1.jpg','../buttons/impressum1.jpg')">
<div id="header">
  <div id="logo"><img src="../buttons/logo.jpg" alt="" width="200" height="100"></div>
</div>
<div id="maintext">
  <div id="navi">
    <table width="94" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td width="94"><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','home','../buttons/home1.jpg',1)" onMouseOver="MM_nbGroup('over','home','../buttons/home1.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../buttons/home.jpg" alt="" name="home" width="94" height="43" border="0" onload=""></a></td>
      </tr>
      <tr>
        <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','leistungen','../buttons/leistung1.jpg',1)" onMouseOver="MM_nbGroup('over','leistungen','../buttons/leistung1.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../buttons/leistungen.jpg" alt="" name="leistungen" width="94" height="43" border="0" onload=""></a></td>
      </tr>
      <tr>
        <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','kontakt','../buttons/kontakt1.jpg',1)" onMouseOver="MM_nbGroup('over','kontakt','../buttons/kontakt1.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../buttons/kontakt.jpg" alt="" name="kontakt" width="94" height="43" border="0" onload=""></a></td>
      </tr>
      <tr>
        <td><a href="javascript:;" target="_top" onClick="MM_nbGroup('down','group1','impressum','../buttons/impressum1.jpg',1)" onMouseOver="MM_nbGroup('over','impressum','../buttons/impressum1.jpg','',1)" onMouseOut="MM_nbGroup('out')"><img src="../buttons/impressum.jpg" alt="" name="impressum" width="94" height="43" border="0" onload=""></a></td>
      </tr>
    </table>
    </div>
  <div id="text">
    
      <h2>Lorem Ipsum</h2>
      <p>Lorem ipsum eu nec graece mediocrem. At zzril animal eum, ex dicam  latine mei, vitae essent civibus est no. </p>
      <p>Ex nostro gubergren percipitur  eam. Usu legimus utroque consulatu at. Eu his agam decore, qui invidunt  repudiandae contentiones eu.<br>
      Aperiam necessitatibus mei ea, eu quo quot velit contentiones.  Accommodare vituperatoribus cum ne, melius corrumpit no cum, cu <br>
      eam  appetere ponderum. Vidit mandamus sea ne, no qui modo dicat  appellantur. Nam nibh debet volutpat an, nam ut velit eruditi. <br>
      Has  timeam adipiscing in, in facete prodesset sed, vim justo dicta tibique  te. No his justo epicuri copiosae, minim menandri salutandi<br> 
      mei eu.Ea sale utamur his. Modo deterruisset et pro, sale vitae diceret mei  ut, probo cetero mentitum at sit. Eu quo habeo novum appetere, <br>
      dolorem  voluptaria eu has. An vix alienum definitionem.Per in aliquid veritus suscipit, eum no affert consul corpora. Diam  fuisset nam id.<br> 
      Summo graeci consectetuer eum te. Ex pri atqui iriure,  nam soluta mucius perpetua ei, qui quodsi labores legendos ea. Labore  repudiandae <br>
      sit ex.Veritus indoctum suscipiantur ei mel, molestiae efficiendi eum id,  id euripidis consequat argumentum mea. His dicat maiorum <br>
      dignissim eu.  Autem suscipiantur an sed, erroribus dissentiet delicatissimi ne sea.  At vel facete oporteat. Malorum veritus cotidieque ea ius, <br>
      pro ea  omittam deserunt. Mei an laudem partem cotidieque, in mel malis possit  dictas. Augue vitae numquam duo an, usu in tantas omnium.<br>
      Duo solet labores cu. Ei vix vide dicit, ea feugiat similique vix.  Eu meis omnis sit, qui molestie moderatius cu. Officiis hendrerit  efficiantur <br>
      nam te. Cum expetendis adipiscing at, nec et meliore  tincidunt sententiae, deleniti splendide adolescens ei duo.At ius feugiat vivendo apeirian,<br> 
      ne graece aperiam sed. Ut eam idque  mollis, nam te debitis menandri omittantur, ne pro sonet putent. In vim  vocent alterum, eu eos nisl inani <br>
      omnes. Pro ad regione fierent, cu per  vituperatoribus philosophia accommodare. Ne fastidii oportere has.Rebum neglegentur ad ius, ut ius<br> 
      volutpat posidonium. Ex ridens  tritani docendi nam, eos quodsi scribentur cotidieque id, per ut  maiorum periculis. Id ferri scribentur pri,<br> 
      convenire explicari sea ad.  Pro saepe putent quaestio at, mei cu iriure mnesarchum.</p>
  
  </div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>
<div id="footer"></div>
</body>
</html>

Maik · 1. November 2007

Hi,

und von welcher Breite sprichst du?

#header, #maintext und #footer besitzen, wie von dir festgelegt, eine Breite von 100%.

Ansonsten solltest du die 100% für das DIV #navi herunterschrauben, wenn die eingebundene Tabelle nur 94px breit ist, und rechts davon das DIV #text sitzt.

selle1 · 1. November 2007

Hallo,

ich wollte eigentlich 3 Bereiche haben. Oben, Mitte und unten. Oben und unten sollten den Header und Footer beinhalten und diese Bereiche sollten fest sein (feste Höhe). Bekomme das aber nicht hin. Der mittlere Teil sollte sich automatisch mitscrollen lassen, sobald der mittlere Teil eben zu groß wird. Alle Bereiche sollen sich über die gesamte Browserbreite erstrecken.

Maik · 1. November 2007

Die Bereiche erstrecken sich doch über die gesamte Fensterbreite, ebenso besitzen der Header und Footer ein feste Höhe.

Wie sich ein scrollfähiger Bereich mit relativer Höhe einrichten lässt, kannst du im CSS-Tutorial Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken nachlesen.

selle1 · 1. November 2007

Danke

selle1 · 1. November 2007

Hallo Maik,

ich habe das Tutorial durch und auch ganz gut hinbekommen. Leider kriege ich den rechten Teil (Textteil) nicht so hin, wie erwünscht. Ich möchte, dass sich der Browser automatisch anpasst, sprich in der horizontalen keine Scrollbalken zu sehen sind.

Anbei derLink

Dank Dir.

Maik · 1. November 2007

Versuch es mal hiermit:

Code:

#rechts {
        position: absolute;
        top: 150px;                /* Abstand zum oberen Fensterrand */
        bottom: 50px;                /* Abstand zum unteren Fensterrand */
        right: 0px;   /* Abstand zum rechten Fensterrand */
        left:200px;               /* Blockbreite */
        padding: 0;                /* Interpretation Boxmodell! */
        background-color: #fff;
        overflow: auto;        /* Scrollbalken unterbinden */

  /* nur für IE: */
          height: expression((document.body.clientHeight - 200) + "px");
                                        /* top-Wert + bottom-Wert = 200 */
          width: expression((document.body.clientWidth - 200) + "px");
        font-family: Verdana, Arial, Helvetica, sans-serif;
        /*width: ;*/ /* auskommentiert = deaktiviert */
        /*width: auto;*/ /* auskommentiert = deaktiviert */

  }

selle1 · 1. November 2007

Klappt hervorragend!
Danke. Bei der Version vorher hat nur unser blinder Freund IE6 gemeckert.

✔ Breite im Browser passt nicht

selle1

Erfahrenes Mitglied

Maik

selle1

Erfahrenes Mitglied

Maik

selle1

Erfahrenes Mitglied

selle1

Erfahrenes Mitglied

Maik

selle1

Erfahrenes Mitglied

Neue Beiträge