framebeseitigung - css horror

[neuling]

hallo freunde.

ich brauch hilfe. häng an dem problem schon fast n halbes jahr, wobei immer pause dazwischen war. bin schon ein wenig am verzweifeln. darum auch immer wieder pause. also ich will/ muss unsere kinderclubseite mal anpacken. die besteht aus frames. soll aber aus css bestehn aber das design soll (fast) übernommen werden halt soweit es geht.

das frameset sieht so aus

und die cssanordnung sollte/ könnte so aussehen

ich bekomm alles hin nur nicht dass das so ausschaut :-(

bekomm auch die zuweisungen nicht richtig hin da der türkise und der graue bereich ne feste breite haben muss, die lila bereiche immer so hoch wie der graue sein müssen, der footer immer ans ende der grauen muss, oben links rechts kein freier bereich sein darf, und die beiden grünen bereiche nich über den türkisen ragen dürfen.

aber egal was ich mache bekomme ich immer nur murks.

kann mir vielleicht wer helfen bevor ich russisches roulette für mich entdecke.

danke danke

[Der Kleine]

Du nutzt dann aber schon Divs und setzt sie richtig ein?

Im Normalfall kein Problem mit relativer und Absoluter Breite und Höhe.

[neuling]

ja divs benutz ich schon und ne verlinkte css datei

also hab des so:

<div id="main">

<div id="headerleft"></div>

<div id="headermiddl"></div>

<div id="headerright"></div>

<div id="sideleft"></div>

<div id="content"></div>

<div id="sideright"></div>

<div id="footer"></div>

</div>

[Der Kleine]

und die zugehörige css?

[neuling]

also hab folgendes css.

hab halt schon so jetzt ungefähr das layout aber glaube das das css nicht so die beste lösung ist da ich noch viele fehler drin hab.

zb der content div bricht nicht automatisch um auch wenn ich die breite angebe. wenn ich im content nen <p>-tag setze verschiebt sich der gesamte contentdiv, und auch wenn ich zb padding ect vergebe.

dann noch die frage wie bekomme ich die seitlichen divs dazu das sie immer genau die höhe des content divs haben.

danke schon mal

#html,body{

	margin:0;

	padding:0

}


#container {

	width:1000px;

}


#headerleft, #headermiddle, #headerright {

	margin:0;

	height:215px;

	position: static; top:0px;

}


#headermiddle, #content {

	width:750px;

	position:absolut;

	left:125px;

	right:875px;

	margin-top: 0;

	margin-bottom: 0;

	margin-left: 125px;

	margin-right: 125px;

}


#headerleft, #headerright, #sideleft, #sideright {

	width: 125px;

}


#headerleft, #headerright {

	background-image: url(img/topbg.gif);

	background-repeat: repeat-x;

}


#headerleft {

	float:left;

}

#headermiddle {

	background-color: #fffbce;

}

#headerright {

	float:right;

}


#sideleft {

	float:left;

	background-color: #fffbce;

}

#content {

	background-color:#fffbce;

}

#sideright {

	float:right;

	background-color: #fffbce;

}


#footer {

	height:25px;

	background-image: url(img/bgfooter.gif);

	background-repeat: repeat-x;

}


#p {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	line-height: normal;

	font-weight: normal;

	font-variant: normal;

	text-transform: none;

	color: #006633;

	text-decoration: none;

}

#a:link {


	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	line-height: normal;

	font-weight: bold;

	font-variant: normal;

	text-transform: none;

	color: #006633;

	text-decoration: underline;

}

#a:visited {



	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	line-height: normal;

	font-weight: bold;

	font-variant: normal;

	text-transform: none;

	color: #006633;

	text-decoration: underline;

}

#a:hover {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	line-height: normal;

	font-weight: bold;

	font-variant: normal;

	text-transform: none;

	color: #008000;

	text-decoration: underline;

}

#a:active {

	font-family: Verdana, Arial, Helvetica, sans-serif;

	font-size: 12px;

	font-style: normal;

	line-height: normal;

	font-weight: bold;

	font-variant: normal;

	text-transform: none;

	color: #006633;

	text-decoration: underline;

}

[CaRvA]

Nicht verzweifeln

Also hier hast du ein Layout was 100% in jedem Browser funktioniert!

<!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">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Unbenanntes Dokument</title>

<style type="text/css">

body, html{

  margin:0;

  padding:0;

}


html{

  height:100%;

}


body{

  min-height:101%;

  font-size:100.01%;

  position:relative;

  color:#000;

  background:#fff;

  text-align:left;

}


#page{}


#header{

  position:relative;

  background-color:#00FFFF;

  height:150px;

}


#topcol1{

  position:absolute;

  top:0px;

  left:0px;

  width:200px;

  height:150px;

  background-color:#838301;

}


#topcol2{

  position:absolute;

  top:0px;

  right:0px;

  width:200px;

  height:150px;

  background-color:#008306;

}


#main{

  clear:both;

  width:auto;

}


#col1{

  float:left;

  width:200px;

  height:600px;

  z-index:2;

  background-color:#FF00FE;

}


#col2{

  float:right;

  width:200px;

  height:600px;

  z-index:3;

  background-color:#840183;

}


#col3{

  width:auto;

  margin-left:200px;

  margin-right:200px;

  height:600px;

  z-index:1;

  background-color:#C5C3C6;

}


#ie_clearing{

  display:none;

}


#footer{

  clear:both;

  height:150px;

  background-color:#FFFF83;

}

</style>

</head>


<body>

<div id="page">


  <div id="header">

    <div id="topcol1"></div>

    <div id="topcol2"></div>

  </div>


  <div id="main">

    <div id="col1"></div>

    <div id="col2"></div>

    <div id="col3"></div>

    <div id="ie_clearing"></div>

  </div>


  <div id="footer"></div>


