css-problem: width

mc_hammer · 14.03.2007, 11:37

hallo

ich komme einfach nicht dahinter, wo der fehler liegt. folgenden css-code, welcher mir ein spaltenlayout generieren soll (col_1 - col_5):

Code:

#printMotSchr {
	font-size: 0.7em;
}
	#printMotSchr div{
		height:auto;
		display: block;
		float:left;
		width:593px;
		min-height:22px;
		padding:5px 5px 1px 3px;
		border-bottom:1px solid #CCCCCC;
	}
	#printMotSchr .col_1 {
		margin-left: 0; 
		width: 150px;
		color:red;
	}
	#printMotSchr .col_2 {
		margin-left: 10px; 
		width: 70px; 
	}
	#printMotSchr .col_3 {
		margin-left: 10px; 
		width: 150px; 
	}
	#printMotSchr .col_4 {
		margin-left: 10px; 
		width: 40px; 
	}
	#printMotSchr .col_5 {
		margin-left: 10px; 
		width: 120px; 
	}

und dann den html-code:

Code:

<div id="printMotSchr" >
	<div>
	<span class="col_1">Name</span>
	<span class="col_2">Adresse</span>
	<span class="col_3">E-Mail</span>
	<span class="col_4">Bewertung</span>
	<span class="col_5">Sonstiges</span>
	</div>
</div>

das problem: die width-angaben werden nicht ausgeführt. testhalber hab ich in .col_1 mal noch eine rote schriftfarbe gewählt, und die erscheint auch so. aber die breite (width) wird partout ignoriert (margin wird aber ausgeführt). sieht da jemand den fehler?

grüsse
oliver

phpdummi · 14.03.2007, 14:16

ganze einfach <span> unterstüzt keine width angabe ...
vergrößere margin oder nimm mehrere div's so wie jeder andere auch

//Edit:
solltest du vorhaben einen rahmen bzw. hintergrund für jedes span element hinterlegen zu wollen arbeite mit padding.
ich empfehle dir aber einfach mehrere divs' zu nehmen

mc_hammer · 14.03.2007, 14:23

Zitat:

Zitat von phpdummi

ganze einfach <span> unterstüzt keine width angabe ...

ganz bestimmt nicht? das ist seltsam, ich habe noch einige andere listen mit demselben prinzip aufgebaut (auch mit <span>), wo es prima geht, kann aber den (technischen) unterschied zu dieser beim besten willen nicht ausfindig machen... na gut, dann schalt ich mal auf <div> um, ist vielleicht sowieso besser.

phpdummi · 14.03.2007, 14:37

die listen würd ich gern mal sehen, meines wissens wirklich nicht.
standardkonformer ist es aber bei listen auch wirklich das [*] element zu nehmen. handelt es sich um ein vertikales menü hilft dir div und selfHTML sicherlich weiter

mc_hammer · 14.03.2007, 14:45

naja, es ist eine liste mit spalten, deshalb wohl besser kein[*]. das problem muss aber irgendwo sonst versteckt liegen. ich hab mal auf <div> umgestellt, aber die breiten werden immer noch ignoriert

Code:

	#printMotSchr .row{
		height:auto;
		float:left;
		width:600px;
		min-height:22px;
		padding:5px 5px 1px 3px;
	}
	#printMotSchr .line{
		border-bottom:1px solid #CCCCCC;
	}
	#printMotSchr .col_1 {
		margin-left: 0; 
		width: 150px;
		display: inline;
		color:red;
	}
	#printMotSchr .col_2 {
		margin-left: 10px; 
		width: 70px;
		display: inline;
	}
	#printMotSchr .col_3 {
		margin-left: 10px; 
		width: 150px;
		display: inline;
	}
	#printMotSchr .col_4 {
		margin-left: 10px; 
		width: 40px;
		display: inline;
	}
	#printMotSchr .col_5 {
		margin-left: 10px; 
		width: 120px;
		display: inline;
	}

und der html dazu:

Code:

