HTML DIVs in Tabelle wollen sich nicht in der Breite anpassen

rony12 · 21. Dezember 2012

Hallo,

Erstmal ein paar Worte zur Intention

ich bastel gerade eine kleine Seite...
Diese soll eine Übersicht, über anstehende, zu bearbeitende und erledige Punkte geben.

Dabei soll ein Nutzer, der die Punkte eintragen kann, Titel, Untertitel, zusammenfassungen und Volltexte eintragen.
Dabei soll je nach breite der Internetseite Dynamisch untertitel, zusammenfassung und Volltext dargestellt werden. (So das man eben auch mit einem großen Monitor profitiert)

Nun hatte ich erst drei DIVs nebeneinander angeordnet, welche eine Dynamische breite hatten. Mittels "overflow:hidden; white-space:nowrap;" habe ich den Zeilenumbruch verhindert, und dext wird wirklich bis zum aller letzten DIV pixel angezeigt.

Nun kam mir dann die Idee, dann einzelne "Spalten" ausblenden zu lassen. Also das der Benutzer, mittes klick auf eine Checkbox Eine oder Zwei Kathegorien ausblenden zu lassen.
Das funktioniert auch - ich habe nun eine tabelle angelegt, mit einer Zeile und drei spalten, und in dieser befinden sich nun jeweils einer der drei DIVs.

Die Tabelle hat nun eine Breite von 100% - damit sich drei oder eben zwei spalten die breite gleichmässig "unter sich" aufteilen.

Nun ist es aber so, dass die Texte geladen werden, aber das "overflow:hidden; white-space:nowrap;" nicht mehr funktionieren.
Dabei habe die DIVs nur mit einer tabelle umschlossen, und die stylesheets angepasst...

Ich poste jetzt mal den code... ist nicht besoders toll.... nur eben zum basteln

head.php

PHP:

<?php
    session_start();
    
    include 'config.php';
    include 'vnr.php';
    
?>
<!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" xml:lang="en" lang="de">
    <head>
        <title>Toppicker</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="jquery-1.7.1.js" type="text/javascript"></script>
        <script type="text/javascript">
        $(document).ready(function() {
            $('#btnHide1').click(function() {
                $('td:nth-child(1)').toggle();        
            });
        });
        $(document).ready(function() {
            $('#btnHide2').click(function() {
                $('td:nth-child(2)').toggle();
            });
        });
        $(document).ready(function() {
            $('#btnHide3').click(function() {
                $('td:nth-child(3)').toggle();        
            });
        });
        </script>    
    </head>
<body>

style.css

HTML:

* {
    padding:0;
    margin:0;
}

body {
    background-color: #F0F0F0;
    font-family: Verdana;
    font-size: 13px;
}

table {
    width: 100%;
    padding-top: 115px;
}

table td {
    vertical-align:top;
    background-color: grey;
    padding: 10px;
}

.header{
    background-color: rgba(16,16,16,0.82);
    height: 100px;
    width: 100%;
    position:fixed;
    box-shadow:4px 6px 4px #C9C9C9;
    border-bottom: solid 2px black;
    color: white;
}

.zuerledigen{
    box-shadow:4px 6px 4px #C9C9C9;
    background-color: #E0E0E0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    border: solid 2px #C0C0C0;
    overflow:hidden;
    white-space:nowrap;
    width: 100%;
}


.inbearbeitung{
    box-shadow:4px 6px 4px #C9C9C9;
    border: solid 2px #C0C0C0;
    background-color: #E0E0E0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
   }

.erledigt{
    box-shadow:4px 6px 4px #C9C9C9;
    border: solid 2px #C0C0C0;
    background-color: #E0E0E0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    -khtml-border-radius: 5px;
    border-radius: 5px;
    width: 100%;
    
}

.zweiter{
    margin-bottom: 5px;
    margin-top: 5px;
}


.spalte {
    padding-bottom: 5px;
    padding-top: 5px;    
}

