✔ zeile nimmt höhe nicht an

Status
Nicht offen für weitere Antworten.
X

XSxecutor

hey leude...
wäre sehr nett wenn mir jemand erklären könnte, wieso diese beiden tabellen-felder mit den id's "left_bottom" und "right_bottom" die von css vorgeschriebene höhe nicht annehmen...
ich wollte es eigentlich so einrichten, dass die zellen "left_top" und "right_top" in der höhe variabel sind... wäre sehr nett :)
HTML: 
<html>
<head>
<style type="text/css">
<!--

#left_top
{
background:url(images/layout/mein_bild1.png) repeat-y;
width:20px;
}

#menue_body_center
{
background:url(images/layout/mein_bild2.png) no-repeat #c8c8c8 bottom;
width:220px;
vertical-align:top;
}

	#menue_content
	{
	margin:0 0 0 0;
	padding-top:0px;
	padding-bottom:20px;
	padding-left:3px;
	padding-right:3px;
	}

#right_top
{
background:url(images/layout/mein_bild3.png) repeat-y;
width:15px;
}

#left_bottom
{
background:url(images/layout/mein_bild4.png) no-repeat bottom;
width:20px;
height:20px;
}

#right_bottom
{
background:url(images/layout/mein_bild5.png) no-repeat bottom;
width:15px;
height:20px;
}
-->
</style>
</head>
<body>
<table width="255" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="left_top">&nbsp;</td>
    <td rowspan="2" id="content">
      <div id="menue_content">
      <p align="justify">Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. </p>
      <p>Beispiel. etc.</p></div>
    </td>
    <td id="right_top">&nbsp;</td>
  </tr>
  <tr>
    <td id="left_bottom">&nbsp;</td>
    <td id="right_bottom">&nbsp;</td>
  </tr>
</table>
</body>
</html>
 
Bin ich mir jetzt nicht sicher aber ich würde anstatt:

Code: 
#left_top
eine Klasse daraus machen.(ebenso bei den anderen IDs in den td-Tags)
Code: 
.left_top
demzufolge dann statt:
Code: 
<td id="left_top">&nbsp;</td>
das hier:
Code: 
<td class="left_top">&nbsp;</td>

Vielelicht klappts dann.

Nachtrag: Eventuell noch folgendes hinzufügen:
Code: 
.right_bottom
{
background:url(images/layout/mein_bild5.png) no-repeat bottom;
width:15px;
min-height:20px;
height:20px;
}
 
Zuletzt bearbeitet:
Das Ganze wirkt auch etwas durcheinander. Du hast da 2 Spalten in einer Zeile. Die ersten Spalte formatierst Du in der ID "left_content". Die zweite Spalte mit der ID "content", die nirgends deklariert ist. Und im Inhalt selber setzt Du nochmal ein div und formatierst diesen mit ID "menue_content".
Also da ist irgendetwas überflüssig. Lassen wir mal alle IDs weg und bestimmen für die erste Spalte 50px. Wenn ich jetzt in der zweiten Spalte 100px angebe, dann wird die erste Spalte ebenfalls 100px hoch sein. Wenn ich dann noch den div mit 200px definiere, dann habe ich eine Spaltenhöhe von 200px, egal was in der ersten und zweiten angegeben ist.
 
ok, mein fehler, also hatte vergessen im css die id umzubenennen... "menue_body_center" soll "content" sein... sry...
also ich hab ja eigentlich 3 spalten in 2 zeilen, wobei die ober zelle aus der mittleren spalte mit der unteren zelle der mittleren spalte verbunden ist. nun sollen die zellen unten rechts und links eine feste höhe bekommen und die zellen oben rechts und links eine variable höhe, sodass beim ändern des inhalts, die zellen oben rechts und links ebenfalls ihre höhe ändern...
 
ja genau und das find ich eigentlich ziemlich schade... im safari und opera auch nicht...
 
Also so gehts im FF, IE und Opera.

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
<!--

#left_top
{
background:blue url(images/layout/mein_bild1.png) repeat-y;
width:20px;
}

#menue_body_center
{
background:url(images/layout/mein_bild2.png) no-repeat #c8c8c8 bottom;
width:220px;
vertical-align:top;
}

	#menue_content
	{
	margin:0 0 0 0;
	padding-top:0px;
	padding-bottom:20px;
	padding-left:3px;
	padding-right:3px;
	background:#c8c8c8;
	}

#right_top
{
background:blue url(images/layout/mein_bild3.png) repeat-y;
width:15px;
}

#left_bottom
{
background:red url(images/layout/mein_bild4.png) no-repeat bottom;
width:20px;
height:20px;
}

#right_bottom
{
background:red url(images/layout/mein_bild5.png) no-repeat bottom;
width:15px;
height:20px;
}

#middle_bottom
{
background:#c8c8c8;
width:220px;
height:20px;
}
-->
</style>
</head>
<body>
<table width="255" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="left_top">&nbsp;</td>
    
    <td id="menue_content">
      <div id="menue_body_center">
      <p align="justify">Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. Inhalt. </p>
      <p>Beispiel. etc.</p>
      </div>
    </td>
    
	<td id="right_top">&nbsp;</td>
  </tr>

  <tr>
	<td id="left_bottom">&nbsp;</td>
    <td id="middle_bottom">&nbsp;</td>
    <td id="right_bottom">&nbsp;</td>
  </tr>
  
</table>
</body>
</html>

Das Problem war der rowspan. Statt dem rowspan habe ich jetzt eine 3 Spalte in der zweiten Zeile eingefügt. Da border eh = 0 ist, sieht man es ja auch nicht.
 
@XSxecutor: Bitte halte dich an die Netiquette (Nr.15) bzgl. deiner durchgängigen Kleinschreibung. Vielen Dank.
 
Ok, das mit der Kleinschreibung geht klar. So, was du gemacht hast, kann ich wohl nachvollziehen, aber ich wollte die untere mittlere Spalte eigentlich gar nicht haben, da dort der Inhalt aus der oberen Spalte mit einfließen sollte. Nun kann man die mittlere Spalte nicht auf null reduzieren, da die Zellen links und rechts die Höhe für die mittlere Zelle mit vorgeben würden.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück