hover effekt mit bildern alles verrutscht

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

aero23

aero23 hat kostenlosen Webspace.
0:43, 24.7.2009
das font-size funzt nicht weil du ein xhtml doctype verwendest
andere tag/element">elemente funzen deshalb auch nicht (richtig)
zb beispiel müsstest du img und br tags so schreiben
```
<img src="urlblabla" />
<br />
```
also wenn deine seite nicht grade handy user ansprechen soll find ich s unnötig xhtml zu benutzen
wobei auch handys schon normale browser haben die ohne probleme mit normal html klar kommen

ja das mit js kenn ich
is sone sache mit javascript
muß jeder selber wissen ob er's benutzt
weil es von browser zu browser probleme bekommen kann
und dann muß man extrem lange browserweichen einbauen
und dann wirds auch kompliziert

ähm wie wolltest du denn das menu haben
momentan ist es fixed
das heisst es scrollt nicht mit
wenn du es relativ setzt wird es an das darüber liegende element angehängt und scrollt dann auch weg

Beitrag zuletzt geändert: 24.7.2009 0:45:50 von aero23
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
Autor dieses Themas
sessin

sessin hat kostenlosen Webspace.

0:50, 24.7.2009
also die doctype hab ich schon geändert. naja und xhtml benutze ich weil ich mir dachte wenn ichs lerne dann anständig.

das menü hätte ich gerne unten, das heißt es soll mitscrollen. wenn ich das auf relativ setze, verschiebt sich alles.
aber dazu morgen...eher gesagt heute...

i go to sleep now

gute nacht! und danke!
aero23

aero23 hat kostenlosen Webspace.
1:49, 24.7.2009
ja alles klar

also das attribut bottom gibt es so nicht
nur left und top
wird alles von links oben ausgerichtet
und dann dazu width und height

nur bei margin spacing und padding attributen gibt es bottom und right

vorher
```
#layer1 {position: fixed; 
         z-index:1; 
         left: 0px; bottom: 0px;
         width: 100%;
         background-repeat: repeat-x;}

#layer2 {position: fixed;
         left: 50px; bottom: 20px; 
         z-index:2;}

#layer3 {position: fixed;
         left: 550px; bottom: 350px;
         z-index:0;}
```
nachher
```
#layer1 {
position: relative; 
z-index:1; 
left: 0px;
top: 0px;
width: 100%;
height: 74px;
background:#000000 url(images/footer.jpg) repeat-x scroll 0 0;
}

#layer2 {
position: absolute;
left: 10px;
top: 20px; 
z-index:2;
}
```
übrigens deine footer.jpg is auch falsch
hast wieder mal .jpe zustehen
genauso wie dein
http://sessin.lima-city.de/images/evil_opt2.jpe
http://sessin.lima-city.de/images/footer.jpe

die einzelnen layer mußt du in einander verschachteln
dadurch wird das darüber liegende div zum papa und die inneren zum kind
der papa relative zum context und das kind absolute im papa
da drin ist es dann eingesperrt
```
<div id="layer1">
<div id="layer2">
blaaaaaaaah
</div>
</div>
```
auf das image im div 1 tag kannste verzichten
dann bau lieber eine tabelle rein wenn es wirklich nicht geht das er alles anzeigt
eventuell gehts auch ohne tr und td tag
ach und mach aus der id layer besser ne class
hat auch was mit prioritäten der style elemente zu tun
```
>>>css<<<

.layer1{
>>> bla inhalt von oben gilt für das tag dem es zugewiesen wurde
}
.layer1 table{
>>> gilt für alle enthaltenen table's
width;100%;
height:100%;
background:transparent;
}
.layer1 td{
>>> gilt für alle enthaltenen td's
width;100%;
height:100%;
background:transparent;
}
.layer2{
>>> bla inhalt von oben gilt für das tag dem es zugewiesen wurde
}

>>>html<<<

<div class="layer1">
<table><tr><td></td></tr></table>
<div class="layer2">
blaaaaaaaah
</div>
</div>
```
mit dem neuen doc type funktioniert das font-size element
aber das font tag das du benutzt ist mit center vergleichbar funktioniert zwar
sollte man aber nicht benutzen
warum auch immer
aber ehrlich gesagt find ich es eh besser die font im css festzulegen
~~e********l~~

9:56, 24.7.2009

aero23 schrieb:
ja alles klar

also das attribut bottom gibt es so nicht
nur left und top
wird alles von links oben ausgerichtet
und dann dazu width und height

Natürlich gibt es bottom: 0 und right: 0 bei position absolute!
Denn sonnst könnte man kein Element in eine der unteren Ecken positionieren.
aero23

aero23 hat kostenlosen Webspace.

14:44, 24.7.2009
öh.. ja stimmt
bei absolute gibet dat
ich benutz das aber nie
wurde auch erst später eingeführt

außerdem brauch man dafür die feld höhe und weite des eltern elements
weil sonst isses ja wirkungs los

Beitrag zuletzt geändert: 24.7.2009 14:48:06 von aero23
Autor dieses Themas
sessin

sessin hat kostenlosen Webspace.

22:47, 24.7.2009
so die kiddies sind alle eingesperrt

vielen dank für die tipps, ich habe sie alle befolgt. es hat auch ohne tabelle funktioniert deswegen hab ich sie weggelassen. aber das mit dem font size funktioniert wirklich nur ohne bindestrich.. mag es an firefox liegen?

was jetzt nur noch seltsam aussieht ist, das man über den footer hinaus scrollen kann. deswegen hatte ich das mit bottom versucht was allerdings keine wirkung hatte (oder gar nicht zu geben scheint). wie könnte man das anders machen?
aero23

aero23 hat kostenlosen Webspace.
1:20, 25.7.2009
das is n css attribut heisst das muss mit style gemacht
```
<a style="font-size:large;" href="url"></a>
```
muß eigentlich so funktionieren

oder so im css zb für h1 h2 und h3
```
h1,h2,h3{
font-size:large;
margin-left:5px;
margin-right:5px;
margin-top:5px;
margin-bottom:5px;
}
```
das macht alle h 1-3 tags gleich groß und die abstände auch
weil ie und firefox die sonst unterschiedlich anzeigen

ich kuck mal was mit deinem footer is

edit:

also das liegt an deinem background image im body
man kann jetzt natürlich im body overflow-x:hidden; setzen
aber sobald die inhalte über den bildschirm hinaus gehen kann man sie nicht mehr ansehen
zb dein info bild liegt bei mir schon ausserhalb des bildschirms
wie gesagt ich hab ne 1024x768 auflösung

eventuel könntest du dein banner oben auch in ein div packen wie deine menu zeile
dadurch verschiebt sich dann dein portfolio nach unten
das müßtest du dann auch relativ setzen und top kleiner machen damit es sich unter dem banner einordnet
aber dann brauch man auch nicht unbedingt den overflow im body setzen
aber eventuell im div dann dafür

wie du das mit dem conent machen willst also dem portfolio
musst du überlegen
wenn kein horizontaler scrollbalken sein soll
mußt du die auflösung der betrachter bedenken
und den inhalt dem entsprechend anordnen

du solltest auch deine hausarbeit handmade und verschiedenes in einzelne div's kapseln
das erleichtert dann auch das organisieren des gesamten inhalts

puh is ja wieder ein roman geworden

Beitrag zuletzt geändert: 25.7.2009 1:51:07 von aero23
Autor dieses Themas
sessin

sessin hat kostenlosen Webspace.

12:04, 27.7.2009
okay, habs hinbekommen. ich versuche jetzt noch die bg img an den rand anliegend zu kriegen.

vielen dank für deine mühe!

Beitrag zuletzt geändert: 27.7.2009 15:20:36 von sessin
aero23

aero23 hat kostenlosen Webspace.
0:35, 28.7.2009
hab gesehen du hast den layer0 left im minus bereich

also du kannst im body die margin:0px;
das ist dann der außen abstand vom body
der ist standartmäßig 5
dann brauchste auch kein minus left machen
und rechts der abstand verschwindet dann auch

aber ich würde auch nicht unbedingt das menu div layer 1 glaub wars in den arbeitsproben einbauen
ich würd so ungefähr vorschlagen
```
<div layer 0>
   <div arbeitsproben>
          hausarbeit  <<< könnte jeweils auch ein div sein
          handmade
          ...
   </div>
   <div menu layer 1>
   </div>
</div>
```
Autor dieses Themas
sessin

sessin hat kostenlosen Webspace.
12:49, 28.7.2009
aber wenn ich den footer aus dem div arbeitsproben rauspacke, ordnet der sich ja nicht mehr relativ zu den arbeitsproben ein
sondern ist fest oder? aber wäre schon besser wenn der sich immer in derselben höhe zu dem div befinden würde, also quasi von alleine anpasst wenn noch was dazukommt.
```
.layer1 {position: relative; 
         z-index:1; 
         left: 0px; top: 1000px;
         width: 100%; 
         height: 74px;
         background:#000000 url(images/footer.jpg) repeat-x scroll 0 0;
         margin-bottom: 0px;
         float: bottom;}

.layer2 {position: relative;
         left: 10px; top: 20px;
         z-index:2;
         margin-bottom: 0px;
         float: bottom;}
```
das mit bottom und float funktioniert sowieso nicht, war nur ein versuch.

hätte nicht gedacht dass das ausrichten so kompliziert ist

was ich mich auch noch frage warum der in der lightbox keine infos anzeigt. da stand, wenn ich infos dazuschreiben will soll ich
den title tag nehmen.. klappt aber nicht

Beitrag zuletzt geändert: 28.7.2009 12:51:13 von sessin
aero23

aero23 hat kostenlosen Webspace.
15:59, 28.7.2009
also das was du in title schreibst wird angezeigt wenn du den mousecursor kurz über das bild hälts
das nennt man auch "hint" hinweis

is eig net so kompliziert
ein beispiel
http://aero23.lima-city.de/test.html

öhm dein css müsste dann so richtig sein
```
>>>> css <<<<

body {
color:#FFFFFF;
font-family:arial;
margin:0;
overflow:hidden;
}

.layer0 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 url(images/banner.gif) repeat-x scroll 0 0;
left:0px;
top:0px;
height:100%;
width:100%;
position:absolute;
overflow:auto;
z-index:0;
}

.arbeitsproben {
left:0px;
top:0px;
padding:350px 50px 50px 25px;
position:relative;
}

.layer1 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 url(images/footer.jpg) repeat-x scroll 0 0;
left:0px;
top:0px;
height:74px;
position:relative;
z-index:1;
}

.layer2 {
left:10px;
top:20px;
position:absolute;
z-index:2;
}

>>>> html <<<<

<div class="layer0">
     <div class="arbeitsproben"></div>
     <div class="layer2">
          <div class="layer1"></div>
     </div>
</div>
```
also layer 0 ist aussen rum
und so ist dann layer 1 relativ unter arbeitsproben angeordnet
wenn du layer1 jetzt ein top zuweisst zb 5px dann ist das der abstand 5px von arbeitsproben
wenn aber arbeitsproben auch top 5px hat dann musst du bei layer1 auch 5px mehr angeben also 10px
width und height wird für die automatisch gemacht
gibst du bei den allerdings 100% an dann nimmt er die breite vom eltern element
aber rechnet leider das padding mit dazu deswegen würde sich das nach rechts aussdehnen
die ganzen problemchen kannst du in dem beispiel gut sehen
musste dir mal den code dazu ankucken

wenn du jetzt ne klasse für dein hand made machst must du den div dazu in dein arbeitsproben div rein packen
weil ist ja ein inhalt von arbeitsproben welcher das eltern element wäre
hausarbeit wäre auch wieder ein div das auch in arbeitsproben rein kommt genauso wie verschiedens
die müssen dann alle relativ sein
für die bilder links könntest du wieder ein div machen das dann zb im handmade drin steckt
dieses div könntest du dann im css so ausstatten
```
>>>> css <<<<

.linkliste{
white-space:nowrap;
}

>>>> html <<<<

<div class="arbeitsproben">
     <div class="hausarbeit">
          bla überschrift
         <div class="linkliste"> alle links von hausarbeit </div>
     </div>
     <div class="handmade">
          bla überschrift
         <div class="linkliste"> alle links von handmade </div>
     </div>
     <div class="verschiedenes">
          bla überschrift
         <div class="linkliste"> alle links von verschiedenes</div>
     </div>
</div>
```
durch die klasse linkliste wird der zeilen umbruch vollständig verhindert
müsste eig theoretisch so funzen

Autor dieses Themas

19:08, 28.7.2009

aero23 schrieb:
also das was du in title schreibst wird angezeigt wenn du den mousecursor kurz über das bild hälts
das nennt man auch "hint" hinweis

ja das war mir auch bekannt aber was meinen die hier http://www.huddletogether.com/projects/lightbox2/ ?
möchte das über dem image 1 of 8 noch was steht.

is eig net so kompliziert
ein beispiel
http://aero23.lima-city.de/test.html

ich verstehe... jetzt ist mir alles klar :biggrin:

hast du das geschrieben?

also.. ich habs mal probiert mit dem css, und auch die reihenfolge im html geändert.

