Öppna/stänga

Jag har ett informationselement som jag vill kunna öppna och stänga enligt bifogad bild men jag får inte till bordern så som på bilden. :x

Jag skulle helst ha en lösning med lager och den måste funka i IE 6+. Någon som har lust att hjälpa mig med detta problem?

Det är alltså inte själva öppningen och stängningen som är problemet utan att få till bordern runt informationsblocket och menyn så som det ser ut på bilden.

.menu-inactive{
background: #eee;
border: 1px solid #999;
}
.menu-active{
background: #eee;
border: 1px solid #999;
border-bottom-color: #eee;
}
.menu-active .content{
background: #eee;
border: 1px solid #999;
margin-top: 1px;
}

fattar du var jag vill åstadkomma?

mv icaaq

Du kanske får lajja lite med z-index så att du får .menu-active att ligga över .content.....

mv icaaq

Jag hänger inte riktigt med på vad du vill. Det kan nog vara så att du missuppfattar mig för jag ser att mitt exempel är lätt att missuppfatta. Kolla om den här bilden är lättare att förstå.

Det enda som skall hända är alltså att rutan med information skall visas/döljas när man klickar på knappen. Detta i sig är ju inget svårt. Det svåra är att få kantlinjerna att ligga som de gör på bilden.

stängd: då har du samma ramfärg runt hela.

öppen: då sätter du bakgrundsfärgen på border-bottom och positionerar upp "information" 1px med margin-top: -1px;

på "information" har du samma ramfärg och bakgrundsfärg runt hela.

blev det klarare?

mv icaaq

Den idén är jag med på. Men jag kan inte få ramen runt "Static content" att gå hela vägen ut till högerkanten.

Web-Tor skrev:

Den idén är jag med på. Men jag kan inte få ramen runt "Static content" att gå hela vägen ut till högerkanten.

Fast det är ramen på informationsfältet som går hela vägen ut till höger