Søg
Avatar billede moejensen Nybegynder
26. november 2003 - 14:03 Der er 31 kommentarer og
2 løsninger

tjek af css layout i forskellige browsere

Hej med jer,

Jeg har lavet et udkast til et layout, som jeg gerne vil have testet i så mange forskellige browsere og versioner som muligt.

siden findes på http://test.moe-jensen.dk

for at i kan se hvordan det gerne skulle se ud, så er her et billede i fuld skærm:

http://test.moe-jensen.dk/dump1.jpg

og her et hvor siden er gjort lidt lavere:

http://test.moe-jensen.dk/dump1.jpg
bemærk at adressebaren hele tiden er i bunden.

Siden skulle være optimeret til 800 x 600 og 1024 x 768

Når i har testet siden må i gerne skrive hvilken browser i testede i, hvilken version og hvilken opløsning.

PS, jeg ved godt at siden er grim, så det er ikke feedback på farver osv jeg er ude efter :-)

Siden er testet i følgende:

- XP Pro - IE 6.0 800 x 600
- XP Pro - IE 6.0 1024 x 768
- Xp Pro - IE 6.0 1280 x 1024
Avatar billede fangel Nybegynder
26. november 2003 - 14:08 #1
Gentoo Linux - KDE - Mozilla 1.5 - 1600x1200 : http://mfa.ath.cx/test.moe-jensen.dk.png
Gentoo Linux - KDE - Links - 1600x1200 : http://mfa.ath.cx/test.moe-jensen.dk.2.png

billede 2 er kun for sjov - links er en tekstbaseret browser ;) men Mozilla er reelt nok

Morten
Avatar billede nikolajdu Nybegynder
26. november 2003 - 14:15 #2
I min netscape 7.02 og min mozilla firebird står Den øverste tekst lidt ude til venstre og ikke i midten

Win Xp
Avatar billede nikolajdu Nybegynder
26. november 2003 - 14:16 #3
Faktisk ligesom på dea_pg´s første billede.
Avatar billede fangel Nybegynder
26. november 2003 - 14:19 #4
nikolaj => no wonder - de kører alle samen på Gecko ;) - og under "testside" gå det galt for den... der kommer ekstra linier i bunden, og ingen scroolbare som du viser

Moretn
Avatar billede nikolajdu Nybegynder
26. november 2003 - 14:22 #5
I know ville bare lige understrege at det samme forekom i Win Xp
Avatar billede fangel Nybegynder
26. november 2003 - 14:24 #6
tja - Gecko er ret "portable" - den virker ret ens på de forskellige platofrme - men det skader aldrig at være sikker ;)
Avatar billede moejensen Nybegynder
26. november 2003 - 14:25 #7
er der nogen der kan give mig et bud på hvad der er galt siden det ikke står fint i midten
Avatar billede fangel Nybegynder
26. november 2003 - 14:28 #8
ikke lige en god en - nej... koden ser OK ud

Morten
Avatar billede nikolajdu Nybegynder
26. november 2003 - 15:05 #9
Prøv at rette :

#top_menu {
margin-top : 5px;
height : 59px;
width : 750px;
}

til :

#top_menu {
margin-top : 5px;
height : 59px;
width : 750px;
text-align:center;
}
Avatar billede skovenborg Nybegynder
26. november 2003 - 15:06 #10
eller:
#top_menu {
margin: 5px auto 0px auto;
height : 59px;
width : 750px;
}

så den centerere tabellen
Avatar billede skovenborg Nybegynder
26. november 2003 - 15:32 #11
--- text-align:center; virker kun i IE for at centrere tabeller (og i grunden mener jeg ikke det er meningen)
Avatar billede moejensen Nybegynder
26. november 2003 - 16:07 #12
det virker underligt, det er som om der er en fast klods i menuen der ikke vil flytte sig. Jeg har lige tjekket på det rigtige design, og der har jeg ikke problemet.
Avatar billede skovenborg Nybegynder
26. november 2003 - 16:41 #13
prøv at tilføje:
<div id="top_menu">
            <table border="0" cellpadding="0" cellspacing="0" style="display:inline-table;margin:0px auto">
Avatar billede skovenborg Nybegynder
26. november 2003 - 16:42 #14
hov - du behøver ikke display:inline-table; så den kan du godt slette :-)
Avatar billede moejensen Nybegynder
26. november 2003 - 16:54 #15
det gav desværre ikke noegt
Avatar billede skovenborg Nybegynder
26. november 2003 - 19:21 #16
hmm, hvis jeg går ind på din side nu i mozilla (+ firebird) så centere den da (hvis du taler om den øverste menu altså)...

