PC-Hilfe-MK - Kostenlose PC Hilfe

RSS Feed SelectorRegistrierungKalenderMitgliederlisteTeammitgliederSucheHäufig gestellte FragenZur Startseite..:: Super-Kniffel ::..Filebase


PC-Hilfe-MK - Kostenlose PC Hilfe » Grundlagen: XHTML & CSS » Fragen und Probleme » Dynamisches Div » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Seiten (2): [1] 2 nächste » Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen Dynamisches Div
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Dynamisches Div Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Mario,
so nun bin ich auch mal an einen Punkt angekommen wo ich mal nicht mehr weiter weiß.
Um das Problem so einfach wie möglich zu gestalten hab ich mal was vorbereitet:

Zitat:

<table cellpadding="0" cellspacing="0" border="0" style="width:100%;height:50px">
<tr>
<td style="width:50px;background:blue"></td>
<td style="background:blue"></td>
<td style="width:50px;background:blue"></td>
</tr>
</table>


wenn du dir das ganze mal ansieht wird sich ( hoffentlich ) ein blauer Balken bilden, soweit so gut aber wenn ich das ganze versuche mit DIVs umzusetzten scheitere ich und zwar an dem DIV das zwischen den anderen steht und sich dynamisch verhalten sollte und ja es soll sich dynamisch halten und nein ich kann nicht einfach ein div mit dem selben Hintergrund verwenden ;-) will nur wissen wie es geht und habe versucht es einfach zu halten wäre dankbar wenn du einen Lösungsweg hast.

Was anderes ist es möglich das ich "cellpadding, cellspacing" in der css Datei erwähne? hab das bis jetzt noch nicht zustande bekommen

mfg Konrad
14.05.2010 20:48 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Zuerst zur zweiten Frage: cellpadding und cellspacing werden bei CSS nicht verwendet, dafür gibt es die Befehle "Padding" und "Margin". Augenzwinkern

So, der blaue Balken ist natürlich zu sehen.
Da er bei mir bildschirmfüllend ist, gibt es kein dynamisches Verhalten.
Die beiden äußeren Bereiche haben ja immer die feste Breite von 50 Pixel.
Der mittlere Bereich füllt dann den Rest aus - egal, wie breit die Bildschirmauflösung ist.

Das Tabellenlayout erschreckt micht natürlich. geschockt

Mit XHTML und CSS würde ich das einfach mit drei Div-Boxen im Float machen. Eventuell umrahmt von einem alles umschließenden Div.
Die ganzen Style-Anweisungen gehören in die CSS-Datei.
Hier wird auch mit dem Befehl "float" dafür gesorgt, das die drei Divs schön nebeneinander stehen.

Wenn die beiden äußeren Reihen aber nur dazu da sein sollen, damit es einen gewissen Abstand zum Bildschirmrand gibt, dann brauchst du nur ein Div und legst in der CSS-Datei den Außenabstand (margin) dafür fest.


Du mußt auf jeden Fall von diesem Tabellenzeug weg. großes Grinsen
Was genau bezweckst du denn mit dieser Anordnung, wie soll das Endergebnis aussehen?


Grüße
Mario

__________________
Webdesign in Ostfriesland

14.05.2010 23:58 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

dachte schon das das Beispiel zu simpel ist ;-)

Klar ich lagere die CSS alle aus ich hab es jetzt nur mal rein geschrieben um das Script so kurz wie möglich zu halten.
Das ganze wird eine Navi mit mehreren boxen:
1. Navi 2. Dynamischer Platzhalter 3. ein Button 4. noch ein Button 5. suche

1. ist links
3,4,5 rechts und der Platzhalter dazwischen

bei der Tabelle ist es ja so das das was übrig bleibt automatisch den Rest bekommt. Dieses hat aber mit den DIVs bei mir nicht funktioniert.

Was ich schon alles versucht habe:
- Die 3,4,5 auf float: right gesetzt
- die Container auf display: inline-block gesetzt hat aber auch nicht funktioniert

Ist alles etwas schwieriger zu erklären ;-)

aber das Beispiel oben zeigt schon das richtigste und nicht ablenken lassen ich will das nur zu laufen bringen ;-)

mfg Konrad
15.05.2010 00:06 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Alle Floats auf "left" stellen. Augenzwinkern
Ferner muß in den div etwas stehen (zumindest ein Leerzeichen), sonst wird dir nichts angezeigt.

Auf die Schnelle habe ich folgendes Beispiel gebastelt. Augenzwinkern

Die HTML-Datei:
code:
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="seite">
<div id="links">
test
</div>
<div id="mitte">
test
</div>
<div id="rechts">
test
</div>
</div>
</body>
</html>


Die CSS-Datei (unter den Namen "style.css" speichern):
code:
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:
27:
28:
29:
30:
31:
32:
33:
34:
35:
#seite {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 100%;
	height:50px;
}

#links {
	float: left;
	background: #333333;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 10%;
}

#mitte {
	float: left;
	background: #666666;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 80%;
}

#rechts {
	float: left;
	background: #444444;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 10%;
}


Ich persönlich würde aber allen Containern eine feste Breite geben und dann in der CSS-Datei die ganze Seite im Browser zentrieren.
Gerade bei hohen Bildschirmauflösungen sieht das ansonsten ziemlich gedehnt aus.


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 00:41 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
verrückt Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

erst einmal danke das du dir die Mühe für das gemacht hast.

Man soll ja nicht immer Meckern aber ich muss es leider machen ;-)

das was du gemacht hast bin ich auch schon gekommen bzw hätte.

Du hast dem in der Mitte einen festen Wert zugewiesen was ich nicht wirklich will. Geht es auch ohne?

Die Sache ist die das bei bestimmten Seiten noch extra Divs dazwischen kommen auf der Rechten Seite und wenn dann das in der Mitte einen festen Wert hat müsste ich das jedes mal Ändern.

Wenn ich aber darauf zurückgreifen muss da es so wie bei der Tabelle nicht geht werde ich das ganze wohl noch etwas überdenken müssen :(

Habs mal noch geändert damit du weißt das es dann nicht mehr funktioniert:

code:
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:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
#seite {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 100%;
	height:50px;
}

#links {
	float: left;
	background: #333333;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 50px;
}

#mitte {
	float: left;
	background: #666666;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

#rechts {
	float: left;
	background: #444444;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 50px;
}


Morgen ( also später ) werde ich mir das Ganze nochmal ansehen.

Aber nochmal ein Danke das du auf die schnelle gemacht hast

mfg Konrad

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Konrad: 15.05.2010 00:56.

15.05.2010 00:53 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Selbstverständlich funktioniert es danach noch einwandfrei.
Fülle das leere Div in der Mitte mal mit Inhalt... du wirst sehen, das es sich ausbreitet (zumindest bei mir).
Vorher weiß es ja nicht, wie breit es werden soll - es sei denn, man gibt eine Breite an.

Ich habe die CSS-Datei mal etwas umgestellt, der Container in der Mitte hat nun keine Breitenangabe mehr (die beiden Äußeren wieder deine 50px).

code:
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:
27:
28:
29:
30:
31:
32:
33:
34:
#seite {
	float: left;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 100%;
	height:50px;
}

#links {
	float: left;
	background: #333333;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 50px;
}

#mitte {
	float: left;
	background: #666666;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

#rechts {
	float: right;
	background: #444444;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 50px;
}


Die Hintergrundfarbe für das mittlere Div müßte man über das Div mit der ID "seite" definieren.
Wie oben schon erwähnt, weiß das div ja nicht, wie breit es eigentlich sein soll. Die Hintergrundfarbe natürlich auch nicht.
Das würde dann so aussehen:

code:
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:
27:
28:
29:
30:
31:
32:
33:
34:
35:
#seite {
	float: left;
	background: #666666;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 100%;
	height:50px;
}

#links {
	float: left;
	background: #333333;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 50px;
}

#mitte {
	float: left;	
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
}

#rechts {
	float: right;
	background: #444444;
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	text-align: left;
	width: 50px;
}

Die Hintergrundfarbe für die Mitte ist überflüssig und wurde entfernt.
Es fehlt aber noch die Höhenangabe für die beiden äußeren Divs.
Die HTML-Datei habe ich unberührt gelassen.

Hast mit dem Meckern aber recht, ich hätte dir das vorher schon mit der Hintergrundfarbe sagen sollen. großes Grinsen


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 01:14 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

tz tz tz ;-)

das hilft meinen Problem nicht weiter, vielleicht sollte ich mal etwas genauer erklären was das ganze werden soll ( wenn ich es beschreiben kann ):

