11.05.2006, 19:56
|
|||
|
|||
ps design (slices), php (dynamischer inhalt), css gestaltung
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>
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;
}
|
| Sponsored Links |
|
11.05.2006, 23:01
|
|||
|
|||
|
Tja der Ruf eines Verzweifelten... wie oft ereilt er uns....
Erstmal Willkommen hier. Photoshop ist nur für die Headergrafik nötig, der Rest geht prima mit einfachem CSS. Ich habe deinen Code nur überflogen und das meine ich so, er ist viel zu lang. Und du hast Milliarden von Div's, unnötig. Die Headergrafik kommt in einen div, klar. Der Rest ist dreispaltig. Code:
<body bgcolor=#FFFFFF leftmargin=0 topmargin=0 marginwidth=0 marginheight=0> Das geht so: http://www.xhtmlforum.info/wiki/inde...leml%C3%B6sung ( klein noch, aber man kann mitarbeiten) Du hast nach deiner Grafik Elemente mit Rahmen. Ja, warum auch nicht. Für mich würde sich folgendes anbieten: (nur ein Beispiel) Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="de" xml:lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Dreispalter</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
/* fuer aeltere IE */
}
#wrapper {
text-align: left;
width: 800px;
margin: auto;
}
#header {
height: 100px;
border: 1px solid black;
}
#hauptmenue {
float: left;
border: 1px solid black;
width: 158px;
height: auto;
background-color: #bfd4fb;
color: black;
}
#content {
float: left;
display: inline;
width: 448px;
border: 1px solid black;
background-color: #bfd4fb;
color: black;
margin-left: 10px;
margin-right: 10px;
}
#submenu {
float: left;
display: inline;
width: 158px;
border: 1px solid black;
background-color: #bfd4fb;
color: black;
}
#footer {
clear: left;
height: 50px;
border: 1px solid black;
background-color: #bfd4fb;
}
//-->
</style>
</head>
<body>
<div id="wrapper"><div id="header">header</div><div id="hauptmenue">
hauptmenue
bla
bla
</p></div><div id="content">
Am cleartype in IE7/ beta gefällt mir gar nix. Schriften sehen darin so verwaschen aus wie sie vorher gepixelt haben ( manchmal) Dafür ist das Ding mit den vergrösserten Grafiken ziemlich gut, wenn auch nicht auf jeder Stufe
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
lorem ipsum
</p></div><div id="submenu">
submenu</p>
bla
bla</p></div><div id="footer">
footer</p></div></div>
</body>
</html>
grüsse
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
|
11.05.2006, 23:46
|
|||
|
|||
|
hehe.. wieso einfach, wenn's auch schwierig geht..
ursprünglich sollte das design auch nicht so schlicht sein.. und unterwegs ist mir dann die Idee verloren gegangen, dass man es auch ohne ps machen kann. auch wenn es fix gemacht ist.. mehr brauch ich ja nicht.. jetzt hab ich endlich wieder Ideen.. ich probier das ganze dann mal nach deinem Beispiel umzusetzen.. hab nen gutes Gefühl, dass es klappen könnte. ich meld mich wieder. 
|
|
12.05.2006, 03:18
|
|||
|
|||
|
hmm.. jetzt wollte ich die div-element mit position: absolute; ausrichten.. allerdings funzt das mit den wrapper dann nicht mehr.. ne idee!?
mit position: relative; richtet er sich am header div-element aus... prinzipiell ginge das so. Die Frage ist jetzt nur, wie sich das bei verschiedenen Auflösungen verhält. Eigentlich müsste es ja funzen, wenn es sich am header ausrichtet.. der ist ja immer zentriert. hier mal zum gucken.. wie das design aussehen soll: klick
|
|
12.05.2006, 08:33
|
||||
|
||||
|
Finger weg von absoluten Positionierungen. andir hat dir so eine schöne Lösung nur mit floats gebaut, genau so solltest du auch weiter machen.
__________________
“My software never has bugs. It just develops random features ...”  » DevShack - die Website des freien Webentwicklers Boris Bojic
|
|
12.05.2006, 08:42
|
|||
|
|||
|
Das ist doch ganz einfach.
#wrapper bekommt ebenfalls einen border, ausser links. #footer unten und rechts keinen, dafür schließt er bündig mit #wrapper ab. Für den "umlaufenden" Effekt empfehle ich Dir eine kleine weiße Grafik in der Breite des Hauses zu nehmen, diese in #header zu packen und per negativem margin-bottom vom header raushängen zu lassen, so dass die Linie unterbrochen scheint. Wenn Du Elemente innerhalb eines Elements absolut ausrichten willst, musst Du dem Elternelement ein position: relative mitgeben. Für die kleine Grafik wäre position:absolute das einfachste. (bottom: 0; left: 0; margin-bottom: -2px #header bekommt dann position: relative, damit das auch klappt.Ups, wenn zusätzliche border hinzukommen, muss das bei der pixelbreite der Elemente berücksichtigt werden grüsse
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
|
12.05.2006, 22:22
|
|||
|
|||
|
sry... ich versteh nicht genau, wie du das alles meinst...ich weiß nicht was du mit "umlaufenden Effekt" und kleine Grafik.. und wieso sollte der wrapper nen rand außer links bekommen? das entspräche doch überhaupt nicht meiner preview!?
edit: aah o.k. ich glaub ich weiß jetzt in etwas wie du das meinst.. mal ausprobieren edit2: o.k... das mit dem rand unter dem header hab ich hinbekommen.. hab's noch viel einfacher gehabt, als du beschrieben hast. Ich hatte doch schon ne grafik, die ich gesliced hatte.. brauchte die mit margin-bottom einfach nur positionieren.. sieht perfekt aus! worüber ich mir derzeit noch gedanken mache ist, wie ich die zweite box links positioniert bekomme... der inhalt ist auch dynamisch, ebenso der inhalt der menübox. edit3: das mit dem Rahmen rechts klappt nicht so ganz... weil der Rahmen ja nicht ganz außen ist sondern ca. 12px nach innen verschoben ist... und mit grafik einfügen sieht's schlecht aus, weil die länge sich ja anpassen muss.. jemand ne idee.. wie ich das lösen kann!?
|
|
15.05.2006, 22:35
|
|||
|
|||
|
Wie wärs mit einem kleinen Online-Beispiel?
Niemand weiss, wo du grade bist. grüsse
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte
|
| Sponsored Links |
 |
| Themen-Optionen | |
| Ansicht | |
|
|
Ähnliche Themen
|
||||
| Thema | Autor | Forum | Antworten | Letzter Beitrag |
| Inspiration - Sammlung von Links | emti | Ressourcen | 8 | 01.12.2009 18:02 |
| CSS-Layout der Browsergröße anpassen | Jen | CSS | 3 | 14.11.2008 08:39 |
| CSS Problem Design auf anderen Rechnern verschoben | MALPI | CSS | 3 | 09.10.2008 10:51 |
| Redundanter Inhalt durch CSS -> PHP? | smartens | CSS | 11 | 04.07.2007 18:18 |
| CSS Design Probleme | Hawklan | CSS | 5 | 12.08.2004 11:45 |
Linear-Darstellung
