PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Wie aus "Bild" hp machen?


Yan-13
2005-10-02, 20:25:59
Hoi habe mit ps jetzt nen komplettes hp layout erstellt. nu is meine frage wie ich jetzt den Text in die einzelnen Elemente bekomme ....

Kann man Tabellen in der Position genau bestimmen oder sowas ?

mfg Yan13

05858
2005-10-02, 20:32:08
mit slices in phtoshop funktioniert das ganze ganz prima. photoshop erstellt dir gleich ne fertige html-datei. was du dnan damit machst, bleibt dir überlassen

Kinman
2005-10-02, 20:32:53
Nein, aber DIVs
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=div
kannst mit css super positionieren
mfg Kinman

Yan-13
2005-10-02, 20:55:15
wo finde ich in ps die slices funktion ?

bei shelfhtml habe ich nur gefunden wie man die Tabelle auf left right oder center setzt net aber wie man sie pixelgenau ausrichtet hast du da nen genaueren Link ?

05858
2005-10-02, 21:02:41
in der werkzeug-leiste ist es das teil was aussieht wie ein füllfederhalter

Kinman
2005-10-02, 21:26:24
http://academ.hvcc.edu/~kantopet/old/css/index.php?page=css+positioning&parent=css+page+layout

is wieder english, sollte aber beim überfliegen schon verständlich sein... (www.dict.leo.org)
mfg Kinman

Gast
2005-10-03, 15:52:06
nein nein nein! um ein design ins html umzusetzen benutzt man keine tabellen! nimm ein paar <div>-s im html und schönes css, dann haut das auch gscheit hin.

Expandable
2005-10-03, 16:21:29
nein nein nein! um ein design ins html umzusetzen benutzt man keine tabellen! nimm ein paar <div>-s im html und schönes css, dann haut das auch gscheit hin.

Wieso eigentlich nicht? Mit Tabellen ist das gleich erledigt. Mit DIVs braucht man ewig - und dann noch 4x so lang, damit's auf allen Browsern gleich aussieht ;)

Kinman
2005-10-03, 16:40:42
Tabellen sind weitaus länger als CSS Layout und der wichtigste Vorteil geht verloren:
Layout & Content getrennt!

Und wegen Browser kompatibilität: Einfach aufs padding bei den divs verzichten.

mfg Kinman

Gast
2005-10-03, 21:04:25
Wieso eigentlich nicht? Mit Tabellen ist das gleich erledigt. Mit DIVs braucht man ewig - und dann noch 4x so lang, damit's auf allen Browsern gleich aussieht ;)
(Y)


Und wegen Browser kompatibilität: Einfach aufs padding bei den divs verzichten.
ach, wenns doch so einfach wäre...
aber der IE kennt im standards-mode eh auch das richtige box-modell, von dem her...

Yan-13
2005-10-05, 20:29:55
so ma ne frage das layout habe ich jetzt fast fertig:

http://img80.imageshack.us/img80/6743/komplettehpmega2iv.th.gif (http://img80.imageshack.us/my.php?image=komplettehpmega2iv.gif)

so wie bekomme ich jetzt ne tabelle um das erste navi element ?

kann ggf. ma wer nen beispiel machen ?

Yan-13
2005-10-05, 21:04:07
Oder mal ne andere frage

wenn ich ne tabelle erstelle


<table border="1" height="900">
<colgroup>
<col width="170">
<col width="610">

</colgroup>
<tr>
<td>Blablabla</td>
<td>Blablabla</td>

</tr>
</td>
</tr>

</table>


nun is das problem das der Text in der mitte der tabelle angezeigt wird was muss ich machen damit er am oberen rand der tabelle steht ?

Gast
2005-10-05, 21:31:19
man benutzt keine tabellen, um ein design zu realisieren!

bArToN
2005-10-05, 21:35:06
man benutzt keine tabellen, um ein design zu realisieren!
OMG!!!

Dann macht doch einen Bashthread auf, wo ihr euch (Tabellen und Div Anhänger) bashen könnt...

Yan-13
2005-10-05, 22:04:21
kann mir wenigstens wer meine frage beantworten ?

Aso ich könnte das ganze auch mit ps slicen nur ich finde selber coden halt besser

Nase
2005-10-05, 22:16:54
nun is das problem das der Text in der mitte der tabelle angezeigt wird was muss ich machen damit er am oberen rand der tabelle steht ?
Beim passenden table data ein 'valign="top"' ergänzen.

Yan-13
2005-10-05, 22:30:54
@ nase thx

Yan-13
2005-10-05, 22:37:57
Naja nur funzt net ^^ valign="top" in den <table> tag ?

bei mir sieht des jetzt so aus :


<table border="1" height="900" valign="top">
<colgroup>
<col width="170">
<col width="610">

</colgroup>
<tr>
<td>Blablabla</td>
<td>Blablabla</td>

</tr>
</td>
</tr>

</table>


Is des richtig ?

