div problem (zentrieren)

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

23.09.2004 - 11:01

Also.. ich möchte mit divs folgendes realisieren (weil tables ja sooo böse sind...):

div in der Mitte soll fixe Breite haben und unabhängig von der Größe des Browserfensters in der Mitte sein. Die divs links und rechts davon sollen den restlichen Platz ausfüllen.

Tjo... wie geht des? Meine Versuche poste ich vorerst lieber mal nicht

taz

Legend

Registered: Apr 2000
Location: ärgsten Kaff
Posts: 2233

23.09.2004 - 12:43

http://www.stichpunkt.de/css/3-box2.html

in dem fall sind alle 3 boxen von variabler größe. aber dort kannst du einfach der mittleren eine fixe breite geben

Spikx

My Little Pwny

Registered: Jan 2002
Location: Scotland
Posts: 13504

23.09.2004 - 12:50

öhm.. nein, das funktioniert nicht...
Klar dass es geht, wenn des mittlere a Variable Breite hat, aber wenn das mittlere a fixe Breite hat und man die beiden anderen divs bis zum Rand gehen lassen will, dann muss man diesen beiden zumindest 50% zuweisen, da man ja nicht wissen kann, wieviel % der restliche Platz um das div mit fixer Breite einnimmt. Damit nehmen aber beide insgesamt 100% Platz ein und verdrängen ein div.

//zB:

Code: PHP

<div style="float:left; width:25%; height:50px; background-color:#FF0000"></div>
<div style="float:left; width:500px; height:50px; background-color:#00FF00"></div>
<div style="float:left; width:25%; height:50px; background-color:#0000FF"></div>

Abhängig von der Auflösung bleibt rechts Platz übrig oda das letzte div rutscht nach unten. Weist man den beiden divs 50% width zu dann rutscht das letzte div natürlich sowieso in nach unten.

Bearbeitet von Spikx am 24.09.2004, 12:30

Jehul

Big d00d

Registered: Nov 2000
Location: lnz
Posts: 295

23.09.2004 - 14:11

ich würd das mit verschachtelten tabellen machen:

Code: PHP

<table width="100%">
<tr>
	<td width="49%"></td>
	<td width="2%">
		<table width="200" bgcolor="black"><tr><td>test</td></tr></table>
	</td>
	<td width="49%"></td>
</tr>
</table>

mfg.

Bearbeitet von watchout am 24.09.2004, 12:36 (seiten-layout-schonung)

HVG

Vereinsmitglied
untitled

Registered: Jun 2000
Location: NÖ
Posts: 5982

23.09.2004 - 14:16

tabellen sind pfui!

Spikx, vielleicht hilft left und right?!

funka

Legend
ex-prophet(down below)

Registered: Sep 2000
Location: Vienna / SF
Posts: 6131

23.09.2004 - 14:19

wennst die andern 2 divs nicht brauchst machs ca so

Code: PHP

body {
text-align: center;
}
div {
text-align: left;
}

#mitte {
margin: auto;
width: 20px;
}

[..]
<body>
<div id="mitte">
bla
[..]
</div>
</body>

ansonsten via floats die 3 divs nebeneinander geben

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

23.09.2004 - 15:02

Zitat von Jehul
ich würd das mit verschachtelten tabellen machen:
Code: PHP
<table width="100%">
<tr>
	<td width="49%"></td>
	<td width="2%">
		<table width="200" bgcolor="black"><tr><td>test</td></tr></table>
	</td>
	<td width="49%"></td>
</tr>
</table>
mfg.

gehts noch umständlicher?

Code:

<TABLE width="100%" border="1">
	<tr>
		<TD>test</TD>
		<TD width="200">test</TD>
		<TD>test</TD>
	</tr>
</TABLE>

Bearbeitet von watchout am 24.09.2004, 12:34

funka

Legend
ex-prophet(down below)

Registered: Sep 2000
Location: Vienna / SF
Posts: 6131

23.09.2004 - 15:34

fuer sowas braucht man aber imho keine tables

Jehul

Big d00d

Registered: Nov 2000
Location: lnz
Posts: 295

23.09.2004 - 15:37

edit:

@watchout:

deine lösung geht aber nicht, wenn in der linken bzw rechten td verschieden langer text drinnen steht.

siehe:

Code:

<table width="100%">
<tr>
	<td>
asdf asdf asdf asdf asdf 
asdf asdf asdf asdf asdf 
asdf asdf asdf asdf asdf 
asdf asdf asdf asdf asdf 
asdf asdf asdf asdf asdf 
</td>
	<td width="200">test</td>
	<td>asdf</td>
</tr>
</table>

Bearbeitet von Jehul am 23.09.2004, 20:20

funka

Legend
ex-prophet(down below)

Registered: Sep 2000
Location: Vienna / SF
Posts: 6131

