[CSS] Image voor tabel - Softwareontwikkeling

dinsdag 27 november 2007 17:16

Acties:

Topicstarter

Ik zit hier met een logo dat ik graag voor de tabel wil hebben, ipv erachter.
In de Stylesheet heb ik dit gedaan met de volgende code±

code:

#logo { 
    position: absolute;
    left: 0;
    top: 90px;
    width: 106px;
    height: 101px;
}

Alleen nu komt het logo achter de tabel,. ipv eroverheen. Hoe kan ik dit het beste oplossen? Zonder een layer aan te maken. En zonder problemen te krijgen met de verschillende afmetingen in browsers, waardoor de layout gaat schuiven?

dinsdag 27 november 2007 17:18

Acties:

BtM909

Watch out Guys...

Als je absoluut positioneert, wat is je html source volgorde?

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 27 november 2007 17:21

Acties:

XippIX

Topicstarter

BtM909 schreef op dinsdag 27 november 2007 @ 17:18:
Als je absoluut positioneert, wat is je html source volgorde?

hoe bedoel je dit?

in de body, dan volgorde: a href, img scrc, alt, image, width, height

dinsdag 27 november 2007 18:58

Acties:

_Thanatos_

Ja, en kaal

Spelen met z-index.

Maar hoe bedoel je "de tabel"? Niet iedere pagina heeft een tabel toch?

日本！🎌

dinsdag 27 november 2007 19:04

Acties:

Mei

Geef eens wat code. Waarschijnlijk moet je gewoon met Z-index spelen (of je boel gewoon zo positioneren dat je logo er voor komt, lijkt me nogal raar om iets over een tabel heen te zetten), maar zonder code kunnen we niks met zekerheid zeggen.

dinsdag 27 november 2007 19:09

Acties:

XippIX

Topicstarter

nee, maar ik heb gewoon een pagina met tabellen. Het probleem is denk ik, dat als ik met een z-index ga werken, de hele layout in verschillende resoluties gaat flippen. of klopt dit niet?

dinsdag 27 november 2007 19:11

Acties:

XippIX

Topicstarter

Hierbij een stuk code

code:

<body id="body <?php if($is_front) {print 'home';} else {print 'second';} ?>">
<div id="page">
    <div id="wrapper">
        <div id="header">
            <div id="logo">
                <?php echo "<a href=\"http://www.url.nl\"><img src=\"http://www.url.nl/images/logo.jpg\" alt=\"image\" width=\"106\" height=\"101\"></a>"; ?>
            </div>

[ Voor 0% gewijzigd door XippIX op 27-11-2007 19:12 . Reden: kom er net achter dat ik beter de EDIT knop kon gebruiken. Excuse O+ ]

dinsdag 27 november 2007 19:14

Acties:

Mei

Hmm, kan je de pagina zelf misschien laten zien? Hebben we gelijk alle code, plus dat we zien wat het probleem is.

woensdag 28 november 2007 09:26

Acties:

BtM909

Watch out Guys...

XippIX schreef op dinsdag 27 november 2007 @ 17:21:
[...]

hoe bedoel je dit?

in de body, dan volgorde: a href, img scrc, alt, image, width, height

Als je twee elementen absoluut positioneert en niet de z-index instelt, dan bepaald de volgorde in je HTML source de z-index

Als je het dus over twee elementen over elkaar hebt, in welke volgorde staan die elementen dan?

[ Voor 13% gewijzigd door BtM909 op 28-11-2007 09:29 ]

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

woensdag 28 november 2007 09:33

Acties:

Verwijderd

jep z-index zou het moeten doen, maar let op het geeft nog wel eens wat problemen in IE7 vaak moet je dan de volgorde van je elementen omdraaien (in je code)

Succes

woensdag 28 november 2007 16:19

Acties:

XippIX

Topicstarter

Verwijderd schreef op woensdag 28 november 2007 @ 09:33:
jep z-index zou het moeten doen, maar let op het geeft nog wel eens wat problemen in IE7 vaak moet je dan de volgorde van je elementen omdraaien (in je code)

Succes

Klopt, het werkt nu wel in Firefox, alleen weer niet in IE7.
Wat een gedoe.

Ik heb nu de volgende code:

code:

