html umsetzung

[erase]

hallo,
ich bin gerade dabei ein Design in html umzusetzen. klappt auch soweit...nur jetzt frag ich mich wie ich das mit dem menue mache...
also das teile der Grafik (..die Buttons halt..) zu links werden. schneide ich jeden einzelnen Button aus und fuege ihn wieder ein?? da gibts ja bestimmt eine elegantere Loesung, oder??

danke schonmal

 

[theHacker]

Das Menü sieht ja im HTML später so aus

<ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
</ul>

Entweder die Grafik wird direkt in den Link als <img /> eingebunden oder wenn es geht mit background-image das <li>-Tag formatiert.
Stückeln muss du die Grafiken auf alle Fälle, weil die einzelnen Links ja voneinander unabhängig sein müssen.

edit:
Wenn natürlich diese Buttons alle gleich aussehen, brauchst du nur einen Button auszuschneiden und kannst den natürlich überall benutzen.

 

[erase]

wie schaffe ich es den das die Grafiken genau auf der gleichen Stelle liegen wo ich sie ausgeschnitten habe?
manchmal verschiebt sich ja etwas in nem anderem Browser oder bei anderer Aufloesung...

kannst dir die Grafik mal hier ansehen..vielleicht hilft das
https://www.shareapic.net/content.php?id=10289033&owner=erase

und hier der code den ich geschrieben habe.

body {
position: absolute;
left: 100px;
padding:0px;
}

#header {
position: absolute;
background-image: url(header.jpg);
min-width: 980px;
min-height: 255px;
}

#links {
position: absolute;
background-image: url(links.jpg);
background-repeat: no-repeat;
top: 255px;
min-width: 250px;
min-height: 940px;
}

#inhalt {
position: absolute;
background-image: url(inhalt.jpg);
background-repeat: no-repeat;
left: 216px;
top: 255px;
min-width: 600px;
min-height: 940px;
padding: 20px;
}

#rechts {
position: absolute;
background-image: url(rechts.jpg);
left: 816px;
top: 255px;
min-width: 164px;
min-height:940px;
}

ist der ok?

 

[smoker_on_line]

bei photoshop gibt es doch ne funktion die das alles für dich macht. du makierst nur die stellen die einzeln werden sollen und das programm zerschneidet alles und erstellt dir den kompletten code.

ich kenne das halt nur von photoshop (weiß aber nicht wie die funktion heist, habe es nicht mehr drauf!) aber es gibt sicherlich viele andere tools die für sowas geeignet sind. oder?

 

[theHacker]

[...] das programm zerschneidet alles und erstellt dir den kompletten code.

... den du daraufhin gleich wieder in die Mülltonne stecken kannst

Umsetzungen müssen nicht umsonst von Hand und zwar von erfahrenen Leuten gemacht werden, weil man das nicht automatisch machen lassen kann.

 

[smoker_on_line]

ich kam damit relativ gut klar. ich musste zwar etwas ändern, sodass die zerfetzten teile nicht in der tabelle waren sondern als hintergrund der tabelle angezeigt wurden aber dann war auch alles super.

 

[theHacker]

[...]sondern als hintergrund der tabelle angezeigt wurden [...]

https://www.klamm.de/forum/showthread.php?t=213493
Weitere Worte spar ich mir. Das isses nämlich ned wert.