Frage zu DIV - Programmierung - 3-Spalten-Design

Flateric · Beitrag von **Flateric** » Fr 9. Jun 2006, 19:10

Hallo Forum,

an alle: "Guck doch mal bei Google Antworter..." -> das habe ich bereits getan, und komme aber nicht weiter.

Ich möchte ein simples 3 Spalten Design für meine Homepage haben. Da ich nun schon so viel in den Dateien herumgefuhrwerkt habe, bin ich mittlerweile am verzweifeln.

Warum ist der rechte Bereich zum Beispiel unter dem Content? Ich möchte eine Breite von 1000px haben für die Page. Ach - ich poste Euch mal die Layout - Datei und den Stylesheet :-/

Da ich oben diese FADE - Bilder drinhabe, kann ich mit dem Background-Image erst unter der Linie anfangen... Irgendwie bin ich total durcheinandern nun und hoffe auf Eure Hilfe!

Hier der Link zu meiner alten hardgecodeten Page: http://www.bublitz-partner.de
und hier der Link zum Contenido-Duplikat: http://www.bublitz-partner.de/contenindo/cms

Gruß

Sven

P.S.: Die Seite soll natürlich nicht 1:1 kopiert werden, sondern es soll eben die dritte Spalte dazukommen... ansonsten soll es aber ähnlich werden!

Layout-Datei:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
	<title>Contenido Demo-Seite</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="css/style_print.css" rel="stylesheet" type="text/css" media="print">
	<!--[if IE]>
		<style>
			#imagecolumn {
				width:170px;
                                			}
			#logo {
				margin-top:0;
                           	}
			#navipath {
				padding-top:2px;
			}
			.balken {
				background-position:0px 0px ;
			}
                        #outer {
				width:780px;
			}
                        #additionalnavi {
				padding-top:2px;
			}
        </style>
	<![endif]-->
<script language="javascript" type="text/javascript" src="js/jsApi.js"></script>
</head>
<body>
<center>
<table width="1000" height="155"  border="0" cellspacing="0" cellpadding="0">
				<tr>
				<td><div style="height:150px;width:180px;">
                                    <div id="bild1" style="position:absolute;visibility:hidden;"><img src="images/leftlogo1.jpg" width="180" height="150" alt="Büromöbel"/></div>
                                    <div id="bild2" style="position:absolute;visibility:hidden;"><img src="images/leftlogo2.jpg" width="180" height="150" alt="Konferenzmöbel"/></div>
                                    <div id="bild3" style="position:absolute;visibility:hidden;"><img src="images/leftlogo3.jpg" width="180" height="150" alt="Empfangsmöbel"/></div>
                                    <div id="bild4" style="position:absolute;visibility:hidden;"><img src="images/leftlogo4.jpg" width="180" height="150" alt="Gastronomiemöbel"/></div>
                                    <div id="bild5" style="position:absolute;visibility:hidden;"><img src="images/leftlogo5.jpg" width="180" height="150" alt="Altenheimmöbel"/></div>
                                    <div id="bild6" style="position:absolute;visibility:hidden;"><img src="images/leftlogo6.jpg" width="180" height="150" alt="Pflegeheimmöbel"/></div>
                                    </div></td>
			            <td colspan="2" align="right"><img src="images/banner_right.jpg" border="0"/></td>
			            </tr>
				<tr>
				    <td colspan="3" class="balken"><img src="images/blank.gif" border="0" width="780" height="5" alt=""/></td>
				</tr>
</table>
<div id="outer">
<div id="innerwrap">
<div id="left">                <container id="44" name="Suche" types="Navigation" default="">Suche</container>
                        <br><br>
                        <container id="40" name="Hauptnavigation" types="Navigation" mode="fixed" default="Hauptnavigation">Hauptnavigation</container>
			<center><img src="images/begruessung.gif" alt="Altenheimmöbel"/></center>
</div>
<div id="centrecontent">
              		<container id="60" name="Navigationspfad" types="Navigation" mode="fixed" default="Navigationspfad">Navigationspfad</container>
			<container id="10" name="Headline" types="Content" default="Headline (HTML)">Headline (HTML)</container>
			<container id="12" name="Text" types="Content" default="">Content 1</container>
			<container id="15" name="Text" types="Content" default="">Content 2</container>
			<container id="22" name="Text" types="Content" default="">Content 3</container>
			<container id="24" name="Text" types="Content" default="">Content 4</container>
			<container id="26" name="Text" types="Content" default="">Content 5</container>
			<container id="28" name="Text" types="Content" default="">Content 6</container>
</div>
</div>
<div id="imagecolumn">
        <container id="70" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="72" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
	<container id="74" name="Teaser_Rechts" types="Content" mode="optional">Teaser (Rechts)</container>
</div>
</div>
<div id="clearfooter">
<container id="30" name="BottomNavigation" types="Navigation" mode="fixed" default="BottomNavigation">BottomNavigation</container>
</div>

 <script type="text/javascript">

 /*  The code contained in this  file is copyrighted by www.jojoxx.net

 The file may be used for none commercial applications and distributedas long as these lines remain intact.

 The file or part of it may notbe sold  or  included  in any  other commercial  application  withoutagreement from the author.

 If you have questions or comments, contactthe author at http://www.jojoxx.net© Copyright - www.jojoxx.net - 2004    */



 var divs=["bild1","bild2","bild3","bild4","bild5","bild6"];var zindex=0;function fade(n,diff,opacity){	id=divs[n];	opacity=(opacity)?opacity:(diff<0)?100:0; opacity+=diff;	if(document.getElementById&&document.all){		document.getElementById(id).style.filter="alpha(opacity="+opacity+")";	}else if(document.getElementById&&!document.all){		document.getElementById(id).style.MozOpacity = opacity/100;	}	document.getElementById(id).style.visibility="visible";	if(opacity>=99){		zindex++;		document.getElementById(id).style.zIndex=zindex;		setTimeout("fade("+n+",-"+diff+","+opacity+");",2000);		nn=(n==divs.length-1)?0:n+1;		setTimeout("fade("+nn+","+diff+");",2000);	} else if(opacity>0){		setTimeout("fade("+n+","+diff+","+opacity+");",30);	}}fade(0,1);

 </script>
</body>
</html>

Stylesheet:

Code: Alles auswählen

html, body { height:100%; }

body {
	padding:0;
	margin:0;
	text-align:left;
	min-width:1000px;
	background-color:#FFFFFF;
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
        background-repeat:repeat-y;
	background-position:0px 100px;
	overflow-x:hidden;
	overflow:-moz-scrollbars-vertical;
}

td {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(6,77,116);
	margin-bottom:8px;
}

.input {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
	width:240px;
	margin-bottom:8px;
	border-top:1px solid #999999;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;
	border-left:1px solid #999999;
}

.label {
	font-size:11px;
	font-family:Verdana,Tahoma,Arial,Helvetica,Sans-serif,sans-serif;
	color:rgb(0,0,0);
}

.small {
	font-size:9px;
}

#outer{
        position:relative;
        margin:auto;
        height:100%;
        min-height:100%;
        width:1000px;
        color:#000000;
        text-align:left;
        border-left:1px solid #8A0202;
        border-right:1px solid #8A0202;
        border-top:1px solid #8A0202;
        border-bottom:1px solid #8A0202;

}

html>body #outer{ height:auto; }

#innerwrap {
	float:left;
	width:800px;
	height:100%;
	border-top:1px solid;
        border-left:1px solid ;
        border-right:1px solid ;
        border-bottom:1px solid ;
}

#header{
        position:relative;
        margin:auto;
        width:1000px;
	height:156px;
        color:#ffffff;
 	}

#left {
	position:relative;
	width:180px;
	z-index:15;
        float:left;
        height:100%;
        background-color:#eaeaea;
	min-height:480px;
	padding-top:10px;
	padding-bottom:2px;
}

#left p { padding-left:3px;padding-right:2px }

#right p { padding-left:4px;padding-right:2px }

#imagecolumn {
        margin-top:10px;
	top:0px;
	float:left;
	left:800px;
	width:200px;
	height:100%;
        z-index:10;
        padding-top:0px;
        padding-bottom:20px;
 	color:rgb(62,77,116);
}

#imagecolumn a {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:rgb(190,190,190);
	margin:0;
}

#imagecolumn h1 {
	padding:0;
	font-weight:normal;
	font-size:11px;
	color:#8A0202;
	margin:0;
}


div,p  { margin-top:0; }

