| von hannaham |
hi thomas!
vorerstmals merry xmas! 
ich versuch jetzt wirklich mal die seite div-only zu gestalten, kann mir vorstellen, dass
ich mir da einigen ärger erspare.
das mit dem milchglaseffekt hab ich auch probiert, also bei mir funktionierts nicht, aber ich probier mal noch ein bisschen rum.
also dann
glg hanna |
| von Thomas |
Hi Hanna,
ich kann mir deine Schwierigkeiten vorstellen. So ein Mix aus Layouttabellen und Ebenen ist ziemlich fehlerträchtig, denn jeder Browser interpretiert die Positionsangaben anders.
Ich habe ziemlich gute Erfahrungen mit "DIV only" Layouts gamacht. Vorteil hierbei, ist das DIV an sich kaum Vorformatierungen hat, welche du per CSS Statement überschreiben müsstest. Ich könnte mir vorstellen mit ein bißchen Nachlesen und Handarbeit, ließe sich auch deine Seite nachbilden. Ich kanns dir nur empfehlen.
Von DW und diversen Extensions halte ich bei solchen "kleinen" Sites nicht viel. Da bleibe ich lieber mit der Hand am Code und klopfe das bißchen CSS selber rein.
Den Milchglaseffekt kannst du evtl. etwas einweichen, wenn du deinen gif Hintergrund mit 92 dpi erstellst, anstatt mit 72 dpi. Ist aber nur eine Vermutzung meinerseits. Ich habs nicht ausprobiert. Ansonsten habe ich noch eine Idee - die ich aber erst verrate, wenn die andere Lösung nicht besser ist.
Grüße
Thomas |
| von hannaham |
hi!
danke für die ausführlichen beschreibungen! hab jetzt mal alles durchprobiert:
@thomas: hab alles erledigt, nur mit der relativen positionierung, da komm ich noch nicht so hin, hab mir mal die extension snap layer von p7 runtergeladen, aber da kann ich nur bezogen auf ein image positionieren, das passt dann bei verkleinerung bildschirm zwar vertikal, aber halt nicht horizontal, kann ich da bei css, einfach statt absolute relative und prozente eingeben um das zu beheben?
achso der milchglaseffekt: funktioniert, doch ist es eher kantig, nicht so ein weicher übergang, aber trotzdem danke für den tipp!
@c3o: hab deine variante auch probiert, nur komm ich eben mit der positionierung der layer noch nicht so klar, aber wenn das passt müsste das ja funktionieren! dir auch danke!
also dann lg hanna
|
| von c3o |
Ja es gibt eine Möglichkeit die Schrift nicht transparenz zu machen: Einfach 2 <div>s, eines für den Hintergrund und eins für die Schrift.
Im HTML so, statt deinem <div id="profile"...>....</div>
1:
2:
3:
4:
5:
6:
7: |
<div id="textbox"></div>
<div id="textinhalt" class="text">
<p class="ubtextgr">::news::</p>
{ u.s.w. }
</div>
|
und oben im CSS-Teil so, statt deinem <style...>..#profile { ... </style> (oder wohl besser stattdessen in style.css)
1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24: |
<style type="text/css">
#textbox {
position:absolute;
left: 168px; top: 162px;
width:288px; height:335px;
z-index:1;
background-color:white;
filter: Alpha(Opacity=60); /* ie */
-moz-opacity:0.6; /* mozi */
-khtml-opacity:0.6; /* safari/konqueror */
opacity:0.6; /* css3 */
}
#textinhalt {
position:absolute;
left: 168px; top: 162px;
width:288px; height:335px;
z-index:2;
overflow: auto;
padding:10px;
}
</style>
|
|
| von Thomas |
Hi Hanna,
sehr schöne Website. (Dreamweaver lässt Grüßen )
Nur ein paar Kleinigkeiten:
1. Den Schriftzug im Banner (Hanna) werden die meisten Besucher als Logo interpretieren. Dann wäre es sinnvoll ihn mit der Startseite zu verlinken.
2. Die Ebenen "profile" und "sponsoren" sind per CSS absolut positioniert. Dies wird dem Surfer zum Verhängnis, sobald sein Bildschrimausschnitt in der Breite verkleinert wird. Effekt: Die beiden Ebenen verschieben sich nach links und sind damit außerhalb der Hintergrund Tabelle.
Tipp: Arbeite mit relativen Positionsangaben und Platziere die Ebenen innherhalb der Tabelle.
3. In "profile" ist der Text bündig mit dem Rahmen der Ebene -> besser lesbar und imho stilvoller wäre das Ganze, wenn du hier noch ein padding von 3 - 7 pixel definieren würdest.
4. Fotos sind unter "Photos" noch keine hinterlegt, oder? Der # Link lässt mal drauf schließen.
5. Deinen "Milchglaseffekt", der nicht die Schrift transparent macht, würde ich so machen:
A | Photosohp
1. In Photoshop ein neues Bild erstellen: Größe 2x2 px, Hintergrund transparent
2. Das Pixel links oben und das rechts unten weiß färben (Maske drauf und füllen)
3. Das ganze als "bgProfile.gif" abspeichern. (Gif MIT Transparenz, logisch)
B | Dreamweaver
1. style.css öffnen und #profile folgende Eigenschaft hinzufügen:
1: | backgrond-image: url(images/bgProflie.gif); |
C| Fertig.
Und... Nimm ScrewDriver nicht ernst. Diesen Trottel halten wir uns hier als Forenmaskottchen um die Beiträge mit unqualifiziertem Gesülze aufzufüllen, falls grade keiner Zeit hat, der wirklich Ahnung von Webdesign hat.
Schöne Grüße aus Deutschland,
Thomas |
|
