Soo Leute..
jetzt bin ich mit meinem Latein am Ende. Ich find nach mehreren Tagen Suche keine Lösung mehr und die Ideen sind mir auch ausgegangen.
Vielleicht sollte ich vorweg sagen, dass ich keine Ahnung habe, wie ich mein Vorhaben angehen soll. Ich weiß nur, dass es irgendwie realisierbar ist. Also bitte verzeiht, wenn es einen viel sinnvolleren Lösungsweg gibt.
Ich benutze Firefox 1.5.0.3... sollte am Ende aber auf allen großen Browsern laufen.
sry, für das wirrwarr im code. die folge von ganz viel ausprobieren...
ich weiß, da lässt sich noch einiges im CSS Code vereinfachen.. aber ich bin ja gerad noch in der Entwicklungsphase...
Preview:
klick
Das design ist mit photoshop gemacht.. danach gesliced... das Problem liegt darin, dass ich die Boxen nicht so hinbekomme, dass sie sich dem Inhalt anpassen. In die mittlere Box soll nen Newscript nur die Rahmenlinien (Grafiken) passen sich bei meinem Code nicht der länge des Textes an... ich bekomm's nicht hin :/
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=utf-8" />
<title>Northwest Philadelphia Interfaith Hospitality Network (NPIHN)</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0>
<div id='center'>
<div id='index_01'> </div>
<div id='index_02'>
</div>
<div id='index_03'>
</div>
<div id='index_07'>
</div>
<div id='index_08'>
</div>
<div id='index_09'>
</div>
<div id='index_15'>
</div>
<div id='index_16'>
</div>
<div id='index_17'>
</div>
<div id='index_19'>
menu
</div>
<div id='index_21'>
</div>
<div id='index_22'>
</div>
<div id='index_24'>
</div>
<div id='index_27'>
</div>
<div id='index_28'>
</div>
<div id='index_29'>
</div>
<div id='index_30'>
</div>
<div id='index_31'>
</div>
<div id='index_11'> </div>
<div id='index_12'> </div>
<div id='index_13'> </div>
<div id='index_20'>
ganz viel text mit variabler länger...
.
.
.
ganz viel text mit variabler länger...
</div>
<div id='index_33'> </div>
</div>
</div>
</body>
</html>
die zugehörige css datei:
Code:
div#center {
position: absolute;
left: 50%;
margin-left: -400px;
width: 800px;
}
/* header */
div#index_01 {
background-image: url('graphics/index_01.gif');
background-repeat: no-repeat;
position: absolute;
height: 106px;
width: 800px;
min-height: 106px;
min-width: 800px;
max-height: 106px;
max-width:800px;
z-index:0;
}
/* header border */
div#index_02 {
background-image:url('graphics/index_02.gif');
background-repeat: no-repeat;
position: relative;
left: 0px;
top: 106px;
height: 2px;
width: 786px;
min-height: 2px;
min-width: 786px;
max-height: 2px;
max-width: 786px;
z-index: 0;
}
/* right border */
div#index_03 {
background-image:url('graphics/index_03.gif');
position:absolute;
left:786px;
top: 106px;
height:466px;
width:2px;
min-height:466px;
min-width:2px;
z-index:0;
}
/* menu box, left border */
div#index_07 {
background-image:url('graphics/index_07.gif');
position:absolute;
left:0px;
top:156px;
height:216px;
width:2px;
min-height:216px;
min-width:2px;
z-index:0;
}
/* menu box, top border */
div#index_08 {
background-image:url('graphics/index_08.gif');
background-repeat: no-repeat;
position:absolute;
left: 2px;
top: 156px;
height:2px;
width:122px;
min-height:2px;
min-width:122px;
max-height:2px;
max-width:122px;
z-index:0;
}
/* menu box, right border */
div#index_09 {
background-image:url('graphics/index_09.gif');
position:absolute;
left:124px;
top:156px;
height:216px;
width:2px;
min-height:216px;
min-width:2px;
z-index:0;
}
/* main box, left border */
div#index_11 {
background-image:url('graphics/index_11.gif');
position:absolute;
left:132px;
top:156px;
height:412px;
width:2px;
min-height:412px;
min-width:2px;
z-index:0;
}
/* main box, top border */
div#index_12 {
background-image:url('graphics/index_12.gif');
background-repeat: no-repeat;
position:absolute;
left: 134px;
top: 156px;
height:2px;
width:512px;
min-height:2px;
min-width:512px;
max-height:2px;
max-width:512px;
z-index:0;
}
/* main box, right border */
div#index_13 {
background-image:url('graphics/index_13.gif');
position:absolute;
left:646px;
top:156px;
height:412px;
width:2px;
min-height:412px;
min-width:2px;
z-index:0;
}
/* right box, left border */
div#index_15 {
background-image:url('graphics/index_15.gif');
position:absolute;
left:654px;
top:156px;
width:2px;
min-height:216px;
min-width:2px;
z-index:0;
}
/* right box, top border */
div#index_16 {
background-image:url('graphics/index_16.gif');
background-repeat: no-repeat;
position:absolute;
left: 656px;
top: 156px;
height:2px;
width:122px;
min-height:2px;
min-width:122px;
max-height:2px;
max-width:122px;
z-index:0;
}
/* right box, right border */
div#index_17 {
background-image:url('graphics/index_17.gif');
position:absolute;
left:778px;
top:156px;
width:2px;
min-height:216px;
min-width:2px;
z-index:0;
}
/* menu box, content */
div#index_19 {
background-image:url('graphics/index_19.gif');
position:absolute;
left:2px;
top:158px;
width:122px;
min-height:212px;
min-width:122px;
z-index:0;
}
/* main box, content */
div#index_20 {
background-image:url('graphics/index_20.gif');
position:absolute;
left:134px;
top:158px;
width:512px;
min-height:408px;
min-width:512px;
z-index:0;
}
/* right box, content */
div#index_21 {
background-image:url('graphics/index_21.gif');
position:absolute;
left:656px;
top:158px;
width:122px;
min-height:212px;
min-width:122px;
z-index:0;
}
/* menu box; bottom border */
div#index_22{
background-image:url('graphics/index_22.gif');
background-repeat: no-repeat;
position:absolute;
left: 2px;
top: 370px;
height:2px;
width:122px;
min-height:2px;
min-width:122px;
max-height:2px;
max-width:122px;
z-index:0;
}
/* login/admin box; top border */
div#index_24 {
background-image:url('graphics/index_24.gif');
background-repeat: no-repeat;
position:absolute;
left: 2px;
top: 400px;
height:2px;
width:122px;
min-height:2px;
min-width:122px;
max-height:2px;
max-width:122px;
z-index:0;
}
/* login/admin box, left border */
div#index_27 {
background-image:url('graphics/index_27.gif');
position:absolute;
left:0px;
top:400px;
width:2px;
min-height:102px;
min-width:2px;
z-index:0;
}
/* right box; bottom border */
div#index_28 {
background-image:url('graphics/index_28.gif');
background-repeat: no-repeat;
position:absolute;
left: 656px;
top: 370px;
height:2px;
width:122px;
min-height:2px;
min-width:122px;
max-height:2px;
max-width:122px;
z-index:0;
}
/* login/admin box, right border */
div#index_29 {
background-image:url('graphics/index_29.gif');
position:absolute;
left:124px;
top:400px;
width:2px;
min-height:102px;
min-width:2px;
z-index:0;
}
/* login/admin box, content */
div#index_30 {
background-image:url('graphics/index_30.gif');
position:absolute;
left:2px;
top:402px;
width:122px;
min-height:98px;
min-width:122px;
z-index:0;
}
/* login/admin box; bottom border */
div#index_31 {
background-image:url('graphics/index_31.gif');
background-repeat: no-repeat;
position:absolute;
left: 2px;
top: 500px;
height:2px;
width:122px;
min-height:2px;
min-width:122px;
max-height:2px;
max-width:122px;
z-index:0;
}
/* main box; bottom border */
div#index_33 {
background-image:url('graphics/index_33.gif');
background-repeat: no-repeat;
position:absolute;
left: 134px;
bottom: 150px;
height:2px;
width:512px;
min-height:2px;
min-width:512px;
max-height:2px;
max-width:512px;
z-index:0;
}
Danke schonmal für jede Hilfe!!