#centrecontent {
	width:608px;
	float:right;
        border-top:1px solid;
        border-left:1px solid ;
        border-right:1px solid ;
        border-bottom:1px solid ;
        padding-left:10px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:20px;
	color:rgb(62,77,116);
}

#centrecontent p { padding-left:3px:color:rgb(62,77,116); }

#clearfooter { width:998px;height:2px;clear:both;border-top:1px solid;
        border-left:1px solid ;
        border-right:1px solid ;
        border-bottom:1px solid ; }

#bottomnavi {position:relative;
        margin:auto;
        height:20px;
        width:1000px;
        text-align:left;
 	color:rgb(210,210,210);
}

#additionalnavi {
	float:right;
	background-color:#ffffff;
	margin-top:3px;
	padding-bottom:2px;
	padding-top:0px;
	margin-left:10px;
	text-align:center;
	width:170px;
	color:rgb(160,160,160);
}

#logo {
	width:780px;
        height:10px;
	margin-top:10px;
}

#navipath {
	padding:0;
	padding-bottom:10px;
	background-color:#ffffff;
	color:rgb(99,99,99);
	width:388px;
}

.navi{
	width:179px;
	padding-left:0px;
 	border-bottom:1px solid rgb(170,170,170);
  	background-color:rgb(255,255,255);
}

h1 {
	padding-left:0px;
	font-weight:bold;
	font-size:14px;
	color:#8A0202;
	margin:0;
}

menutop {
	padding-left:10px;
	font-weight:bold;
	font-size:13px;
	color:#8A0202;
	margin:0;
}


h1.content {
	margin-bottom:12px;
	padding:0;
}

hr { color:rgb(210,210,210); }

a { font-size:11px; color:rgb(190,190,190); text-decoration:none; }
a:hover { text-decoration:underline; }

a.newsheadline { font-weight:bold; }

a.bottomnavi { color:rgb(160,160,160); font-size:9px; }

a.additionalnavi { font-size:10px; color: rgb(160,160,160); }

a.navipath { font-size:10px; color: rgb(160,160,160); }

a.navileft_passive {
	display:block;
	background-color:#8A0202;
	padding-top:3px;
	padding-bottom:3px;
	font-size:11px;
	color:rgb(255,255,255);
}

a.navileft_active {
	display:block;
	background-color:#ffffff;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
}

a.navileft_open {
	padding-left:10px;
	display:block;
	background:url("../images/navi_pfeil.gif") no-repeat;
	background-position:right;
	background-color:#E8E8EE;
	padding-top:3px;
	padding-bottom:3px;
	color:rgb(51,79,119);
}

a.sitemap_level1 {
	display:block;
	border-bottom:1px solid #b4a8b4;
	color:#8A0202;
	font-weight:normal;
	padding-bottom:.4em;
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:right;
}

a.sitemap_level2 {
	color:rgb(62,77,116);
	background:url("../images/navi_pfeil_rechts.gif") no-repeat;
	background-position:170px 4px;
	display:block;
}

a.sitemap_level3 {
	color:rgb(190,190,190);
}

.sitemap_level2_container {
	float:left;
	width:50%;
	padding-top:.3em;
}

.sitemap_level3_container {
	float:right;
	width:50%;
	padding-top:.3em;
}

.input_searchbox {
	width:65px;
	vertical-align:middle;
	font-size:10px;
	color: rgb(62,77,116);
}

.input_newsletterselect {
	width:80px;
	vertical-align:middle;
	font-size:11px;
	margin-right: 8px;
	color: rgb(62,77,116);
}

.label_searchbox {
	vertical-align:middle;
	color:#9d9ea2;
	position:relative;
	padding-left:10px;
	/*left:-65px;*/
}

#loginbox {
	background-color:#DFE0E5;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:1.5em;
	margin-bottom:1.5em;
}

#searchbox {
	background-color:#eaeaea;
	border-top:1px solid #aeaeae;
	border-bottom:1px solid #aeaeae;
	padding-bottom:.6em;
	padding-top:.6em;
	padding-left:0em;
	padding-right:0em;
	margin-top:0px;
	margin-bottom:0px;
}

#newsletterbox {
   background-color:#DFE0E5;
   border-top:1px solid #aeaeae;
   border-bottom:1px solid #aeaeae;
   padding-bottom:.6em;
   padding-top:.6em;
   padding-left:.5em;
   padding-right:.5em;
   margin-top:1.5em;
   margin-bottom:1.5em;
}

