div problem (zentrieren)

Seite 1 von 3 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/div_problem_zentrieren_125317/page_1 - zur Vollversion wechseln!

Spikx schrieb am 23.09.2004 um 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 schrieb am 23.09.2004 um 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 schrieb am 23.09.2004 um 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.

Jehul schrieb am 23.09.2004 um 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.

HVG schrieb am 23.09.2004 um 14:16

tabellen sind pfui!
Spikx, vielleicht hilft left und right?!

funka schrieb am 23.09.2004 um 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 schrieb am 23.09.2004 um 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>

funka schrieb am 23.09.2004 um 15:34

fuer sowas braucht man aber imho keine tables

Jehul schrieb am 23.09.2004 um 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>

funka schrieb am 23.09.2004 um 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 schrieb am 23.09.2004 um 15:40

@funka:
hab meine aussage korrigiert :>
siehe oben

watchout schrieb am 23.09.2004 um 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 schrieb am 23.09.2004 um 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 schrieb am 23.09.2004 um 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 schrieb am 24.09.2004 um 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