Das ganze ist die Navigation und das schwere daran ist der Hintergrund. Das DIV Mitte bekommt keinen Inhalt das einzige wichtige bei ihm ist das Hintergrundbild der Navigation durchgehend ist. Wie du schon richtig gedacht hast wäre es doch einfacher einfach bei dem ganzen Div ein Hintergrundbild zu nehmen jetzt kommt aber das Aber ;-) . Die Navigation hat nicht durchgehend den selben Hintergrund ( über Sinn und Unsinn lässt sich streiten aber ich will es so ) das wäre auch noch nicht das Ding da man ja einfach das andere Bild drüber legen kann. Wenn aber die anderen Bilder die man darüber legt und die anderen Transparenten enthalten sieht man das andere durch und das ist nicht mehr schön :(

Hoffe das war nachvollziehbar, mit einer Tabelle funktioniert ja alles super aber in einen DIV das Umzusetzen ist gar nicht so leicht.

mfg Konrad

PS: Fällt mir gerade noch so ein , kann ich den Effekt bei css "a:hover" auch auf andere Elemente anwenden? z.B. auf einen div oder geht das nur mit Javascript?
15.05.2010 09:57 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Du kannst dem Div doch zusätzlich eine Hintergrundfarbe zuordnen, die dann zu sehen ist wenn das Hintergrundbild aufhört. Augenzwinkern
Zur Not kannst du die beiden Divs links und mitte nochmal in ein Div packen und diesem dann dein Hintergrundbild geben.

Der Befehl a:hover hat rein gar nichts mit Javascript zu tun. So nicht
Das Element "a" ist für Links gedacht. Wenn du z.B. ein klickbares Bild haben möchtest, dann kannst du da natürlich den Hover-Effekt anwenden.
Bei einer Navileiste kannst du damit auch eine andere Hintergrundfarbe des jeweiligen "Buttons" erzielen.


Wenn du aber mal mehr über dein Vorhaben preis gibst, dann kann ich dir vermutlich auch sofort besser helfen. Augenzwinkern


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 16:24 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
wütend Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Mario

Zitat:

Du kannst dem Div doch zusätzlich eine Hintergrundfarbe zuordnen, die dann zu sehen ist wenn das Hintergrundbild aufhört. Augenzwinkern
Zur Not kannst du die beiden Divs links und mitte nochmal in ein Div packen und diesem dann dein Hintergrundbild geben.


Entschuldigung aber das Versteh ich jetzt nicht ganz verwirrt

Mich verwirrt gerade wie du auf einmal auf eine Hintergrundfarbe kommst will doch ein "durchgehendes" Hintergrundbild welches teilweise von anderen Divs unterbrochen wird.

mfg Konrad

PS: Wenns beim nächsten mal nicht klappt komm ich mal mit einem ausführlichen Beispiel
15.05.2010 16:37 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Du hast doch geschrieben, das "wenn aber die anderen Bilder die man darüber legt und die anderen Transparenten enthalten sieht man das andere durch..."
Diesen Effekt umgehst du dann mit einer Hintergrundfarbe unter dem Hintergrundbild. Augenzwinkern

Es ist für mich leider sehr schwer, weil du immer nur häppchenweise mit den Infos heraus rückst.

Jetzt hast du es prima in einen Satz gepackt und es ist auch für einen älteren Herrn wie mich verständlich. großes Grinsen

Dein Problem läßt sich lösen, wenn du die Divs, die das besagte Hintergrundbild enthalten sollen, nochmal in ein Div steckst.
Dieses bekommt dann das Hintergrundbild. Die anderen erhalten dann weder Bild noch Farbe oder nur noch dann, wenn es auch gewünscht ist.

Bei einer Tabelle gibst du ja auch nur der kompletten Tabelle dieses Hintergrundbild (es sei denn, du benutzt verschachtelte Tabellen geschockt ).
Ein Div-Container verhält sich aber etwas anders als eine Tabelle und ist flexibler. Augenzwinkern

Wenn ich das mittlerweile richtig kapiert habe, ist das nichts anderes als ein dreispaltiges Layout mit durchgehendem Hintergrundbild.
Beachte aber bitte dabei, das dein Hintergrundbild nicht dynamisch ist bzw. dann vielleicht sogar beschnitten wird.


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 17:02 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

ich trau mich schon fast nicht mehr sagen das das mein Problem auch nicht löst großes Grinsen

Du denkst das ich noch altmodisch schreibe aber keine Angst vom Tabellen Layout bin ich weit entfernt bin ja immer noch bei der Navigation. Ich werde dann später noch ein Beispiel machen damit du dir das auch vorstellen kannst.

Die Idee mit dem Hintergrund ist an sich nicht schlecht jedoch sieht man dann das was darunter liegt nicht mehr ;-) . Nach vollziehbar? Ich glaube schön langsam wird es kompliziert.

mfg Konrad
15.05.2010 17:32 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Hmm, ein transparentes bzw. halbtransparentes Bild zeigt bei mir eigentlich immer, was darunter liegt.
Das Bild muß dann aber auch als Gif oder PNG vorliegen.

Vielleicht hast du die Divs falsch angeordnet?
Im ersten Div muß das Bild rein. Die anderen Divs kommen dann in dieses Div (das dann natürlich auch "geöffnet sein sollte).
Darunter liegt ja dann absolut nichts mehr.
Wenn die anderen Divs Bilder enthalten und das Hintergrundbild soll noch sichtbar sein, müssen die bilder halbtransparent sein.

Hehehe, wenn wir wieder aneinander vorbei reden, dann holen wir uns einen Dometscher. großes Grinsen

Mache doch bitte mal mit einem Grafikprogramm einen groben Entwurf, wo man die Divs sieht und wo welcher Hintergrund rein soll.
Einfach ein paar beschriftete Kästchen. Dazu dann mit Pfeilen markiert, von wo bis wo das Bild geht.


PS: Keine Ahnung, wie du schreibst. Ich kenne ja nur den Quelltext von gestern und der basiert auf Tabellen.
Wenn du mal anderen Quellcode hast, kannst du den hier durchaus veröffentlichen. In diesem Bereich haben nur wenige Personen Zutritt. Augenzwinkern
Nach Erledigung des Problems kann man den Code ja wieder entfernen.


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 17:51 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Mario.

so , hab mal schnell was zusammen geschustert welches das Problem verdeutlicht:

Erst mal der HTML Code , hab wegen der Bequemlichkeit ( geht so schneller ) die CSS Daten in die HTML Datei getan:
code:
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:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<style type="text/css">
body {
     background: url("bg.jpg");
}

#seite {
     height: 50px;
}

#links {
     background: url("small.png") repeat-x;
     width: 250px;
     height: 50px;
     float: left;
}

#mitte {
     background: url("small.png") repeat-x;
     height: 50px;
     float: left;
}

#rechts {
     background: url("button.png") repeat-x;
     height: 50px;
     width: 50px;
     float: right;
}

#rechts2 {
     background: url("small.png") repeat-x;
     height: 50px;
     width: 100px;
     float: right;
}
</style>
</head>
<body>
<div id="seite">
     <div id="links">
     Lorem ipsum dolor sit amet
     </div>
     <div id="mitte">
     <!- Hier ist der Platzhalter >
     </div>
     <div id="rechts2">
          Loren
     </div>
     <div id="rechts">
     
     </div>
</div>
</body>
</html>


hier die entsprechenden Dateien:
http://sendfile.goober.com/de/folder?id=...eb88aa58cfac3d0

Wenn du es schaffst das Div mit der ID Mitte so zu bringen das es automatisch den Inhalt ausfüllt ohne das du ihn eine feste Größe gibt bist du mein heimlicher Held großes Grinsen

mfg Konrad
15.05.2010 18:51 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Das ist meines Wissens nicht möglich.
Ohne Angabe einer Breite "weiß" das Hintergrundbild ja nicht, wie weit es sich ausdehnen kann/soll.
Es nimmt dann immer nur die Breite des jeweiligen Inhaltes an.

Theoretisch gibt es mehrere Möglichkeiten, um das Problem zu beheben.
1. Eine Breite angeben (eventuell in Prozent) und die Seite dazu zentrieren.
2. Alle drei Divs in einem weiteren Div unterbringen und in diesem dann das Hintergrundbild einbinden.
Dazu noch ein paar unsaubere Lösungen.
Eventuell könntest du auch die Divs über "position:relative" und "position:fixed" übereinander legen.


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 20:24 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

oki sowas wollte ich hören, deswegen bin ich ja zu dir gekommen. Aber Tabellen sollte man hier trotzdem nicht verwenden oder?

Naja werde mich mal nach einer alternative umsehen

mfg Konrad

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von Konrad: 15.05.2010 20:46.