<div id="printMotSchr" >
	<div class="row">
		<div class="col_1">Name, Vorname</div>
		<div class="col_2">Matrikel</div>
		<div class="col_3">E-Mail</div>
		<div class="col_4">Rate</div>
		<div class="col_5">Thema</div>
	</div>
</div>

phpdummi · 14.03.2007, 15:18

was soll das jetzt? inline verhindert doch das elemente eine breite bekommen
so wird erzwungen das selbst nach <h1 sytle="display:inline;">test</h1> kein zeilenumbruch dargestellt wird ..
guck dir doch mal Eine Horizintale Leiste an. (hab vorhin vertikal geschrieben sry)
und scroll auch mal ein bisel weiter runter!!!
die ie5/6 hacks kannste ja überlesen

mc_hammer · 14.03.2007, 15:26

was das inline soll? die einzelnen spalten (col) sollen ja nebeneinander stehen, und nicht untereinander. deshalb hab ich auch ursprünglich <span> benutzt, dann bräuchte es inline eben nicht. im beispiel seh ich allerdings nix von vordefinierter breite...

mc_hammer · 14.03.2007, 15:36

hier noch ein (funktionierendes) beispiel, welches ich ursprünglich bei tests herausgeknobelt hatte:

Code:

.box1 {
	padding: 5px;
	border: 1px solid #AAAAAA;
	width: 100px;
}
.box2 {
	padding: 5px;
	border: 1px solid #AAAAAA;
	width: 100px;
}
.box3 {
	padding: 5px;
	border: 1px solid #AAAAAA;
	width: 100px;
}

und:

Code:

<div class="row">
<span class="box1">box 1</span>
<span class="box2">box 2</span>
<span class="box3">box 3</span>
</div>
<div class="row">
<span class="box1">box 1</span>
<span class="box2">box 2</span>
<span class="box3">box 3</span>
</div>

mc_hammer · 14.03.2007, 15:44

und um nochmals genau zu verdeutlichen, was ich will:

die spalten 1-5 sollen alle eine definierte breite haben...

phpdummi · 14.03.2007, 16:02

Code:

<style>
#table1 {
	width:600px;
	min-height:200px;
	background-color:#FFFF00;
}

.list {
	float:left;
	width:100%;
	font-size:93%;
	line-height:normal;
	border-bottom:1px solid #A0A0A4;
}
.list ul {
	margin:0;
	padding:0; 
	list-style:none;
}
.list li {
	float:left;
	margin:0;
	padding:0;
}
.list .item {
	display:block;
	padding:5px 15px;
	background-color: white;
}
.row1 {
	width: 100px;
}
.row2 {
	width: 70px;
}
.row3 {
	width: 200px;
}
.row4 {
	width: 100px;
}
.row5 {
	width: 50px;
}
</style>

Code:

<div id="table1">
	<div class="list">
	  <ul>
		<li class="row1"><span class="item">Name</span>
		<li class="row2"><span class="item">Martikel</span>
		<li class="row3"><span class="item">Email</span>
		<li class="row4"><span class="item">Rate</span>
		<li class="row5"><span class="item">Status</span>
	[/list]	</div>
	<div class="list">
	  <ul>
		<li class="row1"><span class="item">Name</span>
		<li class="row2"><span class="item">Martikel</span>
		<li class="row3"><span class="item">Email</span>
		<li class="row4"><span class="item">Rate</span>
		<li class="row5"><span class="item">Status</span>
	[/list]	</div>
	<div class="list">
	  <ul>
		<li class="row1"><span class="item">Name</span>
		<li class="row2"><span class="item">Martikel</span>
		<li class="row3"><span class="item">Email</span>
		<li class="row4"><span class="item">Rate</span>
		<li class="row5"><span class="item">Status</span>
	[/list]	</div>
	<div class="list">
	  <ul>
		<li class="row1"><span class="item">Name</span>
		<li class="row2"><span class="item">Martikel</span>
		<li class="row3"><span class="item">Email</span>
		<li class="row4"><span class="item">Rate</span>
		<li class="row5"><span class="item">Status</span>
	[/list]	</div>
