Schrift
Start · Board · Weitere Sprachen · HTML, CSS und Javascript
[thread]10510[/thread]

CSS: width:100%; will nicht

Leser: 1


<< >> 10 Einträge, 1 Seite
styx-cc
 2007-10-04 17:41
#100273 #100273
User since
2006-05-20
533 Artikel
BenutzerIn

user image
Halli hallo, eigentlich ein eher kleines Problemchen, aber vorweg mal der Code:
[html]<?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 lang="de">

<head>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />

<meta name="description" content="" />

<meta name="keywords" content="" />

<title>titel</title>
<style type="text/css">
body {

margin: 5px;

padding: 0;

font: 85% arial, hevetica, sans-serif;

text-align: center;

background-color: #89a9b8;
color: black;

}
.main_table {
border: 1px solid #000000;
width: 100%;
background: #3d5467;
padding: 10px;
}
.head {
background-color:#cedce3;
width:100%;
}
</style>

</head>

<body>
<table class="main_table">
<tr>
<td>
<table>
<tr>
<td colspan="2">
<div class="head">Test<br />Test</div>
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>[/html]
Eigentlich wollte ich nur, das der <div>-Bereich mit der Klasse .head auch 100% Weite bekommt, leider klappt das nicht vernueftig, allerdings hats beim .main_table auch geklappt... hat von euch vielleicht einer einen Rat fuer mich?
Pörl.
renee
 2007-10-04 18:34
#100279 #100279
User since
2003-08-04
14371 Artikel
ModeratorIn
[Homepage] [default_avatar]
das div wird nur so groß, wie die direkt umgebende Tabelle... Du musst die Elemente außenrum also auch auf 100% setzen...
OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/
GwenDragon
 2007-10-04 19:00
#100281 #100281
User since
2005-01-17
14770 Artikel
Admin1
[Homepage]
user image
Das DIV bekommt die Breite des Elternelements und das ist das TD.
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
styx-cc
 2007-10-11 08:53
#100651 #100651
User since
2006-05-20
533 Artikel
BenutzerIn

user image
so, noch ein problem mit der weite von elementen, das css sieht so aus:
Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
#entry_box {
  width:400px;
  border: 1px solid black;
  margin-left:auto; 
  margin-right:auto;
  background: #99ccff;
  margin-bottom: 30px;
  overflow: hidden;
}

#entry_box a {color:blue; text-decoration:none; font-weight: normal;}
#entry_box a:hover {color:yellow; text-decoration:none;}

.gb_table {
  width: 400px;
}

.head_gb_entry {
  width:400px;
	border-bottom: 1px dashed black; 
	height: 18px; 
	color: white;	
	background:#7f99ff;
	text-align: left;
	font-weight: bold;
}


Es geht um folgende Seite:
http://styx-cc.de/cgi-bin/index.cgi?p=gb

Ich hab extra darauf geachtet, dass die Elternelemente alle weit geug sind, und trotzdem stell er mit die td mit class="head_gb_entry" zu kurz da, wisst ihr da abhilfe?
der IE machts wie ich will...

ich geh jetzt schlafen, nacht!
Pörl.
Struppi
 2007-10-11 14:39
#100670 #100670
User since
2006-02-17
628 Artikel
BenutzerIn
[Homepage]
user image
Dein HTML Code ist unglaublich aufgebläht und zudem falsch. Du solltest versuchen HTML semantisch zu benutzen, also die Elemente für das verwenden was ihre Bedeutung entspricht. Darüber hinaus benutzt du lauter inline Styles was absolut nicht nötig ist. Die Fehldarstellungen kommen auf jeden Fall nur durch den wenig durchdachten Aufbau des HTML/CSS Codes zustande.

Die Liste der Gästebucheinträge könnte so aussehen:

Code: (dl )
1
2
3
4
5
6
7
8
9
10
11
12
<dl id="gb">
  <dt> Titel </dt>
  <dd> Text 
  <p> nummer des eintrags / ZUsatz, wie Kommentare </p>
  </dd>

  <dt> Titel </dt>
  <dd> Text 
  <p> nummer des eintrags / ZUsatz, wie Kommentare </p>
  </dd>
...
</dl>


Das CSS dazu:
Code: (dl )
1
2
3
#gb {....}
#gb dt {...}
#gb dd {...}


Damit kannst du das bisherige ohne Probleme umsetzen.
GwenDragon
 2007-10-11 15:45
#100675 #100675
User since
2005-01-17
14770 Artikel
Admin1
[Homepage]
user image
Zudem solltest du erst einmal gültiges HTML erzeugen, dann kann auch der Browser es besser darstellen.
Das HTML ist nicht wohlgeformt und weist massig Fehler auf.
Validier das doch mal.
http://validator.w3.org/check?url=http://styx-cc.d...




Warum verwendest du eine Tabelle für jeden einzelnen Eintrag im Gästebuch?
Das geht auch mit DIV oder P.
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
styx-cc
 2007-10-11 16:02
#100676 #100676
User since
2006-05-20
533 Artikel
BenutzerIn

user image
okay... doch so schlimm? *grins*
werde ich dafuer sorgen das dass html wieder valid ist und mir noch ein wenig was zum boxmodell & css durchlesen. erstmal vielen dank fuer die kritik!

MfG
Pörl.
nepos
 2007-10-11 16:34
#100679 #100679
User since
2005-08-17
1420 Artikel
BenutzerIn
[Homepage] [default_avatar]
Zum Testen kannst du dir im Firefox die Addons WebDeveloper und Firebug mal ansehen. Für die Sache mit den HTML-Fehlern könnte dann auch noch das HTMLTidy-Plugin nützlich sein.
GwenDragon
 2007-10-11 16:47
#100682 #100682
User since
2005-01-17
14770 Artikel
Admin1
[Homepage]
user image
Ja, das Boxmodel ist sehr wichtg. Zudem du wissen musst, an welche Elemente überhaupt Werte vererbt werden.
Ich empfehle dir
http://www.w3c.de/
http://www.edition-w3c.de/
die Drachin Gwen

Meine Perl-Artikel · perldev – verschiedene Perl-Versionen unter Windows starten
styx-cc
 2007-10-11 20:43
#100696 #100696
User since
2006-05-20
533 Artikel
BenutzerIn

user image
Ahh... danke! Zwei sehr gute Links, bin gerade am Lesen von diesen Seiten, ist sicher fuer jeden der Webprogrammierung betreibt ganz interessant:

XHTML 1.0 XHTML 1.1 und CSS
Pörl.
<< >> 10 Einträge, 1 Seite



View all threads created 2007-10-04 17:41.