Slices in Divs mit Photoshop

[sh0x]

Hallo,

habe eine Homepage gebastelt, die mittig ausgerichtet ist (1 Spalten-Layout).
Oben soll unter einem Banner ein Menü dargestellt werden, was aus einem gesliceten Foto besteht. Die mit Links versehenen Slices kann man anklicken um zur gewünschten Seite zu kommen.

Ich habe also mit Photoshop das rechteckige Foto gesliced und in eine Tabelle umwandeln lassen. Das klappt auch wunderbar.
Nur habe ich gelesen, dass Photoshop das ganze auch mit CSS-Divs beherrscht. Und Divs sollen ja zukunftssicherer und von den Ladezeiten geringer sein.

Nur mit CSS-Divs bekomme ich es nicht hin. Denn dann ist das Menü absolut ausgerichtet und nicht mehr zentriert, obwohl ich es mit PHP im "Menü-Div" includet habe.

Ich habe an der CSS-Datei bissi rumgespielt, habe aber in Sachen Positionierung noch keine Erfahrung. Ist es denn möglich das Ganze trotzdem mit Divs zu realisieren? Oder kann man mit Divs wirklich nur absolut positionieren?

Hier ein Beispiel, wie es nicht aussehen soll

 

[hela]

Hallo sh0x,

... und wie soll es aussehen? Ist das ein Puzzl?

Davon abgesehen:
Alle Images (z.B. im "menu"-Container) sind INLINE-Elemente. Sie stehen also wie Text in einer Zeile, die Zeilenhöhe richtet sich nach dem Bild mit der größten Höhe. Mit "POSITION: relative;" und anschließender "top"-, "left"-, "bottom"- oder "right"-Angabe verschiebst du sie aus dieser Position in die entsprechende Richtung. Mit "POSITION: absolute;" und anschließender "top"-, "left"-, "bottom"- oder "right"-Angabe reißt du sie aus dem Zeilenverband heraus und positionierst sie relativ zum Elternelement, sie liegen dann über den relativ positionierten Elementen.
Mit "float" bestimmt man, wie die nachfolgenden INLINE-Elemente um dieses Element herumfließen sollen.

Vielleicht hilft das für den Anfang.

 

[sh0x]

... und wie soll es aussehen? Ist das ein Puzzl?

Sorry, stimmt, nach meinen Änderungen geht garnicht mehr hervor, wie die Teilbilder sortiert werden sollen.

Ich hänge nachher mal ein Screenshot an.

Aber ist es denn möglich, die Teilslices mit CSS in die richtige Reihenfolge zu bekommen und so darzustellen, als wär es ein großes Bild?

 

[hela]

Warum nicht?
Allerdings muss man sich einen Plan machen und auch mal die Positionen berechnen. Das schreckt die meisten Leute vor CSS ab, weil sie von HTML den alten Tabellen-Automatismus gewöhnt sind.

 

[sh0x]

Hier das Bild
So soll es aussehen.

Und so sieht es aus:
KLICK MICH

Hat einer nen Tipp, wie ich das angeordnet bekomme?

 

[aTa]

machs mit tables dann hast den Stress net.

 

[hela]

Also: Ich habe deine Original-HTML-Datei erst mal stark verschlankt und die wesentlichen CSS-Eigenschaften dort mit reingeschrieben. Bei den CSS-Namen (Bilder-IDs) habe ich die Bindestriche herausgenommen, weil ich mit Sonderzeichen (Bindestrich, Unterstrich) in CSS-Namen vor einiger Zeit schlechte Erfahrungen gemacht habe. Kann aber sein, dass jetzt alle Browser auch mit solchen Namen laufen.

Die Bilder wurden als Hintergrundbilder in a-Tags verlagert, da es ja wohl ein Navigationsmenü werden soll. Die a-Tags sind als Blöcke deklariert, denen u.a. die entsprechende Bildgröße zugewiesen wird. Alle diese Blockelemente (Teilbilder) liegen ohne Positionierung im "menu"-Container untereinander, aus dieser Position müssen sie nun duch "POSITION: RELATIVE;" in die richtige Bildposition verschoben werden. Eine absolute Positionierung wäre hier nur anwendbar, wenn die übergeordneten Container ebenfalls absolut positioniert wären. Da aber der "root"-Container relativ im Body zentriert ist, kommt hier nur eine relative Positionierung in Betracht.

Dadurch, dass ursprünglich alle Teilbilder untereinander liegen, ergibt sich eine ziemlich große Höhe des "menu"-Containers bzw. des Fensters - mit overflow:hidden; wird das unterbunden.

IE6 braucht noch ein Stückchen Extra-Code, da er bei den Teilbildern 1 und 2 eine Positionierung mit Nullwerten haben will. Alle anderen Browser wollen das nicht. Ich habe zwar "gte IE 5" in die Bedingung der Browserweiche geschrieben, habe aber selbst keinen IE5 mehr um das auszuprobiren. Getestet habe ich mit IE6, Netscape 7.1, Opera 7.54 und Firefox 0.9.3. Vielleicht kannst du die Datei mal mit IE5 ansehen und hier mitteilen, ob das schrecklich aussieht.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
		 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Quelle:
http://home.wolfsburg.de/a-044983-06689-0003/jazzyca.de/
-->
<html>
<head>
<title>&middot;: jazzyca.de :&middot;</title>
 
<style type="text/css">
<!--
html, body {
height: 100%;
max-height: 100%;
background-color: #2F4F4F;
color: #B0E0E6;
text-align: center;
margin: 0;
padding: 0;
}
#root {
background-color: black;
width: 740px;
height: 100%;
margin: 5px auto;
border: 10px solid black;
text-align: justify;
}
 
#menu {
width: 740px;
height: 312px;
padding: 0;
margin: 0;
border: none;
text-align: left;
overflow: hidden;
}
#menu a {
display: block;
border: none;
color: blue;
text-decoration: none;
cursor: crosshair;
}
 
#strand01 {
width: 740px;
height: 210px;
border: none;
background-image: url(Bilder/strand_01.jpg);
}
#strand02 {
width: 330px;
height: 22px;
background-image: url(Bilder/strand_02.jpg);
}
#strand03 {
position: relative;
top: -22px;
left: 330px;
width: 147px;
height: 31px;
background-image: url(Bilder/strand_03.jpg);
}
#strand04 {
position: relative;
top: -53px;
left: 477px;
width: 29px;
height: 31px;
background-image: url(Bilder/strand_04.jpg);
}
#strand05 {
position: relative;
top: -84px;
left: 506px;
width: 64px;
height: 102px;
background-image: url(Bilder/strand_05.jpg);
}
#strand06 {
position: relative;
top: -186px;
left: 570px;
width: 33px;
height: 31px;
background-image: url(Bilder/strand_06.jpg);
}
#strand07 {
position: relative;
top: -217px;
left: 603px;
width: 57px;
height: 102px;
background-image: url(Bilder/strand_07.jpg);
}
#strand08 {
position: relative;
top: -319px;
left: 660px;
width: 36px;
height: 31px;
background-image: url(Bilder/strand_08.jpg);
}
#strand09 {
position: relative;
top: -350px;
left: 696px;
width: 44px;
height: 102px;
background-image: url(Bilder/strand_09.jpg);
}
#strand10 {
position: relative;
top: -430px;
left: 0;
width: 70px;
height: 80px;
background-image: url(Bilder/strand_10.jpg);
}
#strand11 {
position: relative;
top: -510px;
left: 70px;
width: 23px;
height: 23px;
background-image: url(Bilder/strand_11.jpg);
}
#strand12 {
position: relative;
top: -533px;
left: 93px;
width: 25px;
height: 63px;
background-image: url(Bilder/strand_12.jpg);
}
#strand13 {
position: relative;
top: -596px;
left: 118px;
width: 33px;
height: 29px;
background-image: url(Bilder/strand_13.jpg);
}
#strand14 {
position: relative;
top: -625px;
left: 151px;
width: 36px;
height: 29px;
background-image: url(Bilder/strand_14.jpg);
}
#strand15 {
position: relative;
top: -654px;
left: 187px;
width: 143px;
height: 29px;
background-image: url(Bilder/strand_15.jpg);
}
#strand16 {
position: relative;
top: -674px;
left: 330px;
width: 44px;
height: 50px;
background-image: url(Bilder/strand_16.jpg);
}
#strand17 {
position: relative;
top: -724px;
left: 374px;
width: 132px;
height: 43px;
background-image: url(Bilder/strand_17.jpg);
}
#strand18 {
position: relative;
top: -767px;
left: 570px;
width: 33px;
height: 71px;
background-image: url(Bilder/strand_18.jpg);
}
#strand19 {
position: relative;
top: -838px;
left: 660px;
width: 36px;
height: 71px;
background-image: url(Bilder/strand_19.jpg);
}
#strand20 {
position: relative;
top: -895px;
left: 70px;
width: 23px;
height: 57px;
background-image: url(Bilder/strand_20.jpg);
}
#strand21 {
position: relative;
top: -946px;
left: 118px;
width: 88px;
height: 51px;
background-image: url(Bilder/strand_21.jpg);
}
#strand22 {
position: relative;
top: -997px;
left: 206px;
width: 124px;
height: 51px;
background-image: url(Bilder/strand_22.jpg);
}
 
