Div Overlay Problem

GFX-Sector - HTML, CSS

GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Div Overlay Problem

» Hello Guest [Login|Register]

Last Post | First Unread Post

Print Page | Recommend to a Friend | Add Thread to Favorites

HTML, CSS

Einfache Scriptsprachen und deren Layout mit HTML und CSS

Author

Post

« Previous Thread | Next Thread »

apex.

(limited)
Ohnefiltergrafiker

Registration Date: 28.01.2009
Posts: 261
Location: Amsterdam

Div Overlay Problem

werbefreies Forum?

Soo kumpel hat probleme mit div overlay grund : verständnis

er möchte halt bei myspace einfach nen bild mit den eingefügten links drüber legen

er versteht es nur nicht ganz und kann mit den tuts auch wenig anfangen

Bräuchten dringend Hilfe am besten über icq oder msn

Wäre auch cool wenn jmd einen div overlay code posten können damit er sch den mal anschauen kann

peace smile

er macht auch nen uploaded.to account locker wenn alles gefuntz hat

22.01.2010 22:29

Dariusch

Fingerwischer

Registration Date: 01.01.2010
Posts: 31

normalerweise macht man das mit z-index mit CSS
der index bestimmt die Reihenfolge der divs, genauso wie Ebenen in PS
dabei ist der kleinere Wert immer die Ebene drunter fröhlich
hoffe das hilft euch weiter
mfg Dariusch

23.01.2010 00:28

quantum

Pfadfinder

Spender

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Overlay ist mir fremd o0

Versuch es mit margin-top -xpx;
Also mit einer negativen value, dann wird das ganze nach oben verschoben.

Um deinem Kumpel besser helfen zu können müsstest du aber bitte den vorhandenen Code posten.

Falls nicht hier mal theoretisch:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

<style type="text/css">
#bild {
    width: xpx;
    height: xpx;
}
#ul {
    margin-top: höhe vom bildpx;
}
</style>
<ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
</ul>

Die Werte musst du natürlich überall ausfüllen. Wenn ich dir besser helfen soll, musst du mir code liefern Wink

23.01.2010 10:53

apex.

(limited)
Ohnefiltergrafiker

Registration Date: 28.01.2009
Posts: 261
Location: Amsterdam

Thread Starter Thread Started by apex.

er sagt wir wollen das nicht über sondern sozulagen oben drauf sprich wenn man etwas verdeckt

sprich ein buntes blatt auf ein schwarz weißes legen

also helen tut uns das nicht ^^

24.01.2010 23:53

quantum

Pfadfinder

Spender

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Würdest du bitte aufhöhren in Rätseln zu sprechen?

Zeig uns einfach das, was er irgendwo drauf gelegt haben will.
Dann kann man dir auch helfen.

25.01.2010 09:51

Steffi

Scharfzeichner

Registration Date: 21.06.2009
Posts: 131
Location: Österreich
Program: Adobe Photoshop CS5

Dariusch hat die Lösung schon präsentiert.

quote:

Original von Dariusch
normalerweise macht man das mit z-index mit CSS
der index bestimmt die Reihenfolge der divs, genauso wie Ebenen in PS
dabei ist der kleinere Wert immer die Ebene drunter fröhlich

hoffe das hilft euch weiter
mfg Dariusch

z-index:zahlwert;

-> http://www.css4you.de/z-index.html

25.01.2010 12:12

ClOuDy.

Pfadfinder

Registration Date: 31.01.2010
Posts: 566
Program: PS CS5

das funktioniert nur wenn andere divs auch einen z-index wert haben.

im css "position: realtive" mal probieren smile

06.02.2010 22:46

charizmadesign charizmadesign is a male

Fingerwischer

Registration Date: 01.02.2010
Posts: 28
Location: Marburg
Program: Adobe Creative Suite 4 Master Collection
Deviantart: charizmadesign

www.abrax.us

dort den Div Overlay-Generator benutzen. Der ist extra für Myspace Wink

edit: besser.. hier http://abrax.us/Katamari/ContentGen.php

http://myspace.com/dsqunique

This post has been edited 1 time(s), it was last edited by charizmadesign: 12.02.2010 22:36.

12.02.2010 22:36

ClOuDy.

Pfadfinder

Registration Date: 31.01.2010
Posts: 566
Program: PS CS5

augenkrebs seite.
position: relative - hilft immernoch smile

21.02.2010 13:38

apex.

(limited)
Ohnefiltergrafiker

Registration Date: 28.01.2009
Posts: 261
Location: Amsterdam

Thread Starter Thread Started by apex.

sry komme damit aber nicht weiter

also ich würde gerne so ein design haben

http://www.myspace.com/xrnbpromo

