Avatar billede walkie84 Nybegynder
30. marts 2009 - 22:13 Der er 10 kommentarer og
1 løsning

Problem med DIV placering

Hej eksperter,

Jeg har nogle problemer med at få en div boks til at placere sig rigtigt, og håber at en af jer kan hjælpe.

Venligst se dette billede --> http://www.jaded.dk/exp_img.jpg
I det tomme rum, som så flot er markeret med orange, skal jeg have en høj boks der udfylder det (med samme margen som de 3 andre bokse).


Herunder er koden til hvordan de 3 bokse er indsat:

De er alle inde i denne DIV:

div#boxe2 {
  background-image: url("images/bg.png");
  margin: 0px;
  padding: 5px 10px 5px 20px;
  width:624px;  color: white;
  font-family: arial, verdana;
  font-size: 12px;
}


Den brede boks:

.inder3 {
  background-color: #1c1c1c;
  width: 605px;
  margin: 0;
  padding: 5px 5px 5px 4px;
}

De 2 smalle:

.inder3b {
  background-color: #1c1c1c;
  width: 400px;
  margin: 0;
  padding: 5px 5px 5px 4px;
}


Hvis jeg mangler at skrive noget info, så sig endelig til :)

På forhånd tak,
Morten
Avatar billede mall Nybegynder
31. marts 2009 - 00:39 #1
Lav en div omkring dine "inder3b".
Set denne til float left..
Og lav bagefter endnu en div og lav den til float left. Så hopper den op ved siden af..

HTML:
<div id="boxe2">
<div class="inder3"></div>
<div class="wrap"></div>
<div class="inder3b"></div>
<div class="inder3b"></div>
</div>
<div class="right"></div>
</div>
Avatar billede walkie84 Nybegynder
31. marts 2009 - 14:50 #2
Hej Mall,

Nu har jeg prøvet og smide nedenstående i min css fil:

.inderwrap {
  float: left;
}

.inder3c {
  float: left;
  background-color: #1c1c1c;
  width: 180px;
  padding: 5px 5px 5px 4px;
}

og tilføjet <div class="inderwrap"> rundt om de 2 første div blokke.

<div id="boxe2">
  <div class="inder3"></div>
  <div class="inderwrap">
    <div class="inder3b"></div>
    <div class="inder3b"></div>
  </div>
  <div class="inder3c"></div>
</div>


Den nye div (inder3c) kommer nu op det rigtige sted, men tilgengæld er baggrundsbilledet (bg.png) fjernet - se billed herunder.

http://img25.imageshack.us/img25/4752/exppic2.jpg

Venligst
Morten
Avatar billede mall Nybegynder
31. marts 2009 - 15:22 #3
Kan du ikke smide det på nettet så man kan se det live?
Kan ikke lige gennemskue hvad fejlen skulle være. Ud over at bg.png bliver linket forkert til..
Avatar billede walkie84 Nybegynder
31. marts 2009 - 15:29 #4
Tak for svaret :-)

Du kan se at bg.png bliver brugt i DIV.inder3 - det er det billede der giver kanten af hjemmesiden, og du kan se på billedet at det stopper der hvor DIV.inder3b starter.

Jeg har desværre ikke lov til at give linket til hjemmesiden, hvilket jeg beklager!
Avatar billede walkie84 Nybegynder
31. marts 2009 - 21:17 #5
Hej igen Mall,

Nu har jeg så alligevel fået adgang til at ligge et eksempel ud på nettet.

Sådan skal det helst se ud (og så med en div boks i "hullet" til højre for nyhed 2 og 3):
http://www.tristram.dk/test2.php
http://www.tristram.dk/test2.css

Sådan her ser det ud når jeg prøver det du foreslår (efter mine evner hehe):
http://www.tristram.dk/test.php
http://www.tristram.dk/test.css

Venlig hilsen
Morten
Avatar billede walkie84 Nybegynder
01. april 2009 - 09:46 #6
Hmm,

Efter nærmere undersøgelse virker det vidst i IE7, men ikke IE8 og FF.

Any ideas?
Avatar billede mall Nybegynder
01. april 2009 - 10:06 #7
Prøv at tilføje height:auto; til dine inder3b & inder3c
Avatar billede walkie84 Nybegynder
01. april 2009 - 10:50 #8
Hej mall,

Det er stadig samme problem desværre :)

http://www.tristram.dk/test.php
http://www.tristram.dk/test.css
Avatar billede walkie84 Nybegynder
02. april 2009 - 00:59 #9
Så fik jeg det selv til at virke med nedenstående:

div#boxe2 {
  background-image: url("images/bg.png");
  margin: 0px;
  padding: 5px 10px 5px 20px;
  width:624px;
  color: white;
  font-family: arial, verdana;
  font-size: 12px;
}

.inder3 {
  background-color: #1c1c1c;
  width: 605px;
  margin: 0;
  padding: 5px 5px 5px 4px;
}

.inder3b {
  float: left;
  background-color: #1c1c1c;
  width: 400px;
  margin: 0;
  padding: 5px 5px 5px 4px;
}

.inder3c {
  display: inline;
  float: left;
  background-color: #1c1c1c;
  width: 190px;
  margin-left: 5px;
  padding: 5px 5px 5px 4px;
}


Tusind tak fordi du prøvede mall.
Avatar billede walkie84 Nybegynder
02. april 2009 - 01:01 #10
Skriv et svar og du får 50 point mall :)
Avatar billede walkie84 Nybegynder
03. april 2009 - 15:50 #11
Du får lige et par dage mere..
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
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

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