BlackBoard » Design, Programmierung & Entwicklung » Webdesign » CSS div design » Hallo Gast [Anmelden|Registrieren]
Letzter Beitrag | Erster ungelesener Beitrag Druckvorschau | An Freund senden | Thema zu Favoriten hinzufügen
Neues Thema erstellen Antwort erstellen
Zum Ende der Seite springen div design
Autor
Beitrag « Vorheriges Thema | Nächstes Thema »
ragtek ragtek ist männlich
Senior Member


images/avatars/avatar-2260.jpg

Dabei seit: 14.07.2002
Beiträge: 421
Herkunft: Ironcity

div design       Zum Anfang der Seite springen

ich hab eine homepage die in etwa so realisiert gehört:
www.ragtek.org/Publikation3.jpg

was ist das jetz?
position: absolut; oder relativ?
irgendwie schnall ich ds alles einfach nicht unglücklich

__________________
spookykids -> ragtek

www.ragtek.org
www.developer-network.org
www.rapmatics.com
31.08.2006 13:12 ragtek ist offline E-Mail an ragtek senden Beiträge von ragtek suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx

Achtung       Zum Anfang der Seite springen

Soll Container 2 tatsächlich die anderen überlappen oder soll er sich nur zwischen 1 und den beiden anderen befinden?

Wenn ersteres, dann würde für 1, 3 und 4 ein normales Floating-Modell ohne weitere Positionierung genügen und 2 müsste absolut ausgerichtet werden. Ansonsten sollte für alle ein Float-Modell reichen.

Beispiel für 1:
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:
body {
  margin: 0;
}

div {
  font-size: 5em;
  border: 1px solid blue;
  text-align: center;
}

#cont1 {
  width: 200px;
  float: left;
  height: 100%;
}

#cont2 {
  position: absolute;
  left: 180px;
  width: 200px;
  height: 100%;
  border-color: green;
}

#cont3,
#cont4 {
  margin-left: 350px;
  height: 50%;
  border-color: red;
}


Für Variante 2 würdest du analog verfahren, nur dass #cont2 dann eben nicht absolut positioniert, sondern ebenfalls mit float: left ausgestattet wäre.

__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

31.08.2006 14:06 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
ragtek ragtek ist männlich
Senior Member


images/avatars/avatar-2260.jpg

Dabei seit: 14.07.2002
Beiträge: 421
Herkunft: Ironcity

Themenstarter Thema begonnen von ragtek
      Zum Anfang der Seite springen

und ohne px angaben geht das nicht?
also das 3&4 zB direkt neben 1 sind und 4 direkt unterhalb von 3?
weil ich gelesen hab das ie und firefox die px angaben nicht gleich behandeln
ausserdem stimmt hier allgemein was nicht

http://213.47.118.10/entwicklung/physita/
das ist der erste entwurf, da hab ich noch mit tabellen gearbeitet
und im firefox stimmts alles aber im ie sind die überschriften auf manchen seiten links und auf manchen zentriert
keine ahnung wieso

__________________
spookykids -> ragtek

www.ragtek.org
www.developer-network.org
www.rapmatics.com

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von ragtek: 31.08.2006 14:33.

31.08.2006 14:31 ragtek ist offline E-Mail an ragtek senden Beiträge von ragtek suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx

Achtung       Zum Anfang der Seite springen

Zitat:
Original von spookykids
und ohne px angaben geht das nicht?
also das 3&4 zB direkt neben 1 sind und 4 direkt unterhalb von 3?
4 ist direkt unterhalb von 3, und die margin-Angaben für 3 und 4 hab ich nur drin, damit der Rahmen entsprechend deines Beispiels zu sehen ist. Würde man margin weglassen, wäre der Rahmen bis zum rechten Rand, aber der Inhalt würde dennoch erst neben 1 beginnen. Ein Padding müsste somit zumindest rein, damit der Bereich unter 2 frei bleibt. Die Pixelangaben sind zu einem bestimmten Teil notwendig. Wie breit 1 und 2 sind, sollte schon bekannt sein.