</div>

</body>

</html>

[neuling]

erstmal dickes danke und cool von dir das dir so viel arbeit gemacht hast.

war denn mein css so schlecht???

frage zu dem IE clearing. was bewirkt der.

[CaRvA]

Hier steht alles drin

Das Clearing von #col3: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework

Und hier hast du alle Befehle die es in CSS gibt!

CSS 4 You - The Finest in Stylesheets

Good Luck & Have Fun

[neuling]

uii na dann hab ich ja einiges zu lesen. dann muss ich mich wohl mal in geduld üben.

jetzt hab ich so n bissl in dein script reingeschaut und mit meinen verglichen. aber noch so richtig gerafft ....

naja ich bekomm das design so hin wie ich es eigenlich haben will.

also sobald ich im content-div nen <p> tag mache verschiebt sich die komplette contentbox und die footerbox nach unten und es entsteht ne lücke.

und zweites problem ich kann die schrift im content-div nicht vom seitenrand einrücken ohne das das layout zerschiesst.

naja die hoffnung stirbt zuletzt.

hab mal die datein als rar angehängt als beispiel.

vielleicht könnt ihr mir meine unwissenheit mal unter die nase reiben.

danke schon mal

css.rar

[CaRvA]

Meine Fresse hast du ein CSS Salat

Ich werde mal schaun was sich da machen lässt!

[neuling]

so schlimm????

ich fands eigentlich so recht ähmmm interessant. oder so in etwa.

na vielleicht sollte ich mal ne landkarte malen damit man sich im css zurechtfindet. ich designe flash da brauch man css nicht so gg

dank dir erstmal. ich hoffe ich kanns mal vergelten

lg

[CaRvA]

media.css

/* Layout */


html, body, p{

 margin:0;

 padding:0;

}


body{

 min-height:101%;

 position:relative;

 color:#000;

 background:#fff;

 text-align:left;

 font-family: Verdana, Arial, Helvetica, sans-serif;

 font-size: 12px;

 font-style: normal;

 line-height: normal;

 font-weight: normal;

 font-variant: normal;

 text-transform: none;

 text-decoration: none;

}


#container{

 position:absolute;

 width:1024px;

 left:50%;

 margin-left:-512px;

}


#headerbox {

 position:relative;

 height:215px;

}


#contentbox {

 clear:both;

 width:auto;

 background: #ccc url(faux.png) repeat 50% 0;	

}


#headerleft {

 float:left;

 height:215px;

 width:125px;

 background-color:#33C021;

}


#headerright{

 float:right;

 height:215px;

 width:149px;

 background-color:#33C021;

}


#headermiddle{

 width:auto;

 height:215px;

 margin-left:125px;

 margin-right:149px;

 background-color:#4EB6C1;

}


#sideleft {

 float:left;

 width:125px;

 z-index:2;

}


#sideright {

 float:right;

 width:149px;

 z-index:3;

}


#content {

 width:auto;

 margin-left:125px;

 margin-right:149px;

 z-index:1;

 background-color:#D2D2D2;

 padding:10px;

}


#ie_clearing{

  display:none;

}


#footer {

 clear:both;

 height:25px;

 background-color:#f7f7c6;

}



/* Style */


p{

 color:#006633;

 margin-bottom:1em;

}


a:link {

 font-weight: bold;

 text-decoration: underline;

}


a:hover {

 color: #008000;

}

index.html

<!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">

<head>

<link href="media.css" rel="stylesheet" type="text/css" />

</head>

<body>


<div id="container">


  <div id="headerbox">

    <div id="headerleft"> </div>

    <div id="headerright"> </div>

    <div id="headermiddle"> </div>

  </div>


  <div id="contentbox">

    <div id="sideleft"> </div>

    <div id="sideright"> </div>

    <div id="content"><p>	CONTENTtttttttttttttttttttttttttttttttttttttttttttttttttt tttttttttttttttttt ttttttttttttt ttttttttttt ttttttttt t t tttttttttttt tttttttttttttttttttt t ttttttttttttttttttttttt tt    ttttttttttt t tt tttttt</p><br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br>CONTENT<br></div>

    <div id="ie_clearing"> </div>

  </div>


  <div id="footer"> </div>


</div>


</body>

</html>

Dein Problem mit der Lücke lag an p. Erstens du hast p nicht geschlossen mit </p> und zweitens p hatte noch margin-top drin und somit kam diese Lücke zustande! Ich habe das margin von p zurückgesetzt und nur ein maring-bottom übergeben!

Den Seitenabstand im contenbreich machst du mit padding

Achja und ich habe mir mal erlaubt das Layout mittig zu setzen! Indem ich im #container position:absolute; left:50% und left-margin:-512px eingefügt habe! left-margin muss immer die hälfte von der gesamtgröße des Layers haben! 1024 / 2 = 521

Bei weiteren Fragen einfach melden!

[neuling]

alter geil von dir.

ich fall auf die knie. sorry für die umstände die ich bereitet habe.

aber vielleicht darf ich noch mal auf die zukommen hab bestimmt noch so ein oder zwei verständnisfragen.

hoffe ich kann mich mal revangieren oder wenn de mal in nrw trinken wa mal was zusammen

lg

[sunny.p]

Sinnvoll ist es auch immer, mehrere divs zu logischen Bereichen zusammenzufassen (z.B. Header, Content, Navi, Footer,...) und das Layout dann für diese Bereiche und innerhalb der Bereiche durchzuführen.

Dann kann man die Abhängigkeiten und die damit verbundenen, kaputten Nerven minimieren...