.hidden {
	display:none;
}

.balken {
	padding-left:0px;
	background-color:rgb(255,110,43);
        background-image:url('../images/bg2.jpg');
	background-repeat: repeat-x,repeat-y;
	background-position:2px 0px ;
}

rezeptionist · Beitrag von **rezeptionist** » Fr 9. Jun 2006, 19:53

Hättest du nicht posten brauchen.

1. Setze dich mit HTML und CSS auseinander ( auch in den MOdulen und Templates)
2. http://chrispederick.com/work/webdeveloper/
3. Warum benutzen alle dieses schreckliche Grundgerüst der Standardinstallation ?
4. Sorry wenn ich mir nicht mal den Quelltext anschaue aber ich denke einfach "wenn schöne Seite dann individuell" sorry so spricht eben ein Designer.

mvf · Beitrag von **mvf** » Fr 9. Jun 2006, 19:59

rezeptionist hat geschrieben: 4. Sorry wenn ich mir nicht mal den Quelltext anschaue aber ich denke einfach "wenn schöne Seite dann individuell" sorry so spricht eben ein Designer.

agreed!

und wenn schon redesign dann keine tabellen für's layout und am besten noch html/xhtml/css validiert

edit rezeptionist habe dir ein "n" geschenkt beim design

rezeptionist · Beitrag von **rezeptionist** » Fr 9. Jun 2006, 20:00

ok schnell drüber geschaut:

Setze dein Layout neu auf
Ich sag mal 20 minuten und das ist passiert !
ansonsten hier:
http://www.cssplay.co.uk/layouts/3cols.html
Da wir hier kein HTML und CSS Forum sind kann und will ich nicht weiter darauf eingehen.

Ansonsten PM

mvf · Beitrag von **mvf** » Fr 9. Jun 2006, 20:34

rezeptionist hat geschrieben: edit rezeptionist habe dir ein "n" geschenkt beim design

harhar danke

aber wenn du alles korrigieren würdest hättest du beimir ne menge zu tun

nicht das ich nicht könnte, aber meist tippe ich es runter und ab dafür, so wie man es 'überschreibt' 'überliest' man es auch. kennst eh den beispieltext wo tausende fehler drin sind aber es dennoch jeder korrekt vorlesen würde auf anhieb

rezeptionist:lach so geht es mir auch. war net böse gemeint aber weist du auch !

mvf - eh klar

Flateric · Beitrag von **Flateric** » Sa 10. Jun 2006, 09:13

Hi

Ich denke - wie Ihr ja auch schon gesagt habt, das es sich hier um Grundsätzliches handelt. Vielleicht gehört das Posting auch eher in ein CSS-Anfänger Forum, es hat ja auch wenig mit Contenido selbst zu tun...

Sorry hierfür!

Bin allerdings auch als Anfänger der Meinung, das es doch eigentlich unter einer Stunde erledigt sein müsste... Leider übertrifft meine eingesetzte Zeit schon bei weitem diese Vorgabe *lach* - so ist das eben - aller Anfang ist schwer!

Viele Dinge erscheinen mir auch nicht logisch, wenn ich eine Änderung im Layout mache und nachher etwas ganz anderes passiert!??

Und eigentlich will ich doch Einrichtungen machen *lach*

Gruß

Sven

mikk · Beitrag von **mikk** » Sa 10. Jun 2006, 14:58

Zeitplanung und Web-Porgrammierung/Design passen absolut nicht zusammen - vor allem wenn Du beides in einer Person erledigst

Und CSS ist absolut logisch und mächtig wenn man damit umgehen kann - oftmals liegt das Problem allerdings an den Fehlinterpretationen der Browser, aber dafür gibt es im Netz schon genug Hacks die einem weiterhelfen.

Flateric hat geschrieben: Und eigentlich will ich doch Einrichtungen machen *lach*

>> Dann gib den Auftrag an Leute die sich damit Brötchen verdienen

----

http://www.css4you.de/wslayout1/index.html

http://css.fractatulum.net/beispiele.htm

Gruß

CONTENIDO Forum

Frage zu DIV - Programmierung - 3-Spalten-Design

Frage zu DIV - Programmierung - 3-Spalten-Design

Grundsätzliches Problem