I opera virker den også fint
Avatar billede skovenborg Nybegynder
26. november 2003 - 19:23 #17
(det var mozilla1.5, mozilla firebird 0.7, IE 6.0 og Opera 7.11 - alle WinXP (fordi jeg ikke kan få mit netkort til at virke i Linux :'(
Avatar billede moejensen Nybegynder
26. november 2003 - 20:39 #18
jeg har lige hentet en netscape,og nu kan jeg nemt se det virker og ser rigtig godt ud.

Nu er der kun en ting der ikke helt virker efter hensigten i andet end IE, og der er bunden. Hvis i går ind under test2 side, så vil i kunne se at bunden ikke sætter sig rigtig når der scrolles, pluds at den div med selve indholdet gerne kun skulle gå ned til kanten af bunden.
Avatar billede Slettet bruger
26. november 2003 - 22:51 #19
I Konqueror 3.1.3 får den ikke scrollbaren med på testside 1 og testadressefeltet ligger ind over teksten.

I Mozilla 1.5 har den scrollbare for den indre tekst, men testadressefeltet ligger ind over teksten.

Dette er på en Debian og min opløsning er 1280x960
Avatar billede moejensen Nybegynder
27. november 2003 - 08:59 #20
yeps, lige netop, men hvordan retter jeg det?
Avatar billede moejensen Nybegynder
29. november 2003 - 14:47 #21
Er det ikke muligt at lave bunden og midten kompatibel med netscape, mozilla og opera?
Avatar billede Slettet bruger
29. november 2003 - 20:38 #22
Måske er problemet, at main-feltet har en anden z-index end test-adressefeltet.
Avatar billede moejensen Nybegynder
30. november 2003 - 11:23 #23
det virkede desværre ikke :-(

Så alle kan være med så er her koden for de to boxe der er omtalt:

#main {
position : absolute;
height : 100%;
width : 700px;
left : 50%;
margin-left : -350px;
overflow : auto;
z-index : 2;
border-top : 59px solid #ffffff;
border-bottom : 30px solid #ffffff;
text-align : left;
}

#bottom {
position : absolute;
top : 100%;
margin-top : -30px;
height : 30px;
width : 100%;
background-image : url(/images/bottom_bg.gif);
background-repeat : repeat-x;
z-index : 3;
text-align : center;
}
Avatar billede Slettet bruger
30. november 2003 - 11:33 #24
Prøv at sætte en
bottom: 0px;

ind i #bottom-definitionen. Eventuelt skal top: 100% fjernes. Og så kan det være, at #main skal positioneres relativt.
Avatar billede moejensen Nybegynder
30. november 2003 - 11:51 #25
det ser nu såledesud:

#main {
position : relativ;
width : 700px;
left : 50%;
margin-left : -350px;
overflow : auto;
z-index : 2;
border-top : 59px solid #ffffff;
border-bottom : 30px solid #ffffff;
text-align : left;
}

#bottom {
position : absolute;
top : 100%;
bottom: 0px;
margin-top : -30px;
height : 30px;
width : 100%;
background-image : url(/images/bottom_bg.gif);
background-repeat : repeat-x;
z-index : 3;
text-align : center;
}

Men dukan se på test.moe-jensen.dk at det slet ikke går, jeg har også prøvet at tjekke da jeg satte de forskellige ting ind, og det virkede desværre heller ikke.
Avatar billede Slettet bruger
30. november 2003 - 11:58 #26
Når du skifter #main til relativ, skal du huske, at left: 50% betyder at den bliver rykket 50% af størrelsen til venstre.

Og, jeg opdagede lige, at du i din css har stavet relativ på dansk. Lige som absolut, skal det have et 'e' i enden i css.
Avatar billede moejensen Nybegynder
30. november 2003 - 12:27 #27
nu står det hele bare noget skævt, og det hjælper ikke rigtig på den dumme bund :-(
Avatar billede Slettet bruger
30. november 2003 - 18:17 #28
Prøv at sætte både main og bottom til relative og udkommentere positionsangivelsen og margin for main.
Avatar billede moejensen Nybegynder
30. november 2003 - 21:19 #29
de ser nu således ud:

#main {
position : relative;
width : 700px;
overflow : auto;
z-index : 2;
border-top : 59px solid #ffffff;
border-bottom : 30px solid #ffffff;
text-align : left;
}

#bottom {
position : relative;
top : 100%;
bottom: 0px;
margin-top : -30px;
height : 30px;
width : 100%;
background-image : url(/images/bottom_bg.gif);
background-repeat : repeat-x;
z-index : 3;
text-align : center;
}

og det virker desværre heller ikke :-(
Avatar billede moejensen Nybegynder
01. december 2003 - 22:12 #30
Er der overhoved ikke nogen måde hvorpå man kan lave en bund bar der altid står i buden af browservinduet ved hjælp af css som virker i netscape og opera?
Avatar billede moejensen Nybegynder
06. december 2003 - 14:45 #31
jeg opretter et nyt spg med problemstillingen. Tak for feedback.

Hvis i vil have point må i gerne lave et svar.
Avatar billede Slettet bruger
06. december 2003 - 16:05 #32
Jeg ved ikke, om jeg har fortjent nogen, men nu har du da i hvert fald muligheden. :-)
Avatar billede fangel Nybegynder
06. december 2003 - 20:45 #33
hvisu du synes...

Morten
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
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
31/0810:26 Synkronisering af kalender mellem computer, android telefon og iPhone Af Strawberry i Andre onlineløsninger
31/0810:24 Kan Excel selv beregne alder? Af leahcim i Excel
30/0815:02 Gemme besked fra Facebook / Messenger Af lurup i Sociale medier
29/0820:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
White papers
Flere white papers »