|
| Stoppe horizontal scrollbar Fra : kathy | Vist : 1551 gange 100 point Dato : 24-07-07 13:48 |
|
Er der nogen, der kan huske den?
Når den horizontale scrollbar vises unødigt, er der en stump kode, der kan stoppe den.
Har set den før - her på siden - men fik den ikke gemt.
Sandsyndligvis et guldkorn fra MOLOKYLE.
mvh
kathy
| |
| Kommentar Fra : vith |
Dato : 24-07-07 15:18 |
|
På min hjemmeside (lavet i Front page Express) skriver jeg: scroll="auto""
så kommer scrollbaren kun på, hvis det er nødvendigt.
| |
| Kommentar Fra : kathy |
Dato : 24-07-07 15:27 |
|
Hej with
hverken "auto" eller "default" virker altid.
Det er simpelthen en stump kode, der sættes ind i headafsnittet i de tilfælde, hvor scrollbaren ikke er til at styre på anden vis.
mvh
kathy
| |
| Kommentar Fra : vith |
Dato : 24-07-07 15:31 |
|
Okay, den kode kender jeg desværre ikke.
mvh vith
| |
| Kommentar Fra : kathy |
Dato : 24-07-07 15:33 |
| | |
| Accepteret svar Fra : molokyle | Modtaget 100 point Dato : 24-07-07 17:17 |
|
Er det max-width og min-width egenskaberne du tænker på?
http://www.w3schools.com/css/pr_dim_max-width.asp
http://www.w3schools.com/css/pr_dim_min-width.asp
Det er standard CSS 2, men virker IKKE i IE 6
...alle andre nyere browsere IE 7 inklusive, forstår imidlertid godt disse egenskaber.
Jeg benytter dem selv på min hjemmeside: http://www.cssboxing.com/
..eksempelvis i den overordnede indholdsdel:
Kode #page
{
display:block;
max-width:792px;
min-width:440px;
margin-left:216px;
margin-right:16px;
clear:left;
} |
Dvs. at den horizontale scrollbar først vises, hvis vinduets størrelse eller skærmopløsningen er mindre end 800 pixels (= 800 X 600 vindue/skærmopløsning i bredden - (minus) browser 'ting', som vinduesramme og vertical scrollbar.)
Atlså; viewporten er 440 pixel + de 184 pixels som menuen i fast bredde fylder = 624 pixels + marginer + browser 'ting'.
Det er og bli'r et større regnearbejde i pixels
For en max-width på 792 pixels vedkommende?
..så er det for, at siden ikke strækker sig længere end til en viewport på 1024 X 768 pixels (..af læsbarhedshensyn i større skærmopløsninger), men derefter så til gengæld centreres ved større opløsninger
Et andet 'trick' er at sætte marginer og padding for alle HTML elementer på siden som 0px:
Kode * {margin:0px;padding:0px;} |
..samt at sætte body til 100% størrelse i bredde og højde:
Kode body {width:100%;height:100%;} |
Selvom jeg forbeholder mig ophavsret til mine sider (Det gælder det overordnede layout), så skal du være mere end velkommen til at aflure div. 'snippets' i min CSS
Kast et blik på f.eks. : http://www.cssboxing.com/css/black_layout.css
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 24-07-07 17:26 |
|
Alene dette bør kunne gøre det :
Kode * { margin:0;padding:0;}
body
{
height:100%;
width:100%;
margin:auto;
overflow:auto;
} |
Hvis sidens bredde er større end indholdets bredde.
Laver du et (X-)HTML element ..eksempelvis en DIV med en fast bredde ud over vindue/opløsnings størrelsen?
Så får du naturligvis en horizontal scrollbar.
..ellers kig på overflow egenskaben: http://www.w3schools.com/css/pr_pos_overflow.asp
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 24-07-07 17:34 |
|
vith -> scroll="auto" parameteren i HTML ..for <body..> .. </body> elementet er IKKE en standard attribut, men en Microsoft 'ting', som ikke følger standarden, som anbefalet af htttp:/ www.w3.org/
..så tror pokker, at det ikke altid virker
I 'gamle' IE 6 dage brugte man i CSS:
Kode html {
overflow: auto;
} |
..for at fjerne uønskede scrollbars i IE ...det er muligt det et dette du tænker på kathy?
Dét har jeg nemlig skrevet om tidligere hér på boardet
</MOLOKYLE>
| |
| Kommentar Fra : molokyle |
Dato : 24-07-07 17:44 |
|
Ps. Prøv evt. at indsætte flg. i dit stylesheet :
Kode * {margin:0;padding:0;overflow:auto;} |
Gælder så ALLE elementer på siden (span/div/p/iframes mm.)
Mere sikkert er at bruge:
Kode body {margin:0;padding:0;overflow:auto;} |
..eller hvis du er SIKKER på, at indholdet ikke fylder mere end brugerens opløsning giver plads til:
Kode html {margin:0;padding:0;overflow:hidden;} |
</MOLOKYLE>
| |
| Kommentar Fra : kathy |
Dato : 25-07-07 08:30 |
|
God morgen MOLOKYLE
Tusind tak, det var lige det, jeg ikke kunne huske.
Tak for invitationen.
Vender tilbage
med venlig hilsen
Kathy
| |
| Godkendelse af svar Fra : kathy |
Dato : 26-07-07 14:22 |
|
Tak for svaret molokyle.
Var inde at kigge - Så er der noget at tage fat på.
boxing bliver helt klart mit næste 'skole' projekt.
har selv villet bruge <meta http-equiv="Page-Enter" content="blendTrans(Duration=2.0)">
Men da jeg kun ved hvordan, den skal anvendes til IE, overvejer jeg at gå fra den igen.
Er det overhovedet muligt, at få den til at virke cross browser?
Helt eksakt var mit problem at når jeg testede en side (i IE), der ikke overskred rammerne, udløste den en horizontal scrollbar, men ikke når jeg testede samme side ved en lavere skærm opløsning.
Det er jo fuldstændig ulogisk.
mvh
kathy
| |
| Kommentar Fra : molokyle |
Dato : 26-07-07 16:22 |
|
Omtalte META er en Microsoft proprietær egenskab, som KUN forstås af Miccosoft egne produkter:
IE, Frontpage, Powerpoint osv.
Det 'findes' ikke til andre browsere. Derfor 'filtrerer' jeg på min hjemmeside denne META fra, for andre browsere end IE ..med følgende konstruktion:
Kode <!--[if IE]>
<meta http-equiv="page-exit" content="blendtrans(duration=3)" />
<![endif]--> |
Andre standard browsere 'tror' nemlig det er en alm. kommentar
, men IE tolker den som en betingelse og læse hvad som står mellem kommentaren:
Kode [if IE]>
<meta http-equiv="page-exit" content="blendtrans(duration=3)" />
<![endif] |
Læs mere her: http://msdn2.microsoft.com/en-us/library/ms537512.aspx
På samme måde sørger jeg for, at diverse stylesheets retter sig mod relevante browsere, dels ved at lave specifikke 'overrides'/'overloading' af CSS egenskaberne ved, at benytte mig af precedensreglerne, delv vha. betingede kommentarer:
Kode <link rel="stylesheet" type="text/css" media="all" href="/css/black_layout.css" />
.
<!--[if IE]>
<meta http-equiv="page-exit" content="blendtrans(duration=3)" />
<![if lte IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="/css/ie6.css" />
<![endif]>
<![if gt IE 6]>
<link rel="stylesheet" type="text/css" media="all" href="/css/ie7.css" />
<![endif]>
<![endif]--> |
Derved undgår jeg browsersniffing i Javascript og DOM
</MOLOKYLE>
| |
| Kommentar Fra : kathy |
Dato : 26-07-07 16:49 |
|
Tak for ekstra oplysninger.
Jeg så godt, at du havde lagt den ind specifikt til IE.
Det troede jeg ikke var nødvendigt. Ser på link i aften.
Hvad er browsersniffing - det lyder ikke specielt positivt?
mvh
kathy
| |
| Kommentar Fra : molokyle |
Dato : 26-07-07 19:09 |
|
For det første har jeg lagt en privat kommentar til dig kathy, men det var blot for at gøre dig opmærksom på, at jeg havde svaret dig her i tråden efter du lukkede spørgsmålet.
..denne private debat afslutter jeg lige ..sådan
For det andet; browsersniffing er, når man med en eller anden 'teknik' (..der findes flere metoder) på 'forhånd' afgør hvilken kode klienten skal 'se', ved hjælp af javascript og DOM. For at finde ud af hvilken browser der benyttes til at se siden kigger man på enten DOM BrowserDetect objektet eller ved at teste om visse browserspecifikke funktioner findes eller ej.
ad 1) http://www.quirksmode.org/js/detect.html (BrowserDetect)
ad 2) http://jennifermadden.com/javascript/dhtml/browserSnif.html (Document.all vs. Document.layers)
En anden tilgangsvinkel er, at benytte browser hacks som gør, at nogen browsere kan forstå den ene del af koden, medens nogen kan forstå den anden. Og så er der betingede kommentarer (Det er den sidste metode jeg selv benytter, men ingen af dem forliger sig på Javascript, men på hvad den specifikke browser rent faktisk kan rendere.)
Til dette findes der også flere metoder:
1.) CSS browser hacks ( Her er et link: http://www.positioniseverything.net/ )
2.) Betingede kommentarer (= 'min' metode)
Der raser store diskussioner om man skal benytte browser sniffing/-detection eller hacks/'udmaskning'. Det kan du sikker finde mere om på nettet
Det er bestemt IKKE blevet nemmere at være websmed
Happy coding... </MOLOKYLE>
| |
| Du har følgende muligheder | |
|
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.
Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
| |
|
|