</div>

jemandem der sich gedanken gemacht hat, und sich mühe gibt sein problem zu beschreiben wird hier immer geholfen :wink:

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] Transparente Runde Ecken bei Thumbnial realisieren	tomtaz	PHP Tipps 2008	3	08.07.2008 01:20
[Erledigt] Galerie Problem...	coraplanet	PHP Tipps 2008	4	06.06.2008 13:42
Width Problem bei input und text Feld	suter	HTML, Usability und Barrierefreiheit	2	14.02.2007 14:03
DIV's untereinander -> Problem	snatch-ic	HTML, Usability und Barrierefreiheit	1	05.02.2007 12:39
datensätze defekt oder problem mit dem einlesen?	Ministry	Datenbanken	4	06.07.2006 18:42
problem!!!		PHP Tipps 2006	6	08.02.2006 11:06
[Erledigt] wieder ein Problem bei phpmailer und smtp		PHP Tipps 2006	24	07.02.2006 01:07
Problem mit DIV -Bild soll am unteren Ende der Seite bleiben	scheibo	HTML, Usability und Barrierefreiheit	16	12.01.2006 16:54
problem mit div's		HTML, Usability und Barrierefreiheit	2	08.11.2005 18:55
[Erledigt] Problem mit Übergabe einer Klasse in PHP4		PHP-Fortgeschrittene	10	08.01.2005 21:00
CSS unklarheit ... finde das problem net		HTML, Usability und Barrierefreiheit	4	30.12.2004 12:36
Problem mit Weiterleitung		PHP Tipps 2004-2	16	22.12.2004 17:49
IE: Breite = width + 0; FF: Breite = width + padding -- Häh?	tapferesschneiderlein	HTML, Usability und Barrierefreiheit	1	09.12.2004 18:45
Smarty und PHP-Skript Problem		PHP Tipps 2004-2	2	03.12.2004 22:27
Problem mit alter JavaScript-Funktion	woods	PHP Tipps 2004	1	13.08.2004 13:34


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

14.03.2007, 14:16
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	ganze einfach <span> unterstüzt keine width angabe ... vergrößere margin oder nimm mehrere div's so wie jeder andere auch //Edit: solltest du vorhaben einen rahmen bzw. hintergrund für jedes span element hinterlegen zu wollen arbeite mit padding. ich empfehle dir aber einfach mehrere divs' zu nehmen __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

14.03.2007, 14:37
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	die listen würd ich gern mal sehen, meines wissens wirklich nicht. standardkonformer ist es aber bei listen auch wirklich das *[]** element zu nehmen. handelt es sich um ein vertikales menü hilft dir div und selfHTML sicherlich weiter __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

14.03.2007, 15:18
phpdummi Erfahrener Benutzer Registriert seit: 06.06.2008 Beiträge: 1.631 PHP-Kenntnisse: Anfänger	was soll das jetzt? inline verhindert doch das elemente eine breite bekommen so wird erzwungen das selbst nach <h1 sytle="display:inline;">test</h1> kein zeilenumbruch dargestellt wird .. guck dir doch mal Eine Horizintale Leiste an. (hab vorhin vertikal geschrieben sry) und scroll auch mal ein bisel weiter runter!!! die ie5/6 hacks kannste ja überlesen __________________ "Nobody is as smart as everybody" - Kevin Kelly — The best things in life aren't things

14.03.2007, 15:26
mc_hammer Neuer Benutzer Registriert seit: 16.10.2006 Beiträge: 20	was das inline soll? die einzelnen spalten (col) sollen ja nebeneinander stehen, und nicht untereinander. deshalb hab ich auch ursprünglich <span> benutzt, dann bräuchte es inline eben nicht. im beispiel seh ich allerdings nix von vordefinierter breite...

14.03.2007, 15:44
mc_hammer Neuer Benutzer Registriert seit: 16.10.2006 Beiträge: 20	und um nochmals genau zu verdeutlichen, was ich will: die spalten 1-5 sollen alle eine definierte breite haben...