#logo { 
    z-index : 1;
    position: absolute;
    left: 0;
    top: 90px;
    width: 106px;
    height: 101px;
}

Hoe kan het nu opeens niet zichtbaar zijn? In firefox zie ik het logo, maar in IE toont ie hem niet

donderdag 29 november 2007 15:50

Acties:

XippIX

Topicstarter

iemand een idee?

vrijdag 30 november 2007 10:45

Acties:

Verwijderd

Wat is de z-index van je header ?
Verder zet ik z-index altijd achteraan in mijn css, maar ik weet niet of dat van invloed is.:)

vrijdag 30 november 2007 10:55

Acties:

BtM909

Watch out Guys...

Geef daan even een kleine opzet wat we kunnen testen

Verwijderd schreef op vrijdag 30 november 2007 @ 10:45:
Wat is de z-index van je header ?
Verder zet ik z-index altijd achteraan in mijn css, maar ik weet niet of dat van invloed is.:)

Volgorde in je CSS attributen is niet van invloed. De volgorde van CSS styling (elementen, classes, id's, etc.) weer wel

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

vrijdag 30 november 2007 11:06

Acties:

XippIX

Topicstarter

de header heeft geen z-index. Ik heb alleen het logo een z-index gegeven.
Het lukt namelijk wel in firefox, alleen IE doet hier nogal moeilijk over.

Als ik de z-index onderaan plaats:

code:

#logo {    
    position: absolute;
    left: 0;
    top: 90px;
    width: 106px;
    height: 101px;
    z-index : 1;
}

maakt dit echter geen verschil

vrijdag 30 november 2007 11:12

Acties:

Verwijderd

Ik denk dat we ook je #header, #page en #wrapper style nodig hebben om er iets zinnigs over te zeggen.
Omdat je #logo door deze divs omsloten wordt.

vrijdag 30 november 2007 11:42

Acties:

Mei

Kan je niet gewoon even een linkje naar de hele pagina geven? Kunnen we gewoon alle code zien die we moeten zien.

vrijdag 30 november 2007 11:46

Acties:

disjfa

Is dat niet gewoon de zindex bug van IE. Gewoon de elementen even omdraaien, dus eerst onderste element in je html neerzetten. Dan die ander erboven.

disjfa - disj·fa (meneer)
disjfa.nl

vrijdag 7 december 2007 15:42

Acties:

XippIX

Topicstarter

disjfa schreef op vrijdag 30 november 2007 @ 11:46:
Is dat niet gewoon de zindex bug van IE. Gewoon de elementen even omdraaien, dus eerst onderste element in je html neerzetten. Dan die ander erboven.

wat bedoel je hiermee? snap het niet helemaal. Kom er niet helemaal uit.

voor MEI:

code:

<body id="body home">
<div id="page">
    <div id="wrapper">
        <div id="header">
            <div id="logo">
                <a href="http://www.url.nl"><img src="http://www.url.nl/images/logo.gif" alt="image" width="" height=""></a>            </div>
            <div id="top_menu"><div class="block block-user" id="block-user-1">
  <div class="blockinner">
    <h2 class="title">  </h2>
    <div class="content">

vrijdag 7 december 2007 19:29

Acties:

XippIX

Topicstarter

hoop dat dit hierboven genoeg informatie geeft, helaas kan ik de site niet helemaal geven, dit omdat hij nog in ontwikkeling is.

dinsdag 11 december 2007 19:16

Acties:

XippIX

Topicstarter

nogmaals een kickje , misschien weet iemand de oplossing?
heb hierboven de source bijgevoegd

woensdag 12 december 2007 10:53

Acties:

TeeDee

CQB 241

Nee, dat is niet de volledige source. Maak anders een testcase, gestript van alle andere zaken met het probleem daarin verwerkt.

Alleen wat code vanaf <body> en 1 simpele CSS declaratie kan niemand wat mee.

Heart..pumps blood.Has nothing to do with emotion! Bored

woensdag 12 december 2007 11:32

Acties:

Cartman!

Maak gewoon even een losse pagina waarin het probleem voorkomt want dit schiet natuurlijk niet op zo en dan kan niemand je helpen.

woensdag 12 december 2007 23:02

Acties:

TheLemon

daddy cool, crazy like a fool

