Avatar billede artico Novice
07. maj 2016 - 13:43 Der er 9 kommentarer og
1 løsning

DIV uden overlap

Heisa... Jeg vil gerne have class="active" til altid at være i venstre top hjørne af container.

Og class="boxe" skal flyde rundt om class="active".. men jeg kan ikke rigtigt få det til at virke, jeg har følgende:

    <div class="container">
<div class="active boxe" >1 tester</div>
<div class="boxe" >2 tester</div>
<div class="boxe" >3 tester</div>
<div class="boxe" >4 tester</div>
<div class="boxe" >5 tester</div>
<div class="boxe" >6 tester</div>
<div class="boxe" >7 tester</div>
<div class="boxe" >8 tester</div>
<div class="boxe" >9 tester</div>
<div class="boxe" >10 tester</div>

</div>

<style>
.container {
  width: 95%;
  margin: 0px auto 0px auto
}

.boxe{
  width: 95px;
  height: 95px;
  cursor: pointer;
  background-color: #333;
  overflow: auto;
  margin: 5px;
  border: #666 solid 1px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  float: left;
}

.active {
position: fixed;
display: block;
  z-index: 100;
  opacity: 0.6;
  width: 310px;
  height: 310px;
  text-align: center;
  font-size: 18px;
  background-color: blue;
}
</style>
<script>
  $('.container .boxe').click(function(){
  $('.boxe').removeClass('active');
  $(this).addClass('active');
  });
</script>

Er der nogle bud ...
Avatar billede jakobdo Ekspert
07. maj 2016 - 15:15 #1
Din kode virker da ikke så langt fra.
Prøvede med denne: https://jsfiddle.net/L2w26b74/
Avatar billede artico Novice
07. maj 2016 - 15:38 #2
Enig, men ideen er at ved klik på class="active", så bliver active´s width og heigt="150" og de andre ikke "active skal flyde på højre side, og under class="active" .. og det er det jeg ikke kan få til at fungere :-(
Avatar billede jakobdo Ekspert
07. maj 2016 - 21:28 #3
Avatar billede jakobdo Ekspert
07. maj 2016 - 21:29 #4
Og det virker så ikke, øv. :(
Avatar billede artico Novice
07. maj 2016 - 22:45 #5
Det er også der jeg er kommet til... Den skulle gerne blive hængende oppe i øverste venstre hjørne.... :-)
Avatar billede intenz Novice
12. maj 2016 - 15:02 #6
Du kan løse det sådan her:
https://jsfiddle.net/ch9zd3Ly/
Avatar billede intenz Novice
12. maj 2016 - 15:06 #7
Hov, den linkede vist forkert. Det var denne url:
https://jsfiddle.net/ch9zd3Ly/1/
Avatar billede intenz Novice
12. maj 2016 - 15:11 #8
Havde ikke lige set at de skulle 'flyde rundt om' (min opløsning er vist for høj).
Men det kan lade sig gøre sådan her:
https://jsfiddle.net/5rfqjxnv/1/

Det er stadig lidt 'css tricks' men det bliver det jo når man vil lave sådan noget.
Avatar billede artico Novice
12. maj 2016 - 17:09 #9
SUPER !! Det kan jeg sagtens bruge til noget. Lidt justering i css og det virker fint for mig, mange tak for hjælpen!.. send et svar
Avatar billede intenz Novice
13. maj 2016 - 11:07 #10
Kommer her :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester