zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden DIV immer ganze Breite - normal?!?!?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 01.07.2008, 17:29
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2008
Beiträge: 2
csski befindet sich auf einem aufstrebenden Ast
Standard DIV immer ganze Breite - normal?!?!?

Hallo Forum,

folgendes Problem:

Ich habe ein 3spaltiges Layout.

Wrap: max-width: 980px; min-width: 780px;

links: width: 195px; position: absolute;
mitte: padding: 0px 185px 0px 200px; position: absolute; max-width: 600px; min-width: 400px; float: left;
rechts: width: 185px; position: relative; float: right;

Passt auch in (fast allen) Browsern sehr gut. Sogar im IE tut es das, was es soll:
flexibel im mitte-DIV zischen 980px und 780px.

NUR der FIREFOX 3 zickt rum.
Ist der Inhalt des miite DIVs zu kurz (keine lange Textzeile), wird der mitte DIV zur schmal und die Trennlinie (border-right) im mitte-DIV kollabiert nach innen - und macht das schöne Layout kaputt...

IE5, IE6, IE7, Firefox (bis 2.0.0.14), SeaMonkey 1.1.9 sind richtig.
Firefox 3, Opera 9.21, Safari stellen es anders (falsch?) dar...

Hat jemand einen Tipp?

csski
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 01.07.2008, 17:38
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Deine absolut und relative Positionierung versteh' ich nicht.
Kannst du mal ein Beispiel inklusive HTML- und CSS-Code zeigen?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 01.07.2008, 18:13
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 01.07.2008
Beiträge: 2
csski befindet sich auf einem aufstrebenden Ast
Standard HTML und CSS

Anbei HTML sowie CSS Code:

HTML Template:

Code:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Website</title>
<link href="../lib/code.css" rel="stylesheet" type="text/css" />
<!--[if IE 5]><link href="../lib/ie5.css" rel="stylesheet" type="text/css" /><![endif]-->
</head>
<body>
<div id="logo"></div>
<div id="allwrap">
  <div id="kopf">
    <div id="topbox">
      <div id="oben">
        <ul>
          <li><a href="">Home</a></li>
          <li><a href="">Sitemap</a></li>
          <li><a href="">Impressum</a></li>
        </ul>
      </div>
      <div id="unten">
        <div id="sprache"></div>
      </div>
    </div>
    <div class="streifen"></div>
  </div>
  <div class="cleardiv"></div>
  <div id="leiste">
    <div class="left">
      <div class="rootline">Aktuelle Seite: Home</div>
    </div>
    <div class="right">
      <ul>
        <li class="print"><a href="#" class="druck">Seite drucken</a></li>
        <li class="pdf"><a href="#" class="pdf">Seite als PDF</a></li>
      </ul>
    </div>
    <div class="cleardiv"></div>
  </div>
  <div id="inhalt">
    <div id="links">
      <div id="navigation">
        <ul>
          <li><a href="">Unternehmen</a></li>
          <li><a href="">Produkte</a></li>
          <li><a href="">Ihre Produktanforderung</a></li>
          <li><a href="">Neuheiten</a></li>
          <li><a href="">Geschäftsfelder</a></li>
          <li><a href="">Kontakt</a></li>
        </ul>
      </div>
      <div id="suchform">
        <form action="" method="post">
          <input name="" type="text" class="suchfeld" onfocus="if(this.value==defaultValue)this.value='';" value="Suchbegriff eingeben" />
          <input name="" type="button" class="suchego" value="&gt;&gt;" />
        </form>
      </div>
    </div>
    <div>
      <div id="mitte">
        <h1>Herzlich willkommen</h1>
        <div class="textbild">
          <h1>Herzlich willkommen</h1>
        </div>
        <div class="anker">
          <div class="totop"></div>
        </div>
        <div class="copyleft">
          <div class="cleft"></div>
          <div class="cleardiv"></div>
        </div>
      </div>
    </div>
    <div id="rechts">
      <h2>News</h2>
      <div class="aktuell"></div>
    </div>
    <div class="cleardiv"></div>
  </div>
</div>
</body>
</html>
CSS:

Code:
/* CSS Document */

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

html {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
body {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 5px;
	font-family: Arial, Helvetica, sans-serif;
}
div.cleardiv {
	clear: both;
	line-height: 0px;
	font-size: 0px;
	height: 0px;
	padding: 0px;
	margin: 0px;
	color: #FFF;
}
form {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#allwrap {
	padding: 0px 0px 0px 0px;
	margin: 0px 10px 0px 0px;
	max-width: 980px;
	min-width: 780px;
}
* html #allwrap {
 width: 980px;
 width: expression(
  (document.documentElement && document.documentElement.clientHeight) ?
   (document.documentElement.clientWidth < 780) ? "780px" : (( document.documentElement.clientWidth > 980 ) ? "980px" : "auto") :
   (document.body.clientWidth < 780) ? "780px" : (( document.body.clientWidth > 980 ) ? "980px" : "auto")
 );
}

#kopf {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	height: 290px;
	background: url(../img/pic.jpg) no-repeat bottom left;
}
#logo {
	padding: 8px 0px 0px 20px;
	position: absolute;
}
* html #logo {
	top: 8;
	left: 20;
	z-index: 30;
	width: 150px;
	height: 101px;
	padding: 0px 0px 0px 0px;
	overflow: hidden;
}
#topbox {
	float: right;
	font-size: 0.72em;
	width: 300px;
	/* height: 85px; */
}
#topbox #oben {
	padding: 5px 0px 0px 0px;
	clear: both;
	float: right;
}
#topbox #oben ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
}
#topbox #oben li {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	display: inline;
}
#topbox #oben ul li a {
	padding: 0px 10px 0px 10px;
	background: url(../img/pic.gif) repeat-y top right;
	text-decoration: none;
	color: #333;
}
#topbox #oben ul li a:hover {
	text-decoration: underline;
}
#topbox #oben ul li a.aktiv {
	text-decoration: underline;
}
#topbox #unten {
	padding: 45px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
	clear: both;
}
* html #topbox #unten {
	padding: 45px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
}
*+html #topbox #unten {
	padding: 23px 0px 0px 0px;
	padding: 20px 0px 0px 0px;
}
#topbox #sprache {
	float: right;
	margin: 0px 0px 6px 0px;
}
#topbox #sprache li {
	list-style-type: none;
	float: left;
	line-height: 20px;
}
#topbox #sprache ul li a {
	display: block;
	line-height: 20px;
	height: 20px;
	width: 30px;
	font-size: 0px;
	text-decoration: none;
	color: #FFF;
}

div.streifen {
	background: url(../img/pic.png) repeat-x top left;
	margin: 0px 0px 0px 0px;
	height: 25px;
	clear: both;
}

#leiste {
	background: url(../img/pic.png) repeat-x top left;
	height: 25px;
	margin: 4px 0px 30px 0px;
	line-height: 25px;
}
#leiste div.left {
	padding: 0px 200px 0px 5px;
	position: absolute;
	max-width: 780px;
	min-width: 680px;
}
* html #leiste div.left {
	width: 100%;
	min-width: 680px;
}