Ik zie in dat kleine stukje code al een hoop niet afgesloten div-tags. Ook zie ik een id met een spatie erin, dat gaat volgens mij ook niet werken.
Het is me nog niet duidelijk wat er dan onder het logo moet komen, is dat die top_menu? Wat men al een paar keer probeert te zeggen is dat je het element dat bovenop moet komen als laatste in de HTML moet zetten. Ik zou al die div's ook niet nesten als je toch absoluut positioneert, dat is niet nodig dan.
Dus: eerst zorgen dat je je HTML op orde hebt, elementen alleen nesten als ze daadwerkelijk binnen een ander element vallen en ze ook goed afsluiten. Zorgen dat de bovenste overlappende elementen later genoemd worden dan onderliggende elementen.
Z-index werkt alleen goed t.o.v. andere elementen waarvan de Z-index gespecificeerd is, maar is misschien niet nodig.

vrijdag 14 december 2007 14:48

Acties:

XippIX

Topicstarter

oke, even wat nadere uitleg en een voorbeeld op een testsite.
Ik gebruik de cms drupal (drupal.org)

Ik heb even een testsite gemaakt, omdat ik lokaal werk vandaar.

hieronder kun je een voorbeeld zien. Het logo is wel goed getoond in firefox, maar in een browser als IE zie je niets. En is het paarse blokje niet zichtbaar. (heb even een blokje genomen als afmeting van het logo)

Hieronder de url

Hier voor een voorbeeld

vrijdag 14 december 2007 16:40

Acties:

TeeDee

CQB 241

width / height weghalen (of de waardes invullen natuurlijk) in je html bij de afbeelding.

Snap ook niet waarom je dat er bij zet.

Verwijderd schreef op vrijdag 14 december 2007 @ 16:42:
veel heb je er niet aan, maar handig om te weten dat opera hem ook nog niet pakt.

Ik zie in Opera een prachtig paars blokje. Alleen IE7 niet.

Ik ga er even van uit dat het de bedoeling is om het paarse blokje te tonen.
Fx 2, IE7 en Opera tonen bij mij een paars blokje als je width/height weghaalt of de waardes invult.

[ Voor 105% gewijzigd door TeeDee op 14-12-2007 16:45 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

vrijdag 14 december 2007 16:42

Acties:

Verwijderd

veel heb je er niet aan, maar handig om te weten dat opera hem ook nog niet pakt.

maandag 17 december 2007 11:27

Acties:

TeeDee

CQB 241

* TeeDee vraagt zich af de aangedragen oplossing voor XippIX geholpen heeft.

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 22 januari 2008 12:47

Acties:

XippIX

Topicstarter

TeeDee schreef op maandag 17 december 2007 @ 11:27:
* TeeDee vraagt zich af de aangedragen oplossing voor XippIX geholpen heeft.

TeeDee heeft helemaal gelijk gehad, en XippiX is zeer blij dat TeeDee hem geholpen heeft! Ideaal! en bedankt nogmaals! wel vreemd dat door een height en width niet mee te geven het probleem verholpen is. Dacht dat dit altijd wel moest gebeuren?

dinsdag 22 januari 2008 12:52

Acties:

TeeDee

CQB 241

Het kan, maar dan moet je ook daadwerkelijk waardes invoeren. Heb alleen niet getest of je dan hetzelfde resultaat behoudt.

leuk dat je nog even een reactie neerzet.

Verder heb je als CSS:

Cascading Stylesheet:

#logo { 
    position: absolute;
    left: 20px;
    top: 20px;
    width: 106px;
    height: 101px;
    z-index : 1 ;
}

Terwijl de afbeelding 112x93 px. is. IE zal waarschijnlijk een render probleem hebben daarmee.

[ Voor 40% gewijzigd door TeeDee op 22-01-2008 12:54 ]

Heart..pumps blood.Has nothing to do with emotion! Bored

dinsdag 22 januari 2008 14:03

Acties:

XippIX

Topicstarter

op deze manier werkt het nu

dus ben allang blij dat ik er verder ook geen gedoe meer mee heb.
vind het toch altijd lastig werken met die z-index etc. Je hebt er altijd een hoop gedoe mee.

Iig nogmaals bedankt voor je antwoord en duidelijkheid! $_/-\o_$ $_/-\o_$

Pagina: 1

Reageer