CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

coldasice Nybegynder

31. marts 2009 - 13:14 Der er 15 kommentarer og
1 løsning

Problem med layout i 2 forskellige Divs og forskellige browsere...

Hej alle.

Jeg er ved at lave en hjemmeside til et fodboldhold. Er stødt ind i et problem som jeg efterhånden har brugt en del tid på.

I min main div, har jeg 2 divs (leftdiv & rightdiv). Disse indeholder hver en div, der styrer indryk (leftbox & rightbox).

I den ventre box ligger der 3 .swf filer og i den højre box ligger der 3 .jpeg filer.

Jeg har prøvet et utal af løsninger for at få disse elementer til at ligge ensartet på begge sider, men ligemeget hva' jeg har gjort er det ikke lykkedes.

Ligenu ligger .swf filerne til venstre i en table og .jpeg filerne har vspace og hspace attributter...

Alle løsninger (tables, padding, border, vspace/hspace) jeg har afprøvet har set forskellige ud i forskellige browsere.

Designet på siden er bygget op af firkanter på 114 x 130px med 10px mellemrum (9px i højre og venstre kant).

009px 114px 010px ... 010px 114px 009px

Nogen der kan hjælpe mig på vej med en løsning ?

HP: http://www.maskinen2002.dk/temp/

CSS:

body {
color: #FFFFFF;
background-color: #000000;
}

#top {
height: 150px;
width: 1000px;
margin-right: auto;
margin-left: auto;
border: none;
position: relative;
background-color: #ffffff;
margin-bottom:2px;
}

#menu {
margin-right: auto;
margin-left: auto;
height: 31px;
width: 1000px;
position: relative;
border: none;
background-color: #ffffff;
margin-bottom:2px;

}

#main {
height: 430px;
width: 1000px;
margin-right: auto;
margin-left: auto;
position: relative;
border: none;
background-color: #ffffff;
margin-bottom:2px;
}

#leftdiv {
width: 500px;
background-color: #ffffff;
float:left;
}

#leftbox {
padding-right:5px;
padding-left:4px;
padding-bottom:5px;
padding-top:5px;
}

#rightdiv {
height: 430px;
width: 500px;
float:left;
}

#rightbox {
padding-right:5px;
padding-left:0px;
padding-bottom:5px;
padding-top:5px;
}

#bottom {
height: 31px;
width: 1000px;
margin-right: auto;
margin-left: auto;
position: relative;
border: none;
text-align: center;
background-color: #ffffff;
}

Synes godt om

coldasice Nybegynder

31. marts 2009 - 13:33 #1

rettelse:

#rightbox {
padding-right:4px;
padding-left:0px;
padding-bottom:5px;
padding-top:5px;
}

Synes godt om

nut Nybegynder

31. marts 2009 - 13:38 #2

hvis jeg stod i sådan et problem, så ville jeg se på dette link, hvis du altså ikke har været der inde og kigge, det ved jeg jo ikke.

her kommer linket: http://www.html.dk/tutorials/html/

håber at det kan hjælpe.

Synes godt om

olebole Juniormester

31. marts 2009 - 14:24 #3

<ole>

Den eneste grund til at gå på html.dk skulle være at forvisse sig om, de ikke aner en kæft om det, de skriver om! Der er få sites, der er så konsekvent proppet med fejl, mangler og misforståelser. Meeeeen, jeg har da hørt om folk, det faktisk er lykkedes at finde huller mellem fejlene ;o)

coldasice >> begynd med at lave koden nøjagtig ens i de to divs - dvs, at du bør have en tabel begge steder, hvis du insisterer på at have det i det ene div. Når du har gjort det, tager vi den derfra =)

/mvh
</bole>

Synes godt om

olebole Juniormester

31. marts 2009 - 14:29 #4

- men i øvrigt har enheder på HTML-attributter aldrig været valide:
<img src="images/box.jpg" width="486" height="130" hspace="5" vspace="5" />

Synes godt om

coldasice Nybegynder

31. marts 2009 - 14:30 #5

