Notifikationer

Markér alle som læst Log ud

cow-tilter Nybegynder

04. juni 2005 - 18:19 Der er 14 kommentarer og
1 løsning

Positionering i css

Jeg har lavet en lille forsøgsside med 9 bokse lavet i css jvf. guiden på html.dk (http://www.html.dk/tutorials/css/default.asp).
Problemet er at i IE vil boksene ikke helt nærme sig hinanden selv om positionerne for dem skulle passe. Jeg har angivet deres placering i forhold til toppen og venstre side, og afstanden er angivet i procent. I Firefox er der ingen problemer, her ligger de smukt ved siden af hinanden.

Er der nogen løsning på dette problem (griber jeg det helt forkert an med at bruge bokse til designet?)?

Jeg har prøvet at lege lidt med procentsatserne, men det hjælper ikke rigtig.

Synes godt om

foxmulder58 Praktikant

04. juni 2005 - 18:44 #1

nej det er godt nok at bruge bokse til designet. Og så kan du bruget tables til indholdet af disse.

Prøv at ligge et linkt ti dokumentet og evt. koden du har brugt.

mvh
Mads

Synes godt om

cow-tilter Nybegynder

04. juni 2005 - 18:46 #2

Jeg forsøgte med tabeller men det havde bare samme effekt...
Jeg smider lige koden.

Synes godt om

cow-tilter Nybegynder

04. juni 2005 - 18:47 #3

index.html:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Siden</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div class="boks1"></div>
<div class="boks2"><img alt="" src="pic/test16.bmp" height="100%" width="100%"/></div>
<div class="boks3"></div>
<div class="boks4"><img alt="" src="pic/test16le.bmp" height="100%" width="100%"/></div>
<div class="boks5"></div>
<div class="boks6"><img alt="" src="pic/test16ri.bmp" height="100%" width="100%"/></div>
<div class="boks7"></div>
<div class="boks8"><img alt="" src="pic/test16bo.bmp" height="100%" width="100%"/></div>
<div class="boks9"></div>

</body>
</html>

Synes godt om

cow-tilter Nybegynder

04. juni 2005 - 18:47 #4

style.css:

div.boks1 {
height: 12%;
width: 9%;
position: absolute;
top: 10%;
left: 10%;
border: 0px solid black;
background: orange;
}
div.boks2 {

height: 12%;
width: 42%;
position: absolute;
top: 10%;
left: 19%;
border: 0px solid black;
background: orange;
}
div.boks3 {
height: 12%;
width: 9%;
position: absolute;
top: 10%;
left: 61%;
border: 0px solid black;
background: orange;
}
div.boks4 {
height: 56%;
width: 9%;
position: absolute;
top: 22%;
left: 10%;
border: 0px solid black;
background: orange;
}
div.boks5 {
height: 56%;
width: 42%;
position: absolute;
top: 22%;
left: 19%;
border: 0px solid black;
background: orange;
}
div.boks6 {
height: 56%;
width: 9%;
position: absolute;
top: 22%;
left: 61%;
border: 0px solid black;
background: orange;
}
div.boks7 {
height: 12%;
width: 9%;
position: absolute;
top: 78%;
left: 10%;
border: 0px solid black;
background: orange;
}
div.boks8 {
height: 12%;
width: 42%;
position: absolute;
top: 78%;
left: 19%;
border: 0px solid black;
background: orange;
}
div.boks9 {
height: 12%;
width: 9%;
position: absolute;
top: 78%;
left: 61%;
border: 0px solid black;
background: orange;
}

Synes godt om

cow-tilter Nybegynder

04. juni 2005 - 18:50 #5

Links

http://esben.kjaersgaard.dk/boks/
http://esben.kjaersgaard.dk/frame/

Her er en med bokse og en med frames. Der er lige noget med farver og et ret tungt billede, men det er lige lavet hurtigt.

Synes godt om

foxmulder58 Praktikant

04. juni 2005 - 18:54 #6

Først og fremmest skal du ændre din DOCTYPE til:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

PS! se <olebole>`s artikler omrking XHTML:

mvh
Mads

Synes godt om

foxmulder58 Praktikant

04. juni 2005 - 18:55 #7

hvorfor angiver du ikke din postionering i pixels istedet for procent.

mvh
Mads

Synes godt om

cow-tilter Nybegynder

04. juni 2005 - 18:59 #8

Jeg bruger procent lidt som et forsøg, så siden tiltasser sig skærmopløsningen. Mit eksempel med frames er med pixels, men det giver stadig samme problem med Internet Explorer.. Jeg kan ikke slippe af med de streger.

/Esben

Synes godt om

cow-tilter Nybegynder

04. juni 2005 - 19:07 #9

Men du har ret i at det er noget nemmere at arbejde med pixels. Specielt i dette tilfælde hvor 100% horisontalt ikke er lige så mange pixels som 100% vertikalt, og cirklen så flader ud, selv om man prøver at tage lidt højde for det :)

Synes godt om

olebole Juniormester

05. juni 2005 - 02:28 #10

<ole>

For det første har du intet ud af at skrive XHTML ... det er tværtimod yderst få brugere, det ikke er en bagdel for :)
Dernæst er det af aller største betydning, at du ikke har _noget_ somhelst andet end DTD'en stående før <HTML>, da IE ellers ikke forstår CSS ;o)

/mvh
</bole>

Synes godt om

cow-tilter Nybegynder

05. juni 2005 - 21:27 #11

Jeg har ændret min kode jvf. foxmulder58s henvisning:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Siden</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

Men det hjælper stadig ikke problemet. Er IE simpethen ikke gearet til at blive brugt på den måde, eller (og mere sandsynligt) hvad gør jeg forkert? Jeg er også løbet ind i lidt problemer med farver. Firefox viser farverne helt præcis, hvorimod IE laver forskel på farverne på baggrunden og et billede, selv om disse har samme farve. Det sker når jeg gemmer billedet som *.jpg, hvor der selvfølgelig går nogle farver tabt, men Firefox kan altså godt finde ud af det.

Synes godt om

olebole Juniormester

05. juni 2005 - 22:00 #12

Du skal også ændre alle dine XHTML-lukninger (de dér -> ' />'), der ikke er valid HTML.

Dernæst forstår jeg ikke dit problem. Prøv at lave et eksempel med brugbar grafik, hvor jeg kan se fejlen ... så kan vi sikkert løse problemet :)

Synes godt om

roenving Novice

28. juli 2005 - 19:01 #13

... måske lige en reminder til dette, som stammer fra den mail-løse periode !-)

Synes godt om

cow-tilter Nybegynder

13. november 2005 - 20:10 #14

Jeg fandt ud af at jeg ikke behøvede alle de bokse, men kunne skære det ned til en, og kom den med måde uden om problemerne, og det blev i samme omgang meget nemmere at ændre på siden. Kan I ikke smide et svar hvis I mener at I fortjener det?

Synes godt om

cow-tilter Nybegynder

21. december 2005 - 20:34 #15

nå, ikke

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
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

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