#leiste div.left div.rootline {
	padding: 10px 0px 0px 10px;
	font-size: 0.66em;
	line-height: 25px;
}
#leiste div.left div.rootline span {
	padding: 0px 0px 5px 0px;
	margin: 0px 4px 3px 4px;
	font-size: 14px;
	color: #B5B5B5;
}
#leiste div.left div.rootline a {
	color: #000;
	color: #B5B5B5;
	text-decoration: none;
	
}
#leiste div.left div.rootline a:hover {
	text-decoration: underline;
}
#leiste div.right {
	width: 186px;
	position: relative;
	padding: 10px 0px 0px 10px;
	margin: 0px 0px 0px 0px;
	float: right;
}
* html #leiste div.right {
	width: 195px;
}
#leiste ul {
	
}
#leiste li {
	display: inline;
	list-style-type: none;
}
#leiste div.right a {
	padding: 2px 0px 2px 20px;
	font-size: 0.66em;
	display: inline;
	text-decoration: none;
	color: #333;
	color: #B5B5B5;
	line-height: 25px;
	height: 25px;
	background: url(../img/pic.gif) no-repeat center left;
}
#leiste div.right a:hover {
	text-decoration: underline;
}
#leiste div.right a.druck {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 2px 5px 2px 20px;
}
#leiste div.right a.pdf {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 2px 0px 2px 20px;
}
* html #leiste div.right a.druck {
	padding: 0px 5px 0px 20px;
}
 * html #leiste div.right a {
	padding: 0px 0px 0px 20px;
}
#inhalt {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	max-width: 980px;
	min-width: 780px;
}
* html #inhalt {
 width: 980px;
 width: expression(
  (document.documentElement && document.documentElement.clientHeight) ?
   (document.documentElement.clientWidth < 780) ? "780px" : (( document.documentElement.clientWidth > 980 ) ? "980px" : "auto") :
   (document.body.clientWidth < 780) ? "780px" : (( document.body.clientWidth > 980 ) ? "980px" : "auto")
 );
}
#links {
	width: 195px;
	padding: 1px 0px 0px 0px;
	position: absolute;
	z-index: 2;
	font-size: 0.72em;
}
#links h2 {
	padding: 0px 10px 8px 10px;
	margin: 0px 0px 0px 0px;
	color: #666;
	font-size: 12px;
	letter-spacing: 1px;
	font-weight: bold;
	text-transform: uppercase;
}
#links img {
	padding: 0px 0px 0px 20px;
}
#links ul {
	padding: 0px 0px 0px 0px;
	margin: 0px 5px 0px 10px;
	background: url(../img/pic.gif) repeat-x bottom left;
}
#links li {
	padding: 1px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	background: url(../img/pic.gif) repeat-x top left;
}
#links ul li a {
	display: block;
	padding: 7px 0px 7px 15px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	color: #333;
	font-weight: bold;
	line-height: 12px;
}
#links ul li a:hover {
	background-color: #EBEBEB;
}
#links ul li a.aktiv {
	display: block;
	text-decoration: none;
	background: none;
	background: url(../img/pic.gif) no-repeat center left;
	background-color: #EBEBEB;
}
#links ul li.ifsub {
	background-color: #EBEBEB;
	padding: 0px 0px 2px 0px;
}
#links ul li.ifsub a.aktiv {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 7px 0px 7px 15px;
	margin: 0px 0px 0px 0px;
}
#links ul li.sub {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	list-style-type: none;
	background-image: none;
}
#links ul li.sub a {
	display: block;
	padding: 0px 0px 8px 15px;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	background-color: #EBEBEB;
	font-weight: normal;
	line-height: 13px;
	background-image: none;
}
#links ul li.sub a:hover {
	background: none;
	background-color: #EBEBEB;
	text-decoration: underline;
}
#links ul li.sub a.aktiv {
	background-image: none;
	text-decoration: underline;
}

#links #suchform {
	float: left;
	width: 180px;
	padding: 10px 0px 10px 10px;
	margin: 10px 0px 10px 0px;
	margin: 0px;
}
* html #links #suchform {
	width: 180px;
}
#links #suchform form {
	background-color: #FFE707;
	padding: 5px 0px 5px 0px;
}
#links input.suchfeld {
	border: 1px solid #666;
	width: 140px;
	margin: 0px 3px 0px 8px;
	padding: 1px 2px 1px 2px;
	color: #666;
}
* html #links input.suchfeld {
	width: 135px;
}

#mitte {
	padding: 0px 185px 0px 200px;
	position: absolute;
	font-size: 0.73em;
	line-height: 19px;
	max-width: 600px;
	min-width: 400px;
	float: left;
}
* html #mitte {
	width: 100%;
	min-width: 400px;
}
*+html #mitte {
	max-width: 600px;
	min-width: 400px;
}
#mitte div.textbild {
	margin: 0px 20px 0px 25px;
	padding: 0px 25px 0px 0px;
	background: url(../img/pic.gif) repeat-y top right;
}
#mitte div.textbild div.csc-textpic {
}

#mitte h1 {
	padding: 0px 20px 10px 25px;
	margin: 0px 20px 0px 0px;
	font-size: 1.95em;
	line-height: 1.07em;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	background: url(../img/pic.gif) repeat-y top right;
	vertical-align: top;
}
#mitte div.textbild h1 {
	padding: 0px 0px 12px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 1.95em;
	line-height: 1.07em;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	background-image: none;
	vertical-align: top;
}
#mitte div.textbild h2 {
	padding: 0px 0px 8px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 1.4em;
	line-height: 1.16em;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-weight: bold;
	vertical-align: top;
}
#mitte div.textbild ul {
	padding: 4px 0px 4px 0px;
	margin: 0px 0px 0px 25px;
}
#mitte div.textbild ul li {
	padding: 0px 0px 6px 0px;
	margin: 0px 0px 0px 0px;
	list-style-image: url(../img/ul-li.gif);
}
#mitte div.textbild ol {
	padding: 4px 0px 4px 0px;
	margin: 0px 0px 0px 25px;
}
#mitte div.textbild ol li {
	padding: 0px 0px 6px 0px;
	margin: 0px 0px 0px 0px;
}

#mitte div.anker {
	margin: 0px 45px 0px 25px;
	padding: 0px 0px 0px 0px;
	color: #999;
	background-color: #FFF;
	clear: both;
}
#mitte div.anker div.totop {
	padding: 5px 0px 0px 0px;
	text-align: right;
	float: right;
	width: 25%;
}
#mitte div.anker div.totop a {
	background: url(../img/pic.gif) no-repeat center left;
	padding: 0px 0px 0px 16px;
	color: #999;
	text-decoration: none;
	font-size: 0.98em;
}
#mitte div.anker div.totop a:hover {
	text-decoration: underline;
}
#mitte div.copyleft {
	margin: 0px 45px 5px 25px;
	padding: 0px 0px 10px 0px;
	background: url(../img/pic.gif) repeat-x top left;
	color: #999;
	background-color: #FFF;
	font-size: 0.98em;
	clear: both;
}
#mitte div.copyleft div.cleft {
	padding: 5px 0px 0px 0px;
	float: left;
}

#rechts {
	width: 185px;
	position: relative;
	padding: 0px 0px 20px 10px;
	margin: 0px;
	float: right;
	font-size: 0.72em;
	line-height: 17px;
}
* html #rechts {
	width: 195px;
}
#rechts h2 {
	padding: 0px 0px 18px 0px;
	margin: 0px 0px 8px 0px;
	font-size: 1.5em;
	vertical-align: top;
	color: #444;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-weight: normal;
	background: url(../img/pic.gif) repeat-x bottom right;
}
#rechts div a {
	color: #333;
	background: url(../img/pic.gif) no-repeat bottom left;
	padding: 0px 3px 0px 11px;
}
#rechts div img {
	margin: 4px 0px 4px 0px;
}
Mit Zitat antworten
  #4 (permalink)  
Alt 02.07.2008, 13:20
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 09.07.2004
Beiträge: 1.103
cgdesign befindet sich auf einem aufstrebenden Ast
Standard

Also bei mir sieht es im FF3 genauso aus wie im IE7. Kannst du vielleicht noch einen Screenshot machen, was sich da genau unterscheidet?
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fragen zu CSS und Joomla DOKTOR CSS 2 23.05.2011 20:29
Brauche Hilfe: Schwarzes Nichts Zwox CSS 10 19.11.2010 17:53
Header entfernen tripple CSS 17 15.06.2010 16:41
Schriftfarbe in den Eintragungsfeldern von jforms Steveislucky CSS 2 16.03.2010 11:59
CSS Text nebeinander? carstiee09 CSS 13 13.11.2009 20:18


Alle Zeitangaben in WEZ +2. Es ist jetzt 08:59 Uhr.