.head{
    font-weight: bold;
    overflow:hidden;
    white-space:nowrap;    
}

.underline{
    font-size: 11px;
    font-style: italic;
    text-indent: 20px;
    overflow:hidden;
    white-space:nowrap;    
}

.short{
    font-size: 11px;
    font-style: italic;
    text-indent: 20px;
    overflow:hidden;
    white-space:nowrap;    
}

.full{
    font-size: 11px;
    font-style: italic;
    text-indent: 20px;
    overflow:hidden;
    white-space:nowrap;    
}



@media(max-width: 880px) {
    .head {
        font-size: 16px;
    }
    
    .underline{
        display: none;
    }
    .short{
        display: none;
    }
    .full{
        display: none;
    }    
}

@media (max-width: 1800px) {
    .full {
        display: none;
    }
}

@media (min-width: 1800px) {
    .short {
        display: none;
    }
}

@media(max-width: 1150px) {
    body {
        font-size: 13px;
    }
    .short{
        display: none;
        }
    .full {
        display: none;
    }
}

@media (min-width: 1150px) {
    .underline {
        display: none;
    }
}

@media(min-width: 480px) {
    .button {
        display: none;
    }
}

@media (max-width: 480px){
    .zuerledigen {
        display: none;
    }
    .erledigt {
        display: none;
    }
    .inbearbeitung {
        display: none;
    }
    .button {
    color: #303030;
    border: 1px solid grey;
    font-weight: bold;
    width: 100%;
    margin-bottom: 10px;
    height: 22%;
    font-size: 30px;
    }
}

@media (max-width: 320px) {
    .button {
        font-size: 20px;
    }
}

index.php

PHP:

<?php
	include 'head.php';
	$alt_bg = "style=\"background-color: #D0D0D0;\"";
	$farbcode = "#D0D0D0";
	?>	
<input class="button" type="button" value="Neuer Eintrag" name="neuer_eintrag"/>

<div class="header">
<div class="checkbox">Ausstehend<input id="btnHide1" type="checkbox"/></div>
<div class="checkbox">In Bearbeitung<input id="btnHide2" type="checkbox"/></div>
<div class="checkbox">Erledigt<input id="btnHide3" type="checkbox"/></div>
</div>

<hr/>
<?php
	$sql = "SELECT * FROM `speicher` WHERE `status` = 1";
	$anzeige_query = mysql_query($sql) or die ("Anfrage nicht erfolgreich");
	$farbe = 1;
?>
<table>
<tr>
<td>
<div  class="zuerledigen" onmouseover="this.style.border='solid 2px #FF8800'" onmouseout="this.style.border='solid 2px #C0C0C0'">
 <?php echo "Anstehend: ".mysql_affected_rows();?>
	<hr/>
 <div class="zweiter">
<?php
		while ($zeig = mysql_fetch_array($anzeige_query)) {
?>
		<div class="spalte" <?php if($farbe%2 == 1) { echo $alt_bg;}?> onmouseover="this.style.background='white'" onmouseout="this.style.background='<?php if($farbe%2 == 1) { echo $farbcode;}?>'">
			<div class="head"><?=$zeig['Titel']?></div>
			<div class="underline"><?=$zeig['Untertitel']?></div>
			<div class="short"><?=$zeig['Zusammenfassung']?></div>
			<div class="full"><?=$zeig['Komplett']?></div>
		</div>
<?php
$farbe += 1;
}
$farbe = 1;
?>
 </div>
</div>
</td>

<input class="button" onmouseover="this.style.background='#4F9ED3'" onmouseout="this.style.background=''" type="button" value="Anstehend (<?php echo mysql_affected_rows();?>)" name="anstehend"/>
<?php
	$sql = "SELECT * FROM `speicher` WHERE `status` = 3";
	$anzeige_query = mysql_query($sql) or die ("Anfrage nicht erfolgreich");	
?>