nur ich hab bisjz immernoch nicht begriffen wie man das macht also wie bindet man die links ein etc gibt es vllt jemanden der mir das über teamviewer gut erklären könnte und mir dabei bisschen hillft

Nen code würde mir vllt auch schon helfen

22.02.2010 14:36

quantum

Pfadfinder

Spender

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Das ist ja auch echt schwer, mal in den Quellcode zu schauen und dann zu merken, dass das einfach nur verlinkte Bilder sind, aber mit extrem schlechtem Markup umgesetzt …

Aber noch schwerer ist es, mal die gesandten Lösungen zu überprüfen bzw. die entsprechenden Referenzen zu prüfen um da dann BEISPIELE zu finden.

22.02.2010 16:41

apex.

(limited)
Ohnefiltergrafiker

Registration Date: 28.01.2009
Posts: 261
Location: Amsterdam

Thread Starter Thread Started by apex.

Ok hab doch noch ein proiblem und zwar wollte ich jz mal versuchen das z.b der Header mit www.google.de verlinkt ist und ich bin der totale noob großes Grinsen

<style type="text/css">
</style>
<div class=header><center><img src=http://i50.tinypic.com/2h7l6p3.png> </center></div>

width: 800;
height: 400px;
}
#ul {
margin-top: 50px;
}
</style>
<ul>
<li>www.Google.de</li>
</ul>

kann das vllt jmd korriegieren damit ich weiß wie das genau funtz bei dem bild jz

i.wie naja xD

This post has been edited 3 time(s), it was last edited by apex.: 22.02.2010 19:14.

22.02.2010 17:02

quantum

Pfadfinder

Spender

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

du musst dir unbedingt mal ein paar Grundlagen aneignen.

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:

<style type="text/css">
#header {
    margin: 0 auto;
    width: 800;
    height: 400px;
}

#ul {
    margin-top: 50px;
    position: relative; …
}
</style><!-- style ende -->

<div id="header">
    <a href="http://google.de" title="google.de" ><img src="http://i50.tinypic.com/2h7l6p3.png" alt=""></a>
</div>

ob es so denn funktioniert, kp, musst du entsprechend die Vorschläge durchgehen …

This post has been edited 1 time(s), it was last edited by quantum: 22.02.2010 23:01.

22.02.2010 23:00

ClOuDy.

Pfadfinder

Registration Date: 31.01.2010
Posts: 566
Program: PS CS5

position: relative gibts kein margin oder padding, da der container oder was auch immer ausm kontext gerissen wird.

ganz normal abstände mit top, left bestimmen.

26.02.2010 02:38

quantum

Pfadfinder

Spender

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Bevor du herum prustest, teste das mal.

Waren zwar ein, zwei fehler enthalten, geht aber.

Hier:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:

<!DOCTYPE HTML>
<html>
<head>
<title></title>
    <style type="text/css">
        #header {
            margin: 0 auto;
            width: 800px;
            height: 400px;
        }

        ul {
            margin-top: -200px;
        }
    </style><!-- style ende -->
</head>

<body>
<div id="header">
    <img src="http://i50.tinypic.com/2h7l6p3.png" alt="">
    <ul>
        <li>Link</li>
    </ul>
</div>
</body>

</html>

und für myspace:

php:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:

<style type="text/css">
#header {
       margin: 0 auto;
        width: 800px;
        height: 400px;
}

ul {
        margin-top: -200px;
}
</style><!-- style ende -->
<div id="header">
    <img src="http://i50.tinypic.com/2h7l6p3.png" alt="">
    <ul>
        <li>Link</li>
    </ul>
</div>

Achja, das margin: -200px; evtl. etwas heruntersetzen, bis es passt.

This post has been edited 1 time(s), it was last edited by quantum: 27.02.2010 13:27.

27.02.2010 13:25

GFX-Sector
unregistered

Have you enjoyed this topic?

If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.

After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.

In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.

Sign up now and enjoy the advantages as a registered member.

(This website will be ad-free after a complete free sign up.)

27.02.2010 13:25

Tree Structure | Board Structure

GFX-Sector » Coding Area » Webentwicklung » HTML, CSS » Div Overlay Problem

Similar topics to Div Overlay Problem

Thread

[Problem] Problem mit PDF-Dateien (Forum: Fragen & Probleme)

[RESOLVED] Div vertikal zentrieren (Forum: HTML, CSS)

javascript problem (Forum: Javascript & jQuery)

GIMP Problem :) (Forum: Anderes)

[Problem] Problem bei nen HP Desing (Forum: Fragen & Probleme)

Heutige TOP 10 Suchbegriffe:

Div Overlay Problem : HTML, CSS (Permalink)

Sectorbereich

Forenbereich

Battlesection