Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „hilfe, design fertig und was jetzt?“

mzewdi

Noch nicht viel geschrieben

hallo,

ich habe einen design schon fertig erstellt (in photoshop) die frage ist soll ich das lieber in tabellen ausgeben oder css.

wenn ich das in tabellen speichere, ist die html datei größer durch den abstandhalter was ich auch hässlich finde, das nimmt auch traffic dagegen ist css besser, die frage ist wie soll ich das genau machen, ich will die datei in eine php datei einbinden.


bitte um hilfe
 

augentier

...neu

AW: hilfe, design fertig und was jetzt?

Erstmal Willkommen im Forum!

Ja lass es doch als CSS ausgeben, ist zwar für den Anfänger schwieriger jedoch besserer Stil. Tabellen sind veraltet und auch nicht wirklich für diesen Zweck bestimmt/geeignet. Heutzutage wird alles mit CSS gemacht.
Wie meinst du das mit dem Einbinden in ein PHP-Datei?
Du bekommst doch von Photoshop eine komplette HTML-Datei ausgegeben (wenn ich das richtig weiß) und wenn dann kannst du in die HTML PHP einbinden!
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

hallo

erstmal danke für deine antwort.

ok damit wäre meine erste frage schon beantwortet was css angeht. danke

ich wollte die html datei als template benutzen.

also die index.php bekommt dann das aussehen von der index.html
und in der index.php werden mehrere unterseiten in dem content bereich eingebunden.

mfg
mzewdi
 

GeneralFabi

Nicht mehr ganz neu hier

AW: hilfe, design fertig und was jetzt?

Dazu müsstest du einige Variablen und includes erstellen, wenn man Ahnung von PHP hat, sollte das gehen, wenn nicht, ist es aber auch nicht schlecht es zu probieren und learning by doing zu machen, aber ich code mal was für dich...
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

danke,

könnt ihr mir vielleicht sagen ich die seite zentrieren kann?

ich möchte links und rechts 2 verschiedene bilder als hintergrund benutzen so wie hier auf diese seite < die seite ist in tabellen und nicht in css bearbeitet, die frage ist, ist es möglich das gleich mit css zu machen ? und wenn ja wie ?

danke im vorraus

mfg
mzewdi
 
W

waterwebdesign

Guest

AW: hilfe, design fertig und was jetzt?

du könntest ein div um die tabelle legen, dazu diesen css-code:

HTML:
div#tabelle
  {margin:0em;
   padding:0em;
   text-align:center;}

die beiden oberen zeilen sorgen dafür, das der inhalt direkt am div-rand liegt, und das div selbst keinen abstand zum rest der seite hat
keine angst, zentriert ist es trotzdem, das macht die letzte zeile

fals der text in der tabelle jetzt auch zentriert ist, solltest du den css-code noch so abändern:

HTML:
div#tabelle
  {margin:0em;
   padding:0em;
   text-align:center;}
table
  {text-align:left;}
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

hallo

danke erstmal

@waterwebdesign

