XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   ps design (slices), php (dynamischer inhalt), css gestaltung (http://xhtmlforum.de/showthread.php?t=39909)

schleepy 11.05.2006 20: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>

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

andir 12.05.2006 00: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 fliegt raus. Für eine crossbrowser- konsistente Behandlung deiner Elemente ist wichtig, dass Browserdefaultwerte ( die oft unterschiedlich sind) genullt werden.

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>

Ist zwar alles bisschen fix, aber es funktioniert in IE7 beta, FF 1.5x, Opera 8.51

grüsse

schleepy 12.05.2006 00: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. :D

schleepy 12.05.2006 04: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

Boris 12.05.2006 09: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. ;)

andir 12.05.2006 09: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

schleepy 12.05.2006 23: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!?

schleepy 15.05.2006 20:34

keiner ne idee!? :/

andir 15.05.2006 23:35

Wie wärs mit einem kleinen Online-Beispiel?
Niemand weiss, wo du grade bist.

grüsse

schleepy 16.05.2006 00:00

I'm sry, here you go :D

klick

CSS Datei


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:54 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023