Nase
2005-10-05, 22:48:52
Naja nur funzt net ^^ valign="top" in den <table> tag ?
Is des richtig ?
Nö. Hab ja auch geschrieben, dass du das in die <td>s schreiben sollst.

Yan-13
2005-10-05, 22:59:03
hm habe das prob jetzt mit <div class="tabelle" style="width: 100%; height: 100%;"> gelöst.

So nun noch ne frage ihe habt ja oben noch das layout so jetzt is die frage wie ich in die menüelemente links die links so anpasse das sie genau in die "gezeichneten" Spalten passen !!

Wie mache ich des ?

Gast
2005-10-05, 23:07:40
OMG!!!

Dann macht doch einen Bashthread auf, wo ihr euch (Tabellen und Div Anhänger) bashen könnt...
es ist doch so, das man semantisch korrekten code schreiben soll. jetzt erklär mir mal, was tabellen mit einem design zu tun haben?


So nun noch ne frage ihe habt ja oben noch das layout so jetzt is die frage wie ich in die menüelemente links die links so anpasse das sie genau in die "gezeichneten" Spalten passen !!

Wie mache ich des ?
wie ich sehe, wiederholt sich das bild vertikal 3 mal. 3 zellen die so hoch sind wie das kachelnde bild, und den text dort drin vertikal zentrieren.

huha
2005-10-05, 23:34:54
hm habe das prob jetzt mit <div class="tabelle" style="width: 100%; height: 100%;"> gelöst.


Dürfte man fragen, was das bringen soll?
Definiere doch in deiner zentralen CSS-Datei...

div.tabelle { width: 100%; height: 100%; }

...anstatt mit dem "style"-Attribut rumzufummeln. Das macht nämlich den Vorteil der Zentralisierung des Designs wieder zunichte.

-huha

Yan-13
2005-10-06, 13:02:33
@gast hm soweit ich weiß sehr viel :rolleyes:

Yan-13
2005-10-06, 13:29:49
kann denn ma wer nen code beispiel geben wie ich den link jetzt genau in die Menüspalten bekomme ?

ravage
2005-10-06, 19:59:49
http://ravage.dyndns.org/cs/index.html

bzw.

<html>
<head>

<style type="text/css"><!--
div#main {
background-image:url("cs.gif");
width:800px;
height:1200px;
margin:0 auto;
}
div.menu1 {
position:relative;
width:120px;
left:5px;
top:232px;
color:white;
}
div.menu2 {
position:relative;
width:120px;
left:5px;
top:485px;
color:white;
}

//--></style>
<title>CS ding</title>
</head>
<body>

<div id="main">
<div class="menu1">
Link 1<br>
Link 2
</div>
<div class="menu2">
Link 1<br>
Link 2
</div>
</div>

</body>
</html>

Mit Div Design, kiki einfach und ruck zuck. Mit ner Tabelle könnte ich das garnicht.... :(

/EDIT:
Alles was du über CSS wissen musst findest du hier:
http://css4you.de/index.html

/EDIT2:
Das ist nicht die ultimative Lösung sondern nur ein Hinweis darauf, wie man sowas anfangen kann. ;)

Yan-13
2005-10-06, 20:21:15
ah supi danke das hat mir geholfen

Yan-13
2005-10-06, 21:00:51
aber was bewirkt genau die Angabe width:120px; ??

Aso und nochwas bedeutet das das ich eigentlich garnet mit Tabellen arbeiten muss ?

ravage
2005-10-06, 21:23:27
width:120px;
bedeutet, dass das Feld mit den Links 120 Pixel breit ist. Ich hab einfach irgendeinen Wert genommen und nicht nachgemessen. ;)

Und ja, wenn du mit CSS und Divs arbeitest, brauchst du keine Tabellen.

Kinman
2005-10-06, 23:59:29
@gast hm soweit ich weiß sehr viel :rolleyes:

Wenns mans "gut" bzw. "richtig" löst, gar nix..
mfg Kinman

Windhalf
2005-10-07, 09:14:23
Wenn du das Layout mit PS gemacht hast, gehe ich davon aus, daß Du auch über ImageReady verfügst, gell?

Wenn dem so ist, kannst Du auch in ImageReady ein Image-Map erstellen - zumindest fürs Menü ist das recht einfach umzusetzen (im Zweifelsfall F1 für Hilfe...). Vielleicht ist das für Deine Belange der einfachste Weg. Der Code wird von ImageReady fertig generiert.

Wenn Du das erledigt hast, brauchst Du dann bloss noch einen einzelnen DIV für den Content, dessen Inhalt Du dann austauschen kannst.

Vielleicht nicht superelegant aber funktional.

Der Code von ravage sieht aber auch sehr gut aus. Wenn Du damit klarkommst würde ich empfehlen den zu nehmen.

Yan-13
2005-10-07, 13:45:51
jo mache es so wie ravage es gesagt hat !!
Könnte es zwar mit image ready machen aber ich wil lieber selber coden !

mfg Yan13