Wie aus "Bild" hp machen?

[Yan-13]

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]

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]

Nein, aber DIVs
http://de.selfhtml.org/navigation/suche/index.htm?Suchanfrage=div
kannst mit css super positionieren
mfg Kinman

[Yan-13]

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]

in der werkzeug-leiste ist es das teil was aussieht wie ein füllfederhalter

[Kinman]

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]

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]

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]

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]

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]

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]

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]

man benutzt keine tabellen, um ein design zu realisieren!

[bArToN]

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]

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]

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]

@ nase thx

[Yan-13]

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]

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]

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]

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]

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]

@gast hm soweit ich weiß sehr viel :rolleyes:

[Yan-13]

kann denn ma wer nen code beispiel geben wie ich den link jetzt genau in die Menüspalten bekomme ?

[ravage]

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]

ah supi danke das hat mir geholfen

[Yan-13]

aber was bewirkt genau die Angabe width:120px; ??

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

[ravage]

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]

@gast hm soweit ich weiß sehr viel :rolleyes:

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

[Windhalf]

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]

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