<td>
<div class="erledigt" onmouseover="this.style.border='solid 2px #FF8800'" onmouseout="this.style.border='solid 2px #C0C0C0'">
	<?php echo "Erledigt: ".mysql_affected_rows();?>
	<hr/>
	<div class="zweiter">
<?php
		while ($zeig = mysql_fetch_array($anzeige_query)) {
?>
		<div class="spalte" <?php if($farbe%2 == 1) { echo $alt_bg;}?> onmouseover="this.style.background='white'" onmouseout="this.style.background='<?php if($farbe%2 == 1) { echo $farbcode;}?>'">
			<div class="head"><?=$zeig['Titel']?></div>
			<div class="underline"><?=$zeig['Untertitel']?></div>
			<div class="short"><?=$zeig['Zusammenfassung']?></div>
			<div class="full"><?=$zeig['Komplett']?></div>	
		</div>
<?php
$farbe += 1;
}
$farbe = 1;
?>
 </div>
</div>
</td>

<input class="button" onmouseover="this.style.background='#31B404'" onmouseout="this.style.background=''" type="button" value="Erledigt (<?php echo mysql_affected_rows();?>)" name="erledigt"/>	
<?php
	$sql = "SELECT * FROM `speicher` WHERE `status` = 2";
	$anzeige_query = mysql_query($sql) or die ("Anfrage nicht erfolgreich");
?>
<td>
<div class="inbearbeitung" onmouseover="this.style.border='solid 2px #FF8800'" onmouseout="this.style.border='solid 2px #C0C0C0'">
  <?php echo "In Bearbeitung: ".mysql_affected_rows();?>
	<hr/> 
   <div class="zweiter">
	<?php
		while ($zeig = mysql_fetch_array($anzeige_query)) {
?>
		<div class="spalte" <?php if($farbe%2 == 1) { echo $alt_bg;}?> onmouseover="this.style.background='white'" onmouseout="this.style.background='<?php if($farbe%2 == 1) { echo $farbcode;}?>'">
			<div class="head"><?=$zeig['Titel']?></div>
			<div class="underline"><?=$zeig['Untertitel']?></div>
			<div class="short"><?=$zeig['Zusammenfassung']?></div>
			<div class="full"><?=$zeig['Komplett']?></div>	
		</div>
<?php
$farbe += 1;
}
$farbe = 1;
?>
 </div>
</div>
</td>
</tr>
</table>
<input class="button" onmouseover="this.style.background='#E30E0D'" onmouseout="this.style.background=''" type="button" value="In Bearbeitung (<?php echo mysql_affected_rows();?>)" name="in_bearbeitung"/>
</body>
</html>

Daaron · 21. Dezember 2012

Wenn deine <div>'s doch pro Spalte ne eindeutige Klasse haben, wieso machste den toggle nicht direkt auf die Klasse und sparst dir die Tabelle?
Tabellen haben in so einem Layout nix zu suchen, sie sind ausschließlich für tabellarische Daten.

rony12 · 21. Dezember 2012

ich weiß, dass tabellen semantisch nicht richtig sind... nur hätte ich dann mit dem toggle dann eben auch die komplette ausrichtung der div verändern müssen, was so eine tabelle nun automatisch macht.

Denn wenn ich ein DIV nicht anzeigen will, dann muss ich ja die positionsinformationen dazu ändern, und das eben in für die möglichen konstelationen...

Daaron · 22. Dezember 2012

Die Ausrichtung zu korrigieren ist doch dann im Zweifel auch Kinderkram, wenn du eh schon für den Toggle mit ner JS-Library rumspielst.

rony12 · 22. Dezember 2012

ich hab es mittlerweile auch hinbekommen.

ich habe die breite der spalten einfach fixiert - das geht auch wenn man ihnen dynamische größen gibt

Suche

HTML DIVs in Tabelle wollen sich nicht in der Breite anpassen

rony12

Commodore

Daaron

Fleet Admiral

rony12

Commodore

Daaron

Fleet Admiral

rony12

Commodore

Ähnliche Themen