zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden ps design (slices), php (dynamischer inhalt), css gestaltung

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.05.2006, 20:56
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard 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!!
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.05.2006, 00:01
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
__________________
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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 12.05.2006, 00:46
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 12.05.2006, 04:18
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 12.05.2006, 09:33
Benutzerbild von Boris
Tanzender Webentwickler
XHTMLforum-Kenner
 
Registriert seit: 29.07.2004
Ort: Kornwestheim / Stuttgart
Beiträge: 4.930
Boris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer MenschBoris ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 12.05.2006, 09:42
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #7 (permalink)  
Alt 12.05.2006, 23:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

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!?
Mit Zitat antworten
  #8 (permalink)  
Alt 15.05.2006, 20:34
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

keiner ne idee!? :/
Mit Zitat antworten
  #9 (permalink)  
Alt 15.05.2006, 23:35
{ display: random;}
XHTMLforum-Kenner
 
Registriert seit: 08.09.2004
Ort: Stuttgart
Beiträge: 5.042
andir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblickandir ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 16.05.2006, 00:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.05.2006
Beiträge: 15
schleepy befindet sich auf einem aufstrebenden Ast
Standard

I'm sry, here you go

klick

CSS Datei
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Inspiration - Sammlung von Links emti Ressourcen 8 01.12.2009 19:02
CSS-Layout der Browsergröße anpassen Jen CSS 3 14.11.2008 09:39
CSS Problem Design auf anderen Rechnern verschoben MALPI CSS 3 09.10.2008 11:51
Redundanter Inhalt durch CSS -> PHP? smartens CSS 11 04.07.2007 19:18
CSS Design Probleme Hawklan CSS 5 12.08.2004 12:45


Alle Zeitangaben in WEZ +2. Es ist jetzt 21:34 Uhr.