WCM Forum

WCM Forum (http://www.wcm.at/forum/index.php)
-   Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)
-   -   CSS - anstelle von frames (http://www.wcm.at/forum/showthread.php?t=146110)

schnurzli 29.09.2004 13:48
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>

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. :heul:

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...:lol:

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

pong

sagi 29.09.2004 21:11
Zitat:
gibt es zudem auch noch eine möglichkeit, das foot-frame immer ganz unten im browser anzeigen zu lassen?
Code:
  position: absolute;
  bottom: 0px;

sagi 29.09.2004 21:15
Zitat:
und das rechte frame vor allem bis nach rechts
Füll einfach mal ein wenig Inhalt ein ;)

heli2sky 30.09.2004 12:40
das mit dem footer is ein problem bei css das noch nicht wirklich gelöst wurde. such mal im forum, da wirst sicher einige beiträge dazu finden.

das problem bei absolute, bottom: 0px ist, dass dann bei mehr inhalt der footer über den inhalt rückt, was nicht schön aussieht.

schnurzli 30.09.2004 12:41
danke für eure hilfe...

@ sagi: das rechte frame wird nur immer so groß, wie der textinhalt...

snowman 01.10.2004 19:42
Wie wäre es, wenn du dir mal unsere Links durchliest? Und wenn du dann noch was nicht verstehst, fragst du nochmal.

gruss,
snowman

schnurzli 01.10.2004 20:56
vielen dank für diesen einwand, snowman.
aber deine bemerkung ist unberechtigt.
ich habe mir jeden link - ausführlich angesehen, es gibt aber noch immer diverse probleme...


ich befürchte, dass es einfach mit einem abstand jedes einzelnen frames zum anderen nicht so ganz hinhaut mit css...


ich melde mich wieder, sobald ich genauere fragen hab.

snowman 02.10.2004 19:08
http://www.bigbaer.com/css_tutorials...der-footer.htm

gruss,
snowman

schnurzli 03.10.2004 23:37
so - habe jetzt mit etwas probieren anhand eurer tipps versucht, das hinzubekomen.

wenn man sich das ganze im mozilla ansieht, ist es so, wie gewünscht.

-> Link

im internet explorer sieht es zum fürchten aus.

hat jemand eine idee?

der css-code:


body {
margin: 0px;
}
div { padding:0; }
#head {
position: absolute;
top:20px;
left:20px;
width:97%;
height:60px;
border:1px solid #000000;
}
#main {
position: absolute;
top:100px;
bottom:70px;
left:20px;
right:20px;
width:auto;
height:auto;
}
#left {
position: absolute;
width:180px;
height:100%;
border:1px solid #000000;
}
#right {
position: absolute;
left:200px;
height:100%;
width: 84%;
border:1px solid #000000;
}
#foot {
position: absolute;
left: 20px;
right: 20px;
bottom:20px;
width:97%;
height:30px;
border:1px solid #000000;
}


Alle Zeitangaben in WEZ +2. Es ist jetzt 05:55 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© 2009 FSL Verlag