#strand23 {
position: relative;
top: -1025px;
left: 374px;
width: 62px;
height: 28px;
background-image: url(Bilder/strand_23.jpg);
}
#strand24 {
position: relative;
top: -1053px;
left: 436px;
width: 45px;
height: 28px;
background-image: url(Bilder/strand_24.jpg);
}
#strand25 {
position: relative;
top: -1081px;
left: 481px;
width: 25px;
height: 28px;
background-image: url(Bilder/strand_25.jpg);
}
#strand26 {
position: relative;
top: -1102px;
left: 330px;
width: 44px;
height: 21px;
background-image: url(Bilder/strand_26.jpg);
}
#strand27 {
position: relative;
top: -1119px;
left: 93px;
width: 25px;
height: 17px;
background-image: url(Bilder/strand_27.jpg);
}
 
#inhalt {
padding: 15px;
}
#inhalt p {
font: 86%/140% arial,sans-serif;
/* padding: 15px; */
}
#footer {
border-top: 1px solid gray;
padding: 20px;
}
-->
</style>
 
<!--[if gte IE 5]>
<style type="text/css">
#strand01 {
position: relative;
top: 0;
left: 0;
}
#strand02 {
position: relative;
top: 0;
left: 0;
}
</style>
<![endif]-->
 
</head>
 
<body>
<div id="root">
 
<div id="banner"><p>#banner</p></div>
 
<div id="menu">
<a id="strand01" href="#">01</a>
<a id="strand02" href="#">02</a>
<a id="strand03" href="#">03</a>
<a id="strand04" href="#">04</a>
<a id="strand05" href="#">05</a>
<a id="strand06" href="#">06</a>
<a id="strand07" href="#">07</a>
<a id="strand08" href="#">08</a>
<a id="strand09" href="#">09</a>
<a id="strand10" href="#">10</a>
<a id="strand11" href="#">11</a>
<a id="strand12" href="#">12</a>
<a id="strand13" href="#">13</a>
<a id="strand14" href="#">14</a>
<a id="strand15" href="#">15</a>
<a id="strand16" href="#">16</a>
<a id="strand17" href="#">17</a>
<a id="strand18" href="#">18</a>
<a id="strand19" href="#">19</a>
<a id="strand20" href="#">20</a>
<a id="strand21" href="#">21</a>
<a id="strand22" href="#">22</a>
<a id="strand23" href="#">23</a>
<a id="strand24" href="#">24</a>
<a id="strand25" href="#">25</a>
<a id="strand26" href="#">26</a>
<a id="strand27" href="#">27</a>
</div>
 
<div id="inhalt">
<p>#inhalt</p>
</div>
 
<div id="footer">
<p>#footer</p>
</div>
 
</div> <!-- /#root -->
 
</body>
</html>

aTa hat natürlich recht, dass man mit Tabelle hier weniger Stress hat. Die Tabelle eignet sich aber eben nur für tabellenartige Anordnungen, die Möglichkeiten mit CSS sind vielfältiger.

 

[Gumbo]

Du könntest auch einfach nur ein Hintergrundbild nehmen und die Verweise darauf positionieren. Das wäre wesentlich einfacher.

 

[sh0x]

@hela: wow, vielen Dank, dass ist der Hammer, du hast dir echt Mühe gegeben. Da ist allerdings noch ein kleines Problem: !Eine! Grafik ist immer noch nicht richtig platziert und ich habe schon alles ausprobiert. Sie steht ein paar Pixel unten über. Was könnte die Ursache dafür sein?

Hier kann mans erkennen!


@gumbo: Ich will aber, dass man die Bilder direkt anklicken kann und keinen Text davor haben. Kann man das mit deiner Methode auch realisieren?

 

[hela]

Hallo sh0x,

es ist schön, dass du wieder an CSS glaubst.

Das fehlerhafte Teilbild ist vermutlich Bild27, es sitzt beim IE wohl 2px tiefer als es wirklich positioniert ist - aber eben nur beim IE.

Das sollte dich aber nicht stören, wenn du jetzt das machst, was Gumbo geraten hat:

• aus allen IDs #strandXX die CSS-Eigenschaft "background-image: .." entfernen,
• zum ID #menu die CSS-Eigenschaft "background-image: url(Bilder/origin.jpg);" hinzufügen.

Jetzt stimmt m.E. alles wieder und Du kannst nun auch den Extra-Code für IE weglassen.