Ville egentlig gerne undgå den tabel... Jeg prøver lige at lave dem ens.

Synes godt om

coldasice Nybegynder

31. marts 2009 - 15:26 #6

Nu har jeg fjernet tabellen og smidt en 5px border på alle elementer, der ligger i de 2 divs.

http://www.maskinen2002.dk/temp/

Synes godt om

olebole Juniormester

31. marts 2009 - 15:34 #7

Border er ikke en god idé, da det ikke funker som forventet på object elementer

Synes godt om

olebole Juniormester

31. marts 2009 - 15:34 #8

- men derudover ser det jo fint ud =)

Synes godt om

coldasice Nybegynder

31. marts 2009 - 15:37 #9

Har du en idé til hvordan jeg løser det ?
vil gerne ha' en 5px ramme på alle elementer...

Synes godt om

olebole Juniormester

31. marts 2009 - 15:52 #10

Du skal vel have hver af dem ind i et element, du kan give border - f.eks. et span

Synes godt om

coldasice Nybegynder

01. april 2009 - 13:05 #11

Hmmm, nu har jeg læst en del og kan stadig ikke få det til at virke...

Kan ikke rigtig finde ud af hvor det span skal ind.

---------------------------------------------------

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="486" height="130" id="FlashID" title="naeste kamp">
<param name="movie" value="flashfiles/nextmatch.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object data="flashfiles/nextmatch.swf" type="application/x-shockwave-flash" width="486" height="130">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>

</object>

</object>
-----------------------------------------------------

Synes godt om

olebole Juniormester

01. april 2009 - 13:25 #12

Nu er det en ret 'alternativ' Flash-kode, du har kørende, men du bør vel kunne gøre noget à la:

<span>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="486" height="130" id="FlashID" title="naeste kamp">
<param name="movie" value="flashfiles/nextmatch.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object data="flashfiles/nextmatch.swf" type="application/x-shockwave-flash" width="486" height="130">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>

</object>

</object>
</span>

Synes godt om

coldasice Nybegynder

01. april 2009 - 14:00 #13

Det er en DW genereret flash kode. Og den model har jeg prøvet, men virker ikke :/

Synes godt om

olebole Juniormester

01. april 2009 - 14:45 #14

Hehe ... ja, Macromedia/Adobe selv har paradoksalt nok altid været de dårligste til at implementere Flash :)

Nu har jeg jo ingen idé om, hvad 'virker ikke' dækker, så det er svært at komme videre =)

Synes godt om

coldasice Nybegynder

01. april 2009 - 16:27 #15

'Virker ikke' dækker, at det ikke virker ;) Der skete simpelhen ikke noget.

Nu har jeg lavet om i mine divs og lavet det med margins stedet...

http://www.maskinen2002.dk/test/

CSS:

#main {
height: 430px;
width: 1000px;
margin-right: auto;
margin-left: auto;
position: relative;
border: none;
background-color: #ffffff;
margin-bottom:2px;
}

#leftdiv {
width: 496px;
background-color: #ffffff;
float:left;
margin: 5px 0px 0px 4px;
}

#largebox {
width: 486px;
height: 130px;
margin: 5px 5px 10px 5px;

}

#rightdiv {
width: 496px;
float:left;
margin: 5px 4px 0px 0px
}

Synes godt om

olebole Juniormester

02. april 2009 - 10:25 #16

"'Virker ikke' dækker, at det ikke virker ;) Der skete simpelhen ikke noget." >> Hvis din browser ikke viser noget, må der være noget galt med den ;o)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Variabler som ikke virker Af Frits Jensen i HTML	2	30/10/202409:37	30/10/202413:04
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	2	29/09/202410:58	30/09/202412:04
Bredde på div elementer Af dane022 i HTML	2	16/02/202408:29	20/02/202412:50
Hvilken mindste mobilstørrelse til hjemmeside Af CSharpRazor i HTML	2	21/12/202322:51	22/12/202308:03
validering <input tlfnr. Af slein55 i HTML	5	15/10/202311:43	15/10/202314:51

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS