CSS - anstelle von frames

schnurzli · 29.09.2004, 13:48

hi,

ich würde gern von den frames wegkommen, möchte aber deren vorteile noch weiterhin nutzen. ein layout mit tables kommt für mich nicht in frage.

im anhang seht ihr, wie ich es gern hätte.
wenn ich das ergebnis jedoch im IE oder mozilla ansehe, habe ich folgende anzeigeprobleme -> Homepage

mein code des css-files:

body {
font-size: 12px;
font-family: verdana;
background-color: #D3D3D3;
margin: 20px;
}
#head {
height: 60px;
border:1px solid #000000;
background-color:#efefef;
margin-bottom:20px;
}
#left {
border: #000000 1px solid;
float: left;
width: 180px;
margin-right: 10px;
background-color: #efefef;
}
#main {
border: #000000 1px solid;
float: left;
width: 83.2%;
margin-left: 10px;
background-color: #efefef;
}
#foot {
border: #000000 1px solid;
clear: both;
height: 30px;
margin-top: 20px;
background-color: #efefef;
}

meine index-datei:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>index</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<link rel="stylesheet" type="text/css" href="layout.css"/>
</head>
<body>
<div id="head">head</div>
<div id="left">left</div>
<div id="main">main</div>
<div id="foot">foot</div>
</body>
</html>

snowman · 29.09.2004, 14:26

Welche Vorteile der Frames möchtest du denn weiternutzen?

float:left bei #main ist mal auf jeden Fall zu viel.

CSS-Positionierung, die mit allen gängigen Browsern funkt, ist nicht ganz simpel; als Einstieg empfehle ich: www.westciv.com oder www.positioniseverything.net

lg,
snowman

schnurzli · 29.09.2004, 14:37

ein vorteil z.b. war, dass sich die frames einfach an die seite und auflösung angepasst haben.

bei mir will das mit css nicht funktionieren.

ich dachte mir, dass das mit:
#main {width:auto; }
funktioniert. tut es aber nicht. der "frame" ist immer nur so groß wie der inhalt. ich hätte das ganze aber gern auf die ganze seite verbreitert.

und mit der prozentuellen angabe bin ich nicht zufrieden.

snowman · 29.09.2004, 15:05

100%

gruss,
snowman

sagi · 29.09.2004, 16:01

versuch mal einen div um left+main zu legen. danach setzt du die höhe von left und main auf 100% für IE bzw auf 100%-marign-padding-border für CSS kompatible Browser. die 100% beziehen sich dann auf den übergeordneten div und folglich sind die beiden Frames dann gleich hoch.

Nur eine Vermutung.

mfg
c.

schnurzli · 29.09.2004, 16:53

danke für eure tipps,

ich werde da ein wenig herumprobieren...

schnurzli · 29.09.2004, 18:39

gibt es eine möglichkeit, die das anzeigeproblem auf meiner Homepage
des rechten "Frames" richtigstellt?

ich hätte gerne das linke und rechte frame gleich hoch und das rechte frame vor allem bis nach rechts. gibt es zudem auch noch eine möglichkeit, das foot-frame immer ganz unten im browser anzeigen zu lassen?

mein geänderter css-code:

html {
margin: 0;
padding: 0;
}
body {
font-size: 12px;
font-family: verdana;
background-color: #D3D3D3;
margin: 0px;
padding: 0px;
}
#head {
height: 60px;
position: relative;
background-color:#efefef;
border: #000000 1px solid;
margin-bottom:20px;
margin-left: 20px;
margin-right: 20px;
margin-top: 20px;
}
#left {
border: #000000 1px solid;
width: 180px;
position: static;
top: 100px;
margin-left: 20px;
background-color: #efefef;
margin-bottom: 20px;
}
#main {
margin-left: 220px;
position: absolute;
width: auto;
border: #000000 1px solid;
top: 100px;
margin-right: 20px;
margin-bottom: 20px;
background-color: #efefef;
}
#foot {
border: #000000 1px solid;
position: static;
height: 30px;
margin-bottom: 20px;
margin-left: 20px;
margin-right: 20px;
background-color: #efefef;
}

spiral_23 · 29.09.2004, 19:40

selfhtml könnte dir vielleicht weiterhelfen.

sp_23

schnurzli · 29.09.2004, 19:52

danke für den link - den kennt denke ich eh jeder.

ich habe aber kein problem des verständnisses sondern eher ein spezifisches...

pong · 29.09.2004, 20:03

Niemals das Rad 2mal erfinden -> http://www.css-technik.de/details/12...S-Snippets.htm

pong

29.09.2004, 13:48	#1
schnurzli Jr. Member Registriert seit: 08.07.2004 Alter: 43 Beiträge: 55	CSS - anstelle von frames hi, ich würde gern von den frames wegkommen, möchte aber deren vorteile noch weiterhin nutzen. ein layout mit tables kommt für mich nicht in frage. im anhang seht ihr, wie ich es gern hätte. wenn ich das ergebnis jedoch im IE oder mozilla ansehe, habe ich folgende anzeigeprobleme -> Homepage mein code des css-files: body { font-size: 12px; font-family: verdana; background-color: #D3D3D3; margin: 20px; } #head { height: 60px; border:1px solid #000000; background-color:#efefef; margin-bottom:20px; } #left { border: #000000 1px solid; float: left; width: 180px; margin-right: 10px; background-color: #efefef; } #main { border: #000000 1px solid; float: left; width: 83.2%; margin-left: 10px; background-color: #efefef; } #foot { border: #000000 1px solid; clear: both; height: 30px; margin-top: 20px; background-color: #efefef; } meine index-datei: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/html1/DTD/xhtml1-strict.dtd"> <html> <head> <title>index</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <link rel="stylesheet" type="text/css" href="layout.css"/> </head> <body> <div id="head">head</div> <div id="left">left</div> <div id="main">main</div> <div id="foot">foot</div> </body> </html> ____________________________________ MfG Richi

29.09.2004, 14:26	#2
snowman Inventar Registriert seit: 26.09.1999 Beiträge: 2.569	Welche Vorteile der Frames möchtest du denn weiternutzen? float:left bei #main ist mal auf jeden Fall zu viel. CSS-Positionierung, die mit allen gängigen Browsern funkt, ist nicht ganz simpel; als Einstieg empfehle ich: www.westciv.com oder www.positioniseverything.net lg, snowman ____________________________________ MediaMarkt? Ich bin doch nicht blöd, Mann! Vorsprung durch Technik Lesen Sie keine Anleitungen, FAQs, Readme - Files. Reine Zeitverschwendung. In den Newsgroups und Foren gibt es genug kompetente Leute, die mit großer Geduld immer wieder dieselben einfachen Fragen beantworten. Völlig kostenlos noch dazu!

29.09.2004, 14:37	#3
schnurzli Jr. Member Registriert seit: 08.07.2004 Alter: 43 Beiträge: 55	ein vorteil z.b. war, dass sich die frames einfach an die seite und auflösung angepasst haben. bei mir will das mit css nicht funktionieren. ich dachte mir, dass das mit: #main {width:auto; } funktioniert. tut es aber nicht. der "frame" ist immer nur so groß wie der inhalt. ich hätte das ganze aber gern auf die ganze seite verbreitert. und mit der prozentuellen angabe bin ich nicht zufrieden. ____________________________________ MfG Richi

29.09.2004, 15:05	#4
snowman Inventar Registriert seit: 26.09.1999 Beiträge: 2.569	100% gruss, snowman ____________________________________ MediaMarkt? Ich bin doch nicht blöd, Mann! Vorsprung durch Technik Lesen Sie keine Anleitungen, FAQs, Readme - Files. Reine Zeitverschwendung. In den Newsgroups und Foren gibt es genug kompetente Leute, die mit großer Geduld immer wieder dieselben einfachen Fragen beantworten. Völlig kostenlos noch dazu!

29.09.2004, 16:01	#5
sagi Elite Registriert seit: 08.11.2001 Alter: 42 Beiträge: 1.285	versuch mal einen div um left+main zu legen. danach setzt du die höhe von left und main auf 100% für IE bzw auf 100%-marign-padding-border für CSS kompatible Browser. die 100% beziehen sich dann auf den übergeordneten div und folglich sind die beiden Frames dann gleich hoch. Nur eine Vermutung. mfg c. ____________________________________ www.sagmueller.net Freedom - use it or lose it (Lawrence Lessig) Im übrigen bin ich der Meinung, dass Microsoft zerschlagen werden muss.

29.09.2004, 16:53	#6
schnurzli Jr. Member Registriert seit: 08.07.2004 Alter: 43 Beiträge: 55	danke für eure tipps, ich werde da ein wenig herumprobieren... ____________________________________ MfG Richi

29.09.2004, 18:39	#7
schnurzli Jr. Member Registriert seit: 08.07.2004 Alter: 43 Beiträge: 55	gibt es eine möglichkeit, die das anzeigeproblem auf meiner Homepage des rechten "Frames" richtigstellt? ich hätte gerne das linke und rechte frame gleich hoch und das rechte frame vor allem bis nach rechts. gibt es zudem auch noch eine möglichkeit, das foot-frame immer ganz unten im browser anzeigen zu lassen? mein geänderter css-code: html { margin: 0; padding: 0; } body { font-size: 12px; font-family: verdana; background-color: #D3D3D3; margin: 0px; padding: 0px; } #head { height: 60px; position: relative; background-color:#efefef; border: #000000 1px solid; margin-bottom:20px; margin-left: 20px; margin-right: 20px; margin-top: 20px; } #left { border: #000000 1px solid; width: 180px; position: static; top: 100px; margin-left: 20px; background-color: #efefef; margin-bottom: 20px; } #main { margin-left: 220px; position: absolute; width: auto; border: #000000 1px solid; top: 100px; margin-right: 20px; margin-bottom: 20px; background-color: #efefef; } #foot { border: #000000 1px solid; position: static; height: 30px; margin-bottom: 20px; margin-left: 20px; margin-right: 20px; background-color: #efefef; } ____________________________________ MfG Richi

29.09.2004, 19:40	#8
spiral_23 Elite Registriert seit: 15.12.2000 Beiträge: 1.047	selfhtml könnte dir vielleicht weiterhelfen. sp_23 ____________________________________ [b]don´t push me - cause i am close to the edge - i am trying not to loose my head... god`s home- we have arrived !!! ------------------------------------------------------ salaam

29.09.2004, 19:52	#9
schnurzli Jr. Member Registriert seit: 08.07.2004 Alter: 43 Beiträge: 55	danke für den link - den kennt denke ich eh jeder. ich habe aber kein problem des verständnisses sondern eher ein spezifisches... ____________________________________ MfG Richi

29.09.2004, 20:03	#10
pong Inventar Registriert seit: 25.12.2000 Alter: 41 Beiträge: 9.063 Mein Computer	Niemals das Rad 2mal erfinden -> http://www.css-technik.de/details/12...S-Snippets.htm pong ____________________________________ \"Ein Gewitter reinigt die Luft\", sagte der Mann, nachdem ein Blitz seine Frau erschlug Nicht klicken! Erstposteralarm/Beschwerde/Kummerkasten Verplattet

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)