WinFuture-Forum.de: Css Problem - WinFuture-Forum.de

Zum Inhalt wechseln

Nachrichten zum Thema: Entwicklung
Seite 1 von 1

Css Problem


#1 Mitglied ist offline   Marek123 

  • Gruppe: aktive Mitglieder
  • Beiträge: 46
  • Beigetreten: 23. Dezember 05
  • Reputation: 0
  • Wohnort:Hattingen
  • Interessen:Webdesign/Coding

geschrieben 02. November 2006 - 11:00

Hey Leute....

ich bräuchte Hilfe bei meinem CSS Layout.
Ich mach gerade ne Seite für eine Band und will bei denen nix falsch machen, darum schön CSS usw.

Na jedenfalls hab ich dann folgendes Problem. Ich zeig euch am besten das Bild, das erklärt es besser:

Eingefügtes Bild

Der Footer sowie die beiden Seitenteile bewegen sich nicht mit nach unten. Das Content-DIV geht einfach weiter nach unten, aber der rest bleibt "stehen".

Hier der CSS ode für die beiden Seitenteile und den Footer:

Seitenteile
div.index-11_ {
	position:absolute;
	left:0px;
	top:192px;
	width:235px;
	height:689px;
}
div.index-15_ {
	position:absolute;
	left:811px;
	top:192px;
	width:213px;
	height:689px;
}


Contentbereich
#targetArea, #blindArea {
	position:absolute;
	left:235px;
	top:192px;
	width:576px;
	height:689px;
}


Footer:
div.index-17_ {
	position:absolute;
	left:0px;
	top:881px;
	width:1024px;
	height:111px;
	clear:both;
	
}


Ich will keine Frames benutzen und auch keine iframe usw. .....Die Seite wird AJAX beinhalten.... Wenn ihr bock habt kann ich sie ja mal zeigen, wenn diese fertig ist.

Schon mal Danke für die Hilfe.
0

Anzeige



#2 Mitglied ist offline   Graumagier 

  • Gruppe: aktive Mitglieder
  • Beiträge: 8.811
  • Beigetreten: 01. März 04
  • Reputation: 1
  • Geschlecht:Männlich
  • Wohnort:Graz, Österreich

geschrieben 02. November 2006 - 11:07

Bei absoluten "top"-Angaben des Footers und der Seitenteile sollte das eigentlich auch nicht verwundern.

Dieser Beitrag wurde von Graumagier bearbeitet: 02. November 2006 - 11:07

"If you make something idiot proof, someone will invent a better idiot." - Marvin

For Emails always use OpenPGP. My KeyID: 0xA1E011A4
0

#3 Mitglied ist offline   axx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 19. Mai 05
  • Reputation: 0

geschrieben 02. November 2006 - 11:07

HTML-Quelltext wäre hilfreich. Aber auch so scheint es, als würdest du einem denkfehler unterliegen. Wenn mehrere div-Elemente ineinander verschachtelt sind, so dehnt das innere das äußere nicht aus, soll es auch gar nicht.

Du musst eine Lösung finden, die Elemente fließen zu lassen. Absolute Positionierung und feste Höhenangaben scheinen mir ein gänzlich falscher Ansatz zu sein.
0

#4 Mitglied ist offline   Marek123 

  • Gruppe: aktive Mitglieder
  • Beiträge: 46
  • Beigetreten: 23. Dezember 05
  • Reputation: 0
  • Wohnort:Hattingen
  • Interessen:Webdesign/Coding

geschrieben 02. November 2006 - 11:24

Alles klar.. ich werd mich dann nochmal dran setzen.

Ich meld mich ;D
0

#5 Mitglied ist offline   Marek123 

  • Gruppe: aktive Mitglieder
  • Beiträge: 46
  • Beigetreten: 23. Dezember 05
  • Reputation: 0
  • Wohnort:Hattingen
  • Interessen:Webdesign/Coding

geschrieben 02. November 2006 - 11:53

So, bin jetzt soweit das sich zumindest der footer verschiebt! Bzw. mitverschiebt:

Eingefügtes Bild

Nur, wie gesehen..die Seitenteile bleiben.

Hier mal der Code!

body {
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #FFFFF;
	background-image:url(images/tlo.gif)
	}
#container {
		width: 1024px;
		text-align: left;
}
#header {
	width:1024px;
	height:139px;
}
#menu {
	width:1024px;
	height:53px;
}

#leftside {
	float:left;
	width:235px;
	height:689px;
	background-image:url(images/index_11.gif)
}
#rightside {
	float:right;
	width:213px;
	height:689px;
}

#contents	{
	height: 576px;
	width: 576px;
	background-image:url(images/index_12.gif)
}

#footer	{
		clear: both;
		height: 111px;
}

0

#6 Mitglied ist offline   axx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 19. Mai 05
  • Reputation: 0

geschrieben 02. November 2006 - 12:13

Warum sollten sie sich auch verändern? BTW, HTML-Quelltext wäre hilfreich.
0

#7 Mitglied ist offline   Marek123 

  • Gruppe: aktive Mitglieder
  • Beiträge: 46
  • Beigetreten: 23. Dezember 05
  • Reputation: 0
  • Wohnort:Hattingen
  • Interessen:Webdesign/Coding

geschrieben 02. November 2006 - 12:20

Im Inet exp siehts auch sehr komisch aus, und im FF auch, und ich weiss kein rat ;D


Ganzer code:

<!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>Seite 1</title>

<style type="text/css">
<!--
body {
	margin: 0;
	padding: 0;
	font: 85% arial, hevetica, sans-serif;
	text-align: center;
	color: #FFFFF;
	background-image:url(images/tlo.gif)
	}
#container {
	width: 1024px;
	text-align: left;
}
#header {
	width:1024px;
	height:139px;
}
#menu {
	width:1024px;
	height:53px;
}

#leftside {
	float:left;
	width:235px;
	height:100%;
	background-image:url(images/index_11.gif);
}
#rightside {
	float:right;
	width:213px;
	height:100%;
	background-image:url(images/index_15.gif);
}

#contents	{
	margin-left: 235px;
	width: 576px;
	background-image:url(images/index_12.gif)
}

#footer	{
	clear: both;
	height: 111px;
	margin:0
}
-->
</style>
</head>
<body>
<div id="container">
<div id="header"><img id="index_01" src="images/index_01.gif" width="1024" height="139" alt="" /></div>

<div id="menu">
<a class="loadinto-targetArea" href="1.html"><img src="images/index_02.gif" alt="" name="index_02" width="266" height="26" border="0" id="index_02" /></a><a class="loadinto-targetArea" href="2.html"><img src="images/index_03.gif" alt="" name="index_03" width="73" height="26" border="0" id="index_03" /></a><img id="index_04" src="images/index_04.gif" width="92" height="26" alt="" /><img id="index_05" src="images/index_05.gif" width="97" height="26" alt="" /><img id="index_06" src="images/index_06.gif" width="82" height="26" alt="" /><img id="index_07" src="images/index_07.gif" width="77" height="26" alt="" /><img id="index_08" src="images/index_08.gif" width="73" height="26" alt="" /><img id="index_09" src="images/index_09.gif" width="264" height="26" alt="" /><br />
	<img id="index_10" src="images/index_10.gif" width="1024" height="27" alt="" /></div>

<div id="leftside"><img src="images/index_11.gif" width="235" height="689" alt="" /></div>
<div id="rightside"><img id="index_15" src="images/index_15.gif" width="213" height="689" alt="" /></div>
<div id="contents">
  <p>sdf</p>
  <p>ds</p>
  <p>f</p>
  <p>&nbsp;</p>
  <p>dsf</p>
  <p>asd</p>
  <p>as</p>
  <p>d</p>
  <p>asd</p>
  <p>as</p>
  <p>d</p>
  <p>asd</p>
  <p>as</p>
  <p>d</p>
  <p>asd</p>
  <p>as</p>
  <p>d</p>
  <p>as</p>
  <p>das</p>
  <p>d</p>
  <p>asd</p>
  <p>&nbsp;</p>
  <p>asd</p>
  <p>as</p>
  <p>d</p>
  <p>asd</p>
  <p>a</p>
  <p>sd</p>
  <p>asd</p>
  <p>a</p>
  <p>sd</p>
  <p>asd</p>
  <p>as</p>
  <p>d</p>
  <p>asd</p>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
</div>

<div id="footer"><img id="index_17" src="images/index_17.gif" width="1024" height="111" alt="" /></div>

</div>
</body>
</html>

0

#8 Mitglied ist offline   axx 

  • Gruppe: aktive Mitglieder
  • Beiträge: 487
  • Beigetreten: 19. Mai 05
  • Reputation: 0

geschrieben 02. November 2006 - 12:33

Das geht nicht. Sicherlich hast du schon mal mit Tabellenlayouts gearbeitet. Jedenfalls denkst du in Tabellenstrukturen. Ein dreispaltiges Layout lässt sich so in CSS2 nicht ohne Weiteres umsetzen.

Mögliche workarounds:
http://positioniseve...ruelayout/print
http://www.alistapar...icles/holygrail
http://alistapart.by....de/fauxcolumns
http://www.webkrauts...tandard-design/

Oder befrage Google nach "css +holy +grail".
0

Thema verteilen:


Seite 1 von 1

1 Besucher lesen dieses Thema
Mitglieder: 0, Gäste: 1, unsichtbare Mitglieder: 0