15.05.2010 20:46 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Ich würde jetzt kein Tabellenlayout benutzen.
Allerdings bin ich sowieso kein Freund von bildschirmfüllenden Webseiten, da meine Auflösung 1920x1080 beträgt. Augenzwinkern
Schön zentriert mit etwas Luft zum Bilfschirmrand.


Grüße
Mario

__________________
Webdesign in Ostfriesland

15.05.2010 20:56 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

naja wird ja kein tabellen layout sondern nur für die Navigation also 50px hoch

Was ist eigentlich die Maximale Auflösung die es im Moment gibt?
15.05.2010 21:01 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Ich denke, wenn es anders nicht geht, dann solltest du für die Navigation das Tabellenkonstrukt nehmen.
Falls man irgendwann eine bessere Lösung findet, kannst du das ja auch jederzeit wieder ändern. Augenzwinkern

Hmm, die maximale Auflösung die jemals ein Besucher von PC-Hilfe-MK hatte war 1920x1200.
Ich selbst benutze die Auflösung 1920x1080.

Da aber die Monitore immer größer werden, dürfte sich auch die maximale Auflösung weiter erhöhen.
Gerade durch die 16:9-Monitore sieht man erst, worauf man bei der Erstellung einer Webseite achten sollte. Augenzwinkern


Grüße
Mario

__________________
Webdesign in Ostfriesland

16.05.2010 12:05 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Konrad Konrad ist männlich
Doppel-As


Dabei seit: 27.03.2008
Beiträge: 102

Themenstarter Thema begonnen von Konrad
Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

hab im Moment eine Auflösung von 1260 * 960 reicht mir.

Viele User haben ja noch eine 1024er Auflösung ( selbst wir haben so nen pc noch zu hause ).

Im Moment versuch ich die Seiten Dynamisch zu machen also min-weite = 900 und die maximale 1200. Wie regelst du das Problem? Weil zb kann ich keine 1900px als breite hernehmen dann hab ich ja nur 2 zeilen Inhalt ist auch wd nicht schön.

mfg Konrad
16.05.2010 17:25 Konrad ist offline E-Mail an Konrad senden Beiträge von Konrad suchen Nehmen Sie Konrad in Ihre Freundesliste auf
Mario Mario ist männlich
Administrator


Dabei seit: 20.03.2008
Beiträge: 10.574
Herkunft: Holtgast

Auf diesen Beitrag antworten Zitatantwort auf diesen Beitrag erstellen Diesen Beitrag editieren/löschen Diesen Beitrag einem Moderator melden       Zum Anfang der Seite springen

Hallo Konrad
Ich vergebe eigentlich immer eine feste Breite von 900 bis 950 Pixel, in seltenen Fällen 1000 Pixel.
Damit ist die gebräuchliche Größe von 1024 x 768 Pixel abgedeckt.
Benutzer mit 800 x 600 Pixel haben leider Pech gehabt - irgendwann kann man nicht mehr alles mit einbeziehen.

Dazu positioniere ich die Seiten mittig im Browser.
Es sieht nämlich nicht wirklich schick aus, wenn eine Seite links am Rand klebt und die Hälfte des Bildschirmes bleibt frei. Augenzwinkern

Bei einer Breite von 1000 Pixel sollte man beachten, das viele Leute die Favoritenleiste links im Browser immer sichtbar haben (warum auch immer).
Dadurch kann es passieren, das die dann nach rechts scrollen müssen um alles von der Seite zu sehen.
Deshalb nehme ich lieber 900 oder 950. smile

Eine flexible Breite läßt sich kaum vernünftig umsetzen, weil spätestens bei 1920 Pixel jede Webseite ziemlich gedehnt aussieht.
Dann lieber links und rechts mehr Platz lassen und eventuell einen netten Hintergrundverlauf einbauen.


Grüße
Mario

__________________
Webdesign in Ostfriesland

16.05.2010 17:37 Mario ist offline E-Mail an Mario senden Homepage von Mario Beiträge von Mario suchen Nehmen Sie Mario in Ihre Freundesliste auf
Seiten (2): [1] 2 nächste » Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
PC-Hilfe-MK - Kostenlose PC Hilfe » Grundlagen: XHTML & CSS » Fragen und Probleme » Dynamisches Div

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH
Classic Silber Style © 2003 - 2017 by UnitPack
Template- & Codeanpassung by © Mario Kievelitz 2oo8 - 2o17
Impressum