Zitat:
weil ich gelesen hab das ie und firefox die px angaben nicht gleich behandeln
Stimmt zum Teil. Gelegentlich passieren im IE Fehler, wie dass eine bestimmte margin-Angabe einfach doppelt genommen wird oder dass sich 3 Pixel Ränder irgendwo einschleichen, die nirgends definiert sind. Ansonsten achte auf einen korrekten DOCTYPE, dann behandeln IE und Firefox Rahmen und Innenabstände auch gleich.

__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

31.08.2006 14:46 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
ragtek ragtek ist männlich
Senior Member


images/avatars/avatar-2260.jpg

Dabei seit: 14.07.2002
Beiträge: 421
Herkunft: Ironcity

Themenstarter Thema begonnen von ragtek
      Zum Anfang der Seite springen

i find das einfach viel zu arg

code:
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:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
.body { margin: 0px; top:0px;
}
.container1 { width:125px;
			  float:left;
}

#cont3 { margin-left: 300px; z-index:3; margin-top:50px; z-index:3;}
#cont4 {
  margin-left: 300px;
  height: 50%;
  border-color: red;
}
#cont2 {
  position: absolute;
  left: 125px;
  width: 200px;
  height: 100%;
  border-color: green;
  z-index:0;
}
-->
</style>
</head>

<body>
<div class="container1" id=""><!-- linkes weißes eck -->12312</div>
<div id="cont2"><img src="physita datein/Signet-Maxerl.gif"></div>
<div id="cont3"><h1>&Uuml;berschrift</h1></div>
</body>
</html>

im ie passt das "irgendwie" z-index muss i ma no anschaun
aba im firefox schauts komisch aus... alles auf gleicher höhe unglücklich

__________________
spookykids -> ragtek

www.ragtek.org
www.developer-network.org
www.rapmatics.com

Dieser Beitrag wurde 1 mal editiert, zum letzten Mal von ragtek: 31.08.2006 15:11.

31.08.2006 15:10 ragtek ist offline E-Mail an ragtek senden Beiträge von ragtek suchen
LX LX ist männlich
El Comandante en Jefe


images/avatars/avatar-2290.gif

Dabei seit: 25.11.2001
Beiträge: 5.372
Herkunft: Berliner Bronx

      Zum Anfang der Seite springen

z-index brauchst du hier nicht.

Warum alles nach unten geschoben wird, wenn du #cont3 einen Rand nach oben gibst, weiß ich gerade auch nicht, aber du kannst es auch einfach durch einen Innenabstand (padding-top) ersetzen.

__________________
JS-Games.de - Misled Scripting Skills Gone Mad | Meine Filmkritiken | Urban Photography
Kommt mal in den IRC-Channel: irc.eu.freenode.net | Port 6667 | #blackboard

"Ever tried. Ever failed. No matter.
Try again. Fail again. Fail better."
- Samuel Beckett

31.08.2006 15:40 LX ist offline E-Mail an LX senden Homepage von LX Beiträge von LX suchen
ragtek ragtek ist männlich
Senior Member


images/avatars/avatar-2260.jpg

Dabei seit: 14.07.2002
Beiträge: 421
Herkunft: Ironcity

Themenstarter Thema begonnen von ragtek
      Zum Anfang der Seite springen

ich krieg das einfach nicht hin



code:
1:
<div style="z-index: 1; position:fixed; top:26px; left:60px;"><img src="Signet-Maxerl.gif"alt="logo" /></div> 

wie muss das ausschaun das es im firefox und im ie mitscrollt????
im firefox funktionierts aber im ie leider nicht, da bleibt es fix

__________________
spookykids -> ragtek

www.ragtek.org
www.developer-network.org
www.rapmatics.com
04.09.2006 11:42 ragtek ist offline E-Mail an ragtek senden Beiträge von ragtek suchen
Baumstruktur | Brettstruktur
Gehe zu:
Neues Thema erstellen Antwort erstellen
BlackBoard » Design, Programmierung & Entwicklung » Webdesign » CSS div design

Forensoftware: Burning Board 2.3.6, entwickelt von WoltLab GmbH