23.09.2004 - 15:39

es gibt bei so ziemlich allem irgendwo am planeten einen browser/renderer der damit irgendwie probleme hat und wenn nicht schreib ich dafuer extra ein plugin

Jehul

Big d00d

Registered: Nov 2000
Location: lnz
Posts: 295

23.09.2004 - 15:40

@funka:
hab meine aussage korrigiert :>
siehe oben

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

23.09.2004 - 17:05

Zitat von Jehul
edit:

@watchout:

deine lösung geht aber nicht, wenn in der linken bzw rechten td verschieden langer text drinnen steht.

siehe:
Code:
<table width="100%">
<tr>
	<td>	asdf [...cut...] asdf </td>
	<td width="200">test</td>
	<td>asdf</td>
</tr>
</table>

sorry, mein fehler - hab was vergessen, so stimmts:

Code: PHP

<TABLE width="100%" border="1">
	<tr>
		<TD width="50%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa sssssssssssssssssssssssss dddddddddddddddddd</TD>
		<TD width="200">test</TD>
		<TD width="50%">test</TD>
	</tr>
</TABLE>

aber es stimmt - tables sind pfui, mir fällt nur keine andere ein...

funka

Legend
ex-prophet(down below)

Registered: Sep 2000
Location: Vienna / SF
Posts: 6131

23.09.2004 - 17:11

ich seh hier den tieferen sinn von tables nicht ausser das man perverse rechnung hat 50% + 50% + 200px
wehe es kommt jetzt einer mit "width == maxwidth"

- mich als browser wuerd das buggen lassen

uebrigens gehts hier um divs
- funkt meine version?

watchout

Legend
undead

Registered: Nov 2000
Location: Off the grid.
Posts: 6845

23.09.2004 - 18:50

tatsache is' dass solche design's derzeit _einfach_ mit divs nicht gscheit funken, und dass diese table-lösung soweit ich weiss mit allen browsern seit ie3 funken...

und ich denke nicht dass er links und rechts nicht braucht

Rektal

Here to stay

Registered: Dec 2002
Location: Inside
Posts: 4465

24.09.2004 - 07:17

Amen. Und weil wir grad wieder laestern ueber div. Browser, hier noch interessante Links fuer heute:

http://channel9.msdn.com/wiki/defau...xplorerFeedback
http://blogs.msdn.com/ie/
http://www.microsoft.com/windowsxp/...s/04sept09.mspx
http://www.microsoft.com/windows/ie...ty/default.mspx
http://msdn.microsoft.com/ie/
http://www.windowsmarketplace.com/r....aspx?bcatid=44

:-P

Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	23.09.2004 - 11:01 Also.. ich möchte mit divs folgendes realisieren (weil tables ja sooo böse sind...): div in der Mitte soll fixe Breite haben und unabhängig von der Größe des Browserfensters in der Mitte sein. Die divs links und rechts davon sollen den restlichen Platz ausfüllen. Tjo... wie geht des? Meine Versuche poste ich vorerst lieber mal nicht
taz Legend Registered: Apr 2000 Location: ärgsten Kaff Posts: 2233	23.09.2004 - 12:43 http://www.stichpunkt.de/css/3-box2.html in dem fall sind alle 3 boxen von variabler größe. aber dort kannst du einfach der mittleren eine fixe breite geben
Spikx My Little Pwny Registered: Jan 2002 Location: Scotland Posts: 13504	23.09.2004 - 12:50 öhm.. nein, das funktioniert nicht... Klar dass es geht, wenn des mittlere a Variable Breite hat, aber wenn das mittlere a fixe Breite hat und man die beiden anderen divs bis zum Rand gehen lassen will, dann muss man diesen beiden zumindest 50% zuweisen, da man ja nicht wissen kann, wieviel % der restliche Platz um das div mit fixer Breite einnimmt. Damit nehmen aber beide insgesamt 100% Platz ein und verdrängen ein div. //zB: Code: PHP `<div style="float:left; width:25%; height:50px; background-color:#FF0000"></div> <div style="float:left; width:500px; height:50px; background-color:#00FF00"></div> <div style="float:left; width:25%; height:50px; background-color:#0000FF"></div>` Abhängig von der Auflösung bleibt rechts Platz übrig oda das letzte div rutscht nach unten. Weist man den beiden divs 50% width zu dann rutscht das letzte div natürlich sowieso in nach unten. Bearbeitet von Spikx am 24.09.2004, 12:30
Jehul Big d00d Registered: Nov 2000 Location: lnz Posts: 295	23.09.2004 - 14:11 ich würd das mit verschachtelten tabellen machen: Code: PHP `<table width="100%"> <tr> <td width="49%"></td> <td width="2%"> <table width="200" bgcolor="black"><tr><td>test</td></tr></table> </td> <td width="49%"></td> </tr> </table>` mfg. Bearbeitet von watchout am 24.09.2004, 12:36 (seiten-layout-schonung)
HVG Vereinsmitglied untitled Registered: Jun 2000 Location: NÖ Posts: 5982	23.09.2004 - 14:16 tabellen sind pfui! Spikx, vielleicht hilft left und right?!
funka Legend ex-prophet(down below) Registered: Sep 2000 Location: Vienna / SF Posts: 6131	23.09.2004 - 14:19 wennst die andern 2 divs nicht brauchst machs ca so Code: PHP `body { text-align: center; } div { text-align: left; } #mitte { margin: auto; width: 20px; } [..] <body> <div id="mitte"> bla [..] </div> </body>` ansonsten via floats die 3 divs nebeneinander geben
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	23.09.2004 - 15:02 Zitat von Jehul ich würd das mit verschachtelten tabellen machen: Code: PHP `<table width="100%"> <tr> <td width="49%"></td> <td width="2%"> <table width="200" bgcolor="black"><tr><td>test</td></tr></table> </td> <td width="49%"></td> </tr> </table>` mfg. gehts noch umständlicher? Code: `<TABLE width="100%" border="1"> <tr> <TD>test</TD> <TD width="200">test</TD> <TD>test</TD> </tr> </TABLE>` Bearbeitet von watchout am 24.09.2004, 12:34
funka Legend ex-prophet(down below) Registered: Sep 2000 Location: Vienna / SF Posts: 6131	23.09.2004 - 15:34 fuer sowas braucht man aber imho keine tables
Jehul Big d00d Registered: Nov 2000 Location: lnz Posts: 295	23.09.2004 - 15:37 edit: @watchout: deine lösung geht aber nicht, wenn in der linken bzw rechten td verschieden langer text drinnen steht. siehe: Code: `<table width="100%"> <tr> <td> asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf asdf </td> <td width="200">test</td> <td>asdf</td> </tr> </table>` Bearbeitet von Jehul am 23.09.2004, 20:20
funka Legend ex-prophet(down below) Registered: Sep 2000 Location: Vienna / SF Posts: 6131	23.09.2004 - 15:39 es gibt bei so ziemlich allem irgendwo am planeten einen browser/renderer der damit irgendwie probleme hat und wenn nicht schreib ich dafuer extra ein plugin
Jehul Big d00d Registered: Nov 2000 Location: lnz Posts: 295	23.09.2004 - 15:40 @funka: hab meine aussage korrigiert :> siehe oben
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	23.09.2004 - 17:05 Zitat von Jehul edit: @watchout: deine lösung geht aber nicht, wenn in der linken bzw rechten td verschieden langer text drinnen steht. siehe: Code: `<table width="100%"> <tr> <td> asdf [...cut...] asdf </td> <td width="200">test</td> <td>asdf</td> </tr> </table>` sorry, mein fehler - hab was vergessen, so stimmts: Code: PHP `<TABLE width="100%" border="1"> <tr> <TD width="50%">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa sssssssssssssssssssssssss dddddddddddddddddd</TD> <TD width="200">test</TD> <TD width="50%">test</TD> </tr> </TABLE>` aber es stimmt - tables sind pfui, mir fällt nur keine andere ein...
funka Legend ex-prophet(down below) Registered: Sep 2000 Location: Vienna / SF Posts: 6131	23.09.2004 - 17:11 ich seh hier den tieferen sinn von tables nicht ausser das man perverse rechnung hat 50% + 50% + 200px wehe es kommt jetzt einer mit "width == maxwidth" - mich als browser wuerd das buggen lassen uebrigens gehts hier um divs - funkt meine version?
watchout Legend undead Registered: Nov 2000 Location: Off the grid. Posts: 6845	23.09.2004 - 18:50 tatsache is' dass solche design's derzeit _einfach_ mit divs nicht gscheit funken, und dass diese table-lösung soweit ich weiss mit allen browsern seit ie3 funken... und ich denke nicht dass er links und rechts nicht braucht
Rektal Here to stay Registered: Dec 2002 Location: Inside Posts: 4465	24.09.2004 - 07:17 Amen. Und weil wir grad wieder laestern ueber div. Browser, hier noch interessante Links fuer heute: http://channel9.msdn.com/wiki/defau...xplorerFeedback http://blogs.msdn.com/ie/ http://www.microsoft.com/windowsxp/...s/04sept09.mspx http://www.microsoft.com/windows/ie...ty/default.mspx http://msdn.microsoft.com/ie/ http://www.windowsmarketplace.com/r....aspx?bcatid=44 :-P

div problem (zentrieren)

Forum Index > Software > Coding Stuff

Spikx

taz

Spikx

Jehul

HVG

funka

watchout

funka

Jehul

funka

Jehul

watchout

funka

watchout

Rektal