a:link {text-decoration: none; color: #FFFFFF;}
a:visited {text-decoration: none; color: #FFFFFF;}
a:active {text-decoration: none; color: #FFFFFF;}
a:hover {text-decoration: none; color: #66ff33;}
a:focus {text-decoration: none; color: #FFFFFF;}

body {
color:#FFFFFF;
font-family:arial;
margin:0;
overflow:hidden;
}

.layer0 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 url(images/banner.gif) repeat-x scroll 0 0;
left:0px;
top:0px;
height:100%;
width:100%;
position:absolute;
overflow:auto;
z-index:0;
}

.arbeitsproben {
left:0px;
top:0px;
padding:350px 50px 50px 25px;
position:relative;
}

.layer1 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#000000 url(images/footer.jpg) repeat-x scroll 0 0;
left:0px;
top:0px;
height:74px;
position:relative;
z-index:1;
}

.layer2 {
left:10px;
top:20px;
position:absolute;
z-index:2;
}

p.willkommen {margin-left: 50px;}

img {opacity:1;}
img:hover {opacity:0.4;}

.write:hover {opacity:1;}
.full:hover {opacity:1;}


.write {position: relative;
        left: 20px; top: 20px;
        z-index:3;}


.navi {font-size:large;
       font-size:17px;
       margin-left:20px;
       margin-right:20px;
       margin-top:20px;
       margin-bottom:20px;}

.navtm, .navp, .navsw, .navk {font-size:large;
                        font-size:22px;
                        margin-left:20px;
                        margin-right:20px;
                        margin-top:20px;
                        margin-bottom:20px;}

allerdings hab ich mich nicht getraut das hochzuladen. die arbeitsproben scrollen dann über layer 0 und der footer schwimmt links oben, ist nur noch halb so breit und die navi sitzt drauf ^^

um ehrlich zu sein hab ich auch etwas den überblick verloren :spammer:

das hier ist mein aktueller code so wie er hochgeladen ist:

a:link {text-decoration: none; color: #FFFFFF;}
a:visited {text-decoration: none; color: #FFFFFF;}
a:active {text-decoration: none; color: #FFFFFF;}
a:hover {text-decoration: none; color: #66ff33;}
a:focus {text-decoration: none; color: #FFFFFF;}

body {background:#000000;
      color:#FFFFFF;
      font-family:arial;
      overflow-x: hidden;
      margin: 0px;}


.layer0 {position: relative; 
         z-index:0; 
         left: 0px; top: 0px;
         width: 100%; 
         height: 500px;
         background:#000000 url(images/banner.gif) repeat-x scroll 0 0;}

.arbeitsproben {margin:0;
                overflow:visible;
                padding:350px 50px 100px 25px;
                position:absolute;
                width:100%;}

.layer1 {position: relative; 
         z-index:1; 
         left: 0px; top: 1000px;
         width: 100%; 
         height: 74px;
         background:#000000 url(images/footer.jpg) repeat-x scroll 0 0;
         margin-bottom: 0px;
         float: bottom;}


.layer2 {position: relative;
         left: 10px; top: 20px;
         z-index:2;
         margin-bottom: 0px;
         float: bottom;}

p.willkommen {margin-left: 50px;}

img {opacity:1;}
img:hover {opacity:0.4;}

.write:hover {opacity:1;}
.full:hover {opacity:1;}


.write {position: relative;
        left: 20px; top: 20px;
        z-index:3;}


.navi {font-size:large;
       font-size:17px;
       margin-left:20px;
       margin-right:20px;
       margin-top:20px;
       margin-bottom:20px;}

.navtm, .navp, .navsw, .navk {font-size:large;
                        font-size:22px;
                        margin-left:20px;
                        margin-right:20px;
                        margin-top:20px;
                        margin-bottom:20px;}

was ich mich noch gefragt habe... spielt die reihenfolge in den {klammern} eigentlich auch ne rolle?

und was bedeutet das hier

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;

Beitrag zuletzt geändert: 28.7.2009 19:12:26 von sessin

simuliertes

simuliertes hat kostenlosen Webspace.

2:48, 29.7.2009

sessin schrieb:
und was bedeutet das hier

-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;

moz=mozilla=diese angaben werden nur von mozilla (zB Firefox)-Browsern interpretiert.

Mehr infos dazu:

http://www.lutz-nelde.de/Fremdscripte/CSS%204%20You/mozproperty.html
https://developer.mozilla.org/en/CSS/-moz-background-clip
https://developer.mozilla.org/en/CSS/-moz-background-inline-policy
https://developer.mozilla.org/pl/CSS/-moz-background-origin
Autor dieses Themas
sessin

sessin hat kostenlosen Webspace.

13:26, 30.7.2009
okay ich habe mal ein bisschen experimentiet. es lag an der position: habe jetzt alles auf relativ gesetzt.
ich glaube so eine mischung mit absolute und relative funktioniert nicht.
das <nobr> funktioniert jetzt auch, das heißt die linkliste brauche ich nicht unbedingt.

so langsam verstehe ich warum es wohl doch besser ist, mit tabellen zu arbeiten
ich dachte immer das wäre unübersichtilicher aber es ist sicherer glaube ich.

@simuliertes: danke für die info!
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city