ich habe das versucht das ging aber trotzdem nicht :(

hier der quellcode

HTML:
<!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>
<title>style</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body>
<div id="Tabelle_01">
	<div id="site-lc11_">
		<img id="site_lc11" src="img/site_lc11.png" width="39" height="11" alt="" />	</div>
	<div id="site-header_">
		<img id="site_header" src="img/site_header.png" width="762" height="11" alt="" />	</div>
	<div id="site-rc1_">
		<img id="site_rc1" src="img/site_rc1.png" width="33" height="10" alt="" />	</div>
	<div id="id-_">
		<img id="_" src="img/_.png" width="12" height="1" alt="" />	</div>
	<div id="site-rc2_">
		<img id="site_rc2" src="img/site_rc2.png" width="21" height="13" alt="" />	</div>
	<div id="site-lc2_">
		<img id="site_lc2" src="img/site_lc2.png" width="21" height="12" alt="" />	</div>
	<div id="banner_">
		<img id="banner" src="img/banner.png" width="792" height="103" alt="" />	</div>
	<div id="site-left_">
		<img id="site_left" src="img/site_left.png" width="21" height="671" alt="" />	</div>
	<div id="site-right_">
		<img id="site_right" src="img/site_right.png" width="21" height="671" alt="" />	</div>
	<div id="menue_">
		<img id="menue" src="img/menue.png" width="378" height="33" alt="" />	</div>
	<div id="id-011_">
		<img id="_011" src="img/_-11.png" width="360" height="5" alt="" />	</div>
	<div id="marquee-trenn_">
		<img id="marquee_trenn" src="img/marquee_trenn.png" width="12" height="33" alt="" />	</div>
	<div id="task-back_">
		<img id="task_back" src="img/task_back.png" width="42" height="33" alt="" />	</div>
	<div id="marquee-back_">
		<img id="marquee_back" src="img/marquee_back.png" width="360" height="23" alt="" />	</div>
	<div id="id-015_">
		<img id="_015" src="img/_-15.png" width="360" height="5" alt="" />	</div>
	<div id="navi-lh_">
		<img id="navi_lh" src="img/navi_lh.png" width="5" height="49" alt="" />	</div>
	<div id="navi-header_">
		<img id="navi_header" src="img/navi_header.png" width="145" height="21" alt="" />	</div>
	<div id="login-left_">
		<img id="login_left" src="img/login_left.png" width="45" height="49" alt="" />	</div>
	<div id="login-back_">
		<img id="login_back" src="img/login_back.png" width="402" height="34" alt="" />	</div>
	<div id="login-right_">
		<img id="login_right" src="img/login_right.png" width="44" height="49" alt="" />	</div>
	<div id="content-header_">
		<img id="content_header" src="img/content_header.png" width="144" height="21" alt="" />	</div>
	<div id="content-rh_">
		<img id="content_rh" src="img/content_rh.png" width="7" height="49" alt="" />	</div>
	<div id="id-023_">
		<img id="_023" src="img/_-23.png" width="145" height="28" alt="" />	</div>
	<div id="id-024_">
		<img id="_024" src="img/_-24.png" width="144" height="28" alt="" />	</div>
	<div id="login-foot_">
		<img id="login_foot" src="img/login_foot.png" width="402" height="10" alt="" />	</div>
	<div id="content-head_">
		<img id="content_head" src="img/content_head.png" width="402" height="5" alt="" />	</div>
	<div id="navi-l_">
		<img id="navi_l" src="img/navi_l.png" width="5" height="480" alt="" />	</div>
	<div id="navi_">
		<img id="navi" src="img/navi.png" width="167" height="492" alt="" />	</div>
	<div id="navi-r_">
		<img id="navi_r" src="img/navi_r.png" width="9" height="480" alt="" />	</div>
	<div id="content-l_">
		<img id="content_l" src="img/content_l.png" width="8" height="480" alt="" />	</div>
	<div id="content_">
		<img id="content" src="img/content.png" width="596" height="492" alt="" />	</div>
	<div id="content-r_">
		<img id="content_r" src="img/content_r.png" width="7" height="480" alt="" />	</div>
	<div id="navi-lc3_">
		<img id="navi_lc3" src="img/navi_lc3.png" width="5" height="12" alt="" />	</div>
	<div id="navi-rc3_">
		<img id="navi_rc3" src="img/navi_rc3.png" width="9" height="12" alt="" />	</div>
	<div id="content-lc2_">
		<img id="content_lc2" src="img/content_lc2.png" width="8" height="12" alt="" />	</div>
	<div id="content-rc4_">
		<img id="content_rc4" src="img/content_rc4.png" width="7" height="12" alt="" />	</div>
	<div id="navi-lc4_">
		<img id="navi_lc4" src="img/navi_lc4.png" width="14" height="6" alt="" />	</div>
	<div id="id-038_">
		<img id="_038" src="img/_-38.png" width="151" height="6" alt="" />	</div>
	<div id="navi-rc4_">
		<img id="navi_rc4" src="img/navi_rc4.png" width="16" height="6" alt="" />	</div>
	<div id="content-lc3_">
		<img id="content_lc3" src="img/content_lc3.png" width="17" height="6" alt="" />	</div>
	<div id="content-footer_">
		<img id="content_footer" src="img/content_footer.png" width="582" height="6" alt="" />	</div>
	<div id="content-rc3_">
		<img id="content_rc3" src="img/content_rc3.png" width="12" height="6" alt="" />	</div>
	<div id="site-lc4_">
		<img id="site_lc4" src="img/site_lc4.png" width="21" height="23" alt="" />	</div>
	<div id="foot_">
		<img id="foot" src="img/foot.png" width="792" height="23" alt="" />	</div>
	<div id="site-rc3_">
		<img id="site_rc3" src="img/site_rc3.png" width="21" height="23" alt="" />	</div>
	<div id="site-lc3_">
		<img id="site_lc3" src="img/site_lc3.png" width="39" height="11" alt="" />	</div>
	<div id="site-footer_">
		<img id="site_footer" src="img/site_footer.png" width="762" height="11" alt="" />	</div>
	<div id="site-rc4_">
		<img id="site_rc4" src="img/site_rc4.png" width="33" height="11" alt="" />	</div>
</div>
</body>
</html>

und in der css datei steht das

HTML:
/* layout */

#Tabelle_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:834px;
	height:728px;
}

#site-lc11_ {
	position:absolute;
	left:0px;
	top:0px;
	width:39px;
	height:11px;
}

#site-header_ {
	position:absolute;
	left:39px;
	top:0px;
	width:762px;
	height:11px;
}

#site-rc1_ {
	position:absolute;
	left:801px;
	top:0px;
	width:33px;
	height:10px;
}

#id-_ {
	position:absolute;
	left:801px;
	top:10px;
	width:12px;
	height:1px;
}

#site-rc2_ {
	position:absolute;
	left:813px;
	top:10px;
	width:21px;
	height:13px;
}

#site-lc2_ {
	position:absolute;
	left:0px;
	top:11px;
	width:21px;
	height:12px;
}

#banner_ {
	position:absolute;
	left:21px;
	top:11px;
	width:792px;
	height:103px;
}

#site-left_ {
	position:absolute;
	left:0px;
	top:23px;
	width:21px;
	height:671px;
}

#site-right_ {
	position:absolute;
	left:813px;
	top:23px;
	width:21px;
	height:671px;
}

#menue_ {
	position:absolute;
	left:21px;
	top:114px;
	width:378px;
	height:33px;
}

#id-011_ {
	position:absolute;
	left:399px;
	top:114px;
	width:360px;
	height:5px;
}

#marquee-trenn_ {
	position:absolute;
	left:759px;
	top:114px;
	width:12px;
	height:33px;
}

#task-back_ {
	position:absolute;
	left:771px;
	top:114px;
	width:42px;
	height:33px;
}

#marquee-back_ {
	position:absolute;
	left:399px;
	top:119px;
	width:360px;
	height:23px;
}

#id-015_ {
	position:absolute;
	left:399px;
	top:142px;
	width:360px;
	height:5px;
}

#navi-lh_ {
	position:absolute;
	left:21px;
	top:147px;
	width:5px;
	height:49px;
}

#navi-header_ {
	position:absolute;
	left:26px;
	top:147px;
	width:145px;
	height:21px;
}

#login-left_ {
	position:absolute;
	left:171px;
	top:147px;
	width:45px;
	height:49px;
}

#login-back_ {
	position:absolute;
	left:216px;
	top:147px;
	width:402px;
	height:34px;
}

#login-right_ {
	position:absolute;
	left:618px;
	top:147px;
	width:44px;
	height:49px;
}

#content-header_ {
	position:absolute;
	left:662px;
	top:147px;
	width:144px;
	height:21px;
}

#content-rh_ {
	position:absolute;
	left:806px;
	top:147px;
	width:7px;
	height:49px;
}

#id-023_ {
	position:absolute;
	left:26px;
	top:168px;
	width:145px;
	height:28px;
}

#id-024_ {
	position:absolute;
	left:662px;
	top:168px;
	width:144px;
	height:28px;
}

#login-foot_ {
	position:absolute;
	left:216px;
	top:181px;
	width:402px;
	height:10px;
}

#content-head_ {
	position:absolute;
	left:216px;
	top:191px;
	width:402px;
	height:5px;
}

#navi-l_ {
	position:absolute;
	left:21px;
	top:196px;
	width:5px;
	height:480px;
}

#navi_ {
	position:absolute;
	left:26px;
	top:196px;
	width:167px;
	height:492px;
}

#navi-r_ {
	position:absolute;
	left:193px;
	top:196px;
	width:9px;
	height:480px;
}

#content-l_ {
	position:absolute;
	left:202px;
	top:196px;
	width:8px;
	height:480px;
}

#content_ {
	position:absolute;
	left:210px;
	top:196px;
	width:596px;
	height:492px;
}

#content-r_ {
	position:absolute;
	left:806px;
	top:196px;
	width:7px;
	height:480px;
}

#navi-lc3_ {
	position:absolute;
	left:21px;
	top:676px;
	width:5px;
	height:12px;
}

#navi-rc3_ {
	position:absolute;
	left:193px;
	top:676px;
	width:9px;
	height:12px;
}

#content-lc2_ {
	position:absolute;
	left:202px;
	top:676px;
	width:8px;
	height:12px;
}

#content-rc4_ {
	position:absolute;
	left:806px;
	top:676px;
	width:7px;
	height:12px;
}

#navi-lc4_ {
	position:absolute;
	left:21px;
	top:688px;
	width:14px;
	height:6px;
}

#id-038_ {
	position:absolute;
	left:35px;
	top:688px;
	width:151px;
	height:6px;
}

#navi-rc4_ {
	position:absolute;
	left:186px;
	top:688px;
	width:16px;
	height:6px;
}

#content-lc3_ {
	position:absolute;
	left:202px;
	top:688px;
	width:17px;
	height:6px;
}

#content-footer_ {
	position:absolute;
	left:219px;
	top:688px;
	width:582px;
	height:6px;
}

#content-rc3_ {
	position:absolute;
	left:801px;
	top:688px;
	width:12px;
	height:6px;
}

#site-lc4_ {
	position:absolute;
	left:0px;
	top:694px;
	width:21px;
	height:23px;
}

#foot_ {
	position:absolute;
	left:21px;
	top:694px;
	width:792px;
	height:23px;
}

#site-rc3_ {
	position:absolute;
	left:813px;
	top:694px;
	width:21px;
	height:23px;
}

#site-lc3_ {
	position:absolute;
	left:0px;
	top:717px;
	width:39px;
	height:11px;
}

#site-footer_ {
	position:absolute;
	left:39px;
	top:717px;
	width:762px;
	height:11px;
}

#site-rc4_ {
	position:absolute;
	left:801px;
	top:717px;
	width:33px;
	height:11px;
}
 
W

waterwebdesign

Guest

AW: hilfe, design fertig und was jetzt?

was genau geht denn nich, ich seh in deinem css-code beispielsweise nicht, das auch nur ansatzweise versucht wurde die tabelle zu zentrieren, und wenn da nicht steht tex-align:center; dann macht ers natürlich auch nicht
auch margin und padding vermisse ich im quelltext noch
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

hallo,

klar habe ich das versucht, nur der code den ich darein kopiert habe ist der original code

auch mit dem, was du mir geschrieben hast hats nicht funktioniert

mfg
mzewdi
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

hallo,

weiss denn wirklich niemand wie das geht

ich habe das hier vesucht

einen div um die seite getan und site genannt

und dann in der css folgendes geschrieben aber das geht trotzdem nicht

div#site
{margin:0em;
padding:0em;
text-align:center;}

bitte um hilfe

danke im vorraus

mzewdi
 

filzlaus

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

Probiers mal bei deinem umschließenden Div mit

div#site
{margin:0px auto;
text-align:center;
}

Ich verstehe allerdings den ganzen Aufbau deiner Seite nicht. Du nimmst einfach das Bild Teilst es auf und das soll dann die Seite sein? Versteh ich das richtig?
 

rotzbua

Aktives Mitglied

AW: hilfe, design fertig und was jetzt?

Beim "body" stylesheet das hinzufügen:

body {
text-align: center;
}

und in deinen div:

div#site {
width: 800px; /* Oder wie breit deine seite auch immer ist */
margin: 0 auto;
text-align: left;
}


sollte funktionieren....
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

hallo

ich habe das gemacht aber leider nicht hinbekommen
eins ist klar, der div #site ist zentriert nur die bilder nicht, die sind immer noch auf der linken seite des bildschirms.

es hat glaube ich hiermit zu tun :

left:xxpx;

ich habe versucht die bilder zu zentrieren indem ich sie mit der maus selber woanders bewegte, das sah aber nicht gut aus.

hat jemand ne idee wie ich das machen kann ?

bitte um hilfe
und danke im vorraus

mfg
mzewdi
 
S

serverhombre

Guest

AW: hilfe, design fertig und was jetzt?

Hallo mzewdi,
also ich vermute das es am position:absolute; liegt.
Bei absoluter positionierung wird das element pixelgenau anhand von left und top positioniert.
Deshalb haben deine versuche die Seite zu zentrieren keine wirkung. :rolleyes:

Erklärung bei Selfhtml:
 

mzewdi

Noch nicht viel geschrieben

AW: hilfe, design fertig und was jetzt?

nach langer zeit kommt endlich die antwort auf meine frage

man muss 2 sachen im css bereich ändern undzwar

im div#site

schreibt man

left: 50%;

und

margin-left: -xxpx; / hier gibt man die hälfte ein z.B. bei einer breite von 600px gibt man -300px ein

danke für eure mühe :p
 

stb_87

Web-Sheriff - ohne Bild

AW: hilfe, design fertig und was jetzt?

Hättest du deine Ebenen relativ positioniert, hättest du nicht über anderthalb Jahre auf eine Antwort warten müssen :p

Wenn es jetzt so geht, ist es ja schön und gut, aber längst nicht die sauberste Lösung.

Stell das mal alles auf relative Positionierung um bzw. pack einen s. g. Wrapper um deine div-Suppe und positioniere diesen zentriert mit

#wrapper {
margin: 0px auto;
}

und die absolut positionierten Elemente orientieren sich bei der Ausrichtung an diesem Wrapper.
 

jackprince

xHTML & CSS Junkie

AW: hilfe, design fertig und was jetzt?

Kann stb87 da nur Unterstützen ... dieser ganze Mist mit
der absoluten Positionierung macht aus dem einfachsten Layout
eine Herausforderung.

Wenn sich bei solchen Kosntrukten auch nur ein Element verändert,
mehr oder weniger Inhalt, neues Element dazu etc. kann man die ganzen
Werte ändern. Ganz davon abgesehen das es nur in den wenigsten Fällen
annähernd variabel ist was unterschiedliche Auflösungen angeht.
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.158
Beiträge
2.581.869
Mitglieder
67.223
Neuestes Mitglied
Desiree
Oben