TypeMedlem sedan mars 20021 340 inlägg Hejsan
Jag blir snart galen... Har suttit o kämpat med min sida bra länge sen o nu har jag kommit så pass långt att jag börjat om från början med en helt ny version som ska bli som den andra men på rätt sätt från början. Att härva runt i gamla koden blir man bara ännu tokigare av...
Nu till problemet...
Jag sitter här o jämför med MSIE6 och FIREFOX1.0 tror jag att det är... Min sida är 100% height och det har jag fått att funka... Men om jag nu skriver så mycket text att sidan tar upp hela utrymmet (dvs blir en vertikal scroller) så flyttas den blåa rutan lite åt vänster i Firefox eftersom scrollen då tar plats. I IE ligger ju scrollen där hela tiden.
Jag vill självklart inte att sidan ska flyttas bara för att en scroller helt plötsligt kommer fram!
Hur löser jag nu detta? Visar lite kod för att ha något att leka med...
denna kod verifieras xhtml 1.0 strict.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Erik Sigvardsson, SIGVARDSSON.NU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
html,body{
height:100%;
padding:0;
margin:0;
background-color:#CCC;
text-align:center;
}
p{
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
#container{
text-align:left;
width:537px;
border-left:1px #666 solid;
border-right:1px #666 solid;
background-color:#6B8FB3;
margin:0px auto;
min-height:100%;
}
</style>
<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<p><a href="index_big.html">Till en lång variant</a></p>
</div>
</body>
</html>
Om man sen istället för "Till en lång variant" skriver mycket text blir det en scroll i Firefox och då flyttas den blåa rutan 5 millimeter ungefär åt vänster. Hur får man bort det?
TypeMedlem sedan mars 20021 340 inlägg Går det inte att lösa eller vad beror detta på? Ett alternativ som jag tänkt på är att ytterst lägga en div med scroll hela tiden... Dock vet jag inte om det funkar eftersom jag aldrig arbetat med scrollar på divar...
zcorpanMedlem sedan dec. 20042 269 inlägg Tja, det blir så med centrerade sidor... Om du har mycket innehåll är scrollen där hela tiden. ;) Och då behöver man inte 100% height heller. :)
kaxigtMedlem sedan okt. 2004618 inlägg Testa med att lägga till detta i din html,body
margin: 0px;
padding:0px;
och i din container:
margin-left: auto;
margin-right: auto;
Tänk också på att om du sedan använder padding, border eller annat i utseendet-texten och inte i "bygget" - så "inkräktar" det på utrymmet(vidden) som du har lagt till width:537px;. En 1 px ram ger 535 kvar att skriva på, lägger du till 5 px padding ger det dig 5+5px=10px efter som de är 5 px på varje sida. Då inskränks utrymmet ännu mer till 545 px vidd. Är du med?
Sedan - IE har oftast en liten "bugg" på 3 px jämförst med mozilla, du kan friskriva dig från detta genom att lägga in alternativ kod med if-sats som du nu gjort ;)
Jag föreslår att du skippar 100% height - det blir snyggt ändå :birp
jarvkloMedlem sedan juli 20013 295 inlägg Hmm...
Nu har jag inte testat om denna sitter "bäst" på html eller body med just den dokumenttyp du kör med, men du borde kunna få dit scrollbaren permanent med lite CSS - antingen
html {overflow:scroll}
eller
body {overflow:scroll}
vilket snabbt och handfast borde lösa problemnet med sidflytten geno att "permanenta" scrollbaren i högerkanten ;)
kaxigtMedlem sedan okt. 2004618 inlägg
kod:html {overflow:scroll}
body {overflow:scroll}
hmmm.....är verligen dessa attribut förenliga med xhtml strict?
ändring: du menar förstås i css-mallen nu och inte i html-dok antar jag.
Ett annat alternativ kan vara att "fylla" de sidor som inte är 100% height med
<p> & nbsp; </p>
alternativt skapa en class med "luft". Min erfarenhet är att så fort sidan överskrider 100% height och man inte lagt in left-resp. right-margin:auto; så flyttar sig sidan i sidled när scrollen kommer upp.
Min sida funkar i både FF och IE oavsett om sidan är 100% height eller ej, och jag har dessa inställningar.
jarvkloMedlem sedan juli 20013 295 inlägg Hmm...
Ledsen om jag var oklar - (och jag menar naturligtvis i CSS:en som du säger...)
En annan fuling man kan ta till är att alltid ställa in
body {height:101%}
i CSS:en - vilket garanterat ger en rullningslist i alla webbläsare oavsett hur hög din sida är ;) (om man nu kan leva med det lilla "extra" rullutrymmet under webbläsarkanten som blir följden av fulingen förståss ;) )
zcorpanMedlem sedan dec. 20042 269 inlägg
hmmm.....är verligen dessa attribut förenliga med xhtml strict?
Attribut? CSS har inga attribut... Såhär kallas de olika delarna i CSS:
väljare {egenskap: värde;}
Hur stilmallen ser ut har ingenting med vilken version av uppmärkning man använder att göra. Det må vara HTML, XHTML, XML eller vad som helst som CSS fungerar med. Och om CSSen är intern eller extern har inte heller med saken att göra...
För att fortsätta skolan, så tar vi syntaxen för HTML också:
<tagg attribut="värde">innehåll</tagg>
Gott nytt år! :bire
TypeMedlem sedan mars 20021 340 inlägg Tack jarvklo! Den lösning du visade med overflow:sroll (som jag använder på html-taggen) fungerar perfekt!!! precis som jag vill att det ska vara!
Nu har jag dock ett annat problem... Det gäller ett div-lager som ligger ytterst med bakgrund på... Det ska vara height:100% men om sidan blir större "följa med" ner.... Fungerar i IE men inte i FF. Vad beror detta på? Jag har märkt att om man istället för att lägga in en massa divar som jag gör nu skriver vanlig text följer den med även i FF. Hjäälp! Jag skickar med kod.
Stilmallen:
html,body{
height:100%;
padding:0;
margin:0;
background-color:#CCC;
text-align:center;
}
html{overflow:scroll;}
p{
font:11px/20px verdana, arial, helvetica, sans-serif;
margin:0px 0px 16px 0px;
padding:0px;
}
a{
color:#03C;
}
a:hover{
color:#03C;
text-decoration: none;
}
img{
border:0;
}
#container{
text-align:left;
width:538px;
border-left:1px #666 solid;
border-right:1px #666 solid;
background-color:#6B8FB3;
margin:0px auto;
min-height:100%;
}
#head{
padding-top:40px;
padding-left:20px;
}
#menu{
padding-top:5px;
}
#left{
float:left;
padding-left:15px;
width:350px;
}
#right{
float:right;
text-align:left;
padding-left:15px;
width:150px;
}
.rutatop{
padding-top:10px;
}
.rutasmall{
width:119px;
background-color:#999;
border:1px #CCC solid;
padding:5px;
margin-top:0px;
padding-top:0px;
}
.ruta{
position:relative;
width:338px;
text-align:left;
background-color:#999;
border:1px #CCC solid;
padding:5px;
padding-top:0px;
}
.middleInput{
border:1px #CCC solid;
font-family: Verdana,Tahoma,sans-serif;
color:#FFF;
vertical-align:middle;
background-color:#666;
}
Sidan med mycket saker så det blir scroll:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv" lang="sv">
<head>
<title>Erik Sigvardsson, SIGVARDSSON.NU</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="stilmall.css" />
<script type="text/javascript" src="funktioner.js"></script>
<!--[if IE]>
<style type="text/css">
#container {height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="head">
<a href="index.php"><img src="bilder/head.gif" alt="HEM"/></a>
</div>
<div id="menu">
<!-- menyn ligger här men texten är så lång så vi skippar den nu.. -->
</div>
<div id="left">
<?for($i=0;$i<10;$i++){?>
<div class="rutatop"><img src="bilder/pagaendeprojekt_top.gif" alt="PÅGÅENDE PROJEKT"/></div>
<div class="ruta">
<div style="float:left;padding:5px;">
<a href="bilder/screenshots/sigvardssonnu_new.jpg"><img src="bilder/screenshots/sigvardssonnu_new_small.jpg" alt="TRYCK FÖR STÖRRE"/></a>
</div>
<div style="">
<p><b>SKAPAD: 2004<br/>SIGVARDSSON.NU</b><br/>
Den sidan jag använder nu är ett fortlöpande projekt som aldrig blir riktigt klart. Det är min tanke iaf.
Däremot ska själva grunden vara klar snart. Jag blir mer och mer nöjd med upplägget.</p>
<p>Adress: <a href="http://www.sigvardsson.nu/" target="_new">[url]www.sigvardsson.nu[/url]</a></p>
</div>
</div>
<?}?>
</div>
<div id="right">
<div class="rutatop"><img src="bilder/projekt_top.gif" alt="VÄLJ PROJEKT"/></div>
<div class="rutasmall">
<p>Välj vilka projekt du vill visa:</p>
<p>Projekt på gång<br/>
Avslutade projekt</p>
</div>
</div>
</div>
</body>
</html>
Jag trodde att min fina <!-- [if IE] skulle lösa biffen eftersom jag använder min-height på #container men det va fel...
kaxigtMedlem sedan okt. 2004618 inlägg nej css har ingen attribut . Men du läste tydligen inte mitt tillägg, för dessa cssvärden kan du ju lägga in direkt i html-koden - vilka vissa också gör och blir då attributvärden. Jag tänkte först på detta innan jag kom på att han menade i stilmallen.
Men det är bra med en html-skola, för de som inte vet eller vill lära sig mer.
jarvkloMedlem sedan juli 20013 295 inlägg Hmm..
Det där beror på att du har float på din #left och din #right (de lägger sig "ovanför" #container när du gör så)
Ett enkelt sätt att åtgärda det problemet är att lägga till innehåll inne i #container efter de bägge kolumnerna - t.ex. såhär:
</div>
[b] <div style="clear:both">&nbsp;</div>[/b]
</div>
</body>
</html>
Vill du inte ha det extra utrymmet som div:en mtar upp med i din design, kan du t.ex. lägga till stilarna
height:1px; overflow:hidden
på den nya div:en (OBS! höjden 0px funkar inte ;) )
TypeMedlem sedan mars 20021 340 inlägg jarvklo! Än en gång! Helt fantatiskt! Tack så otroligt mycket!
I vanliga fall hade jag gärna använt height:1px; overflow:hidden; också, men när det gäller längst ner så klarar jag mig nog ändå...
Tusen tack!
TypeMedlem sedan mars 20021 340 inlägg nu har jag problem.. vet inte om jag ska starta en ny tråd eller fortsätta här.. jag har ju redan koden här... o ett snabbt svar tror jag också det blir... jag skriver här istället för att starta ny tråd!
Det gäller Firefox igen... som man ser på bilden jag skickat med så blir det ett mellanrum mellan övre lagret och rut-lagret...
<div class="rutatop"><img src="bilder/pagaendeprojekt_top.gif" alt="PÅGÅENDE PROJEKT"/></div>
<div class="ruta">
<div style="float:left;padding:5px;">
<a href="bilder/screenshots/sigvardssonnu_new.jpg"><img src="bilder/screenshots/sigvardssonnu_new_small.jpg" alt="TRYCK FÖR STÖRRE"/></a>
</div>
<div style="">
<p><b>SKAPAD: 2004<br/>SIGVARDSSON.NU</b><br/>
Den sidan jag använder nu är ett fortlöpande projekt som aldrig blir riktigt klart. Det är min tanke iaf.
Däremot ska själva grunden vara klar snart. Jag blir mer och mer nöjd med upplägget.</p>
<p>Adress: <a href="http://www.sigvardsson.nu/" target="_new">[url]www.sigvardsson.nu[/url]</a></p>
</div>
</div>
Lägger in koden igen... Stilmallen finns i ett annat inlägg här...
/red
Det funkar i IE som det ska...
TypeMedlem sedan mars 20021 340 inlägg Vad dum jag är!!!
La bara till height:17px; i rutatop så funka det superbra! Varför tänkte jag inte på det ifrån början!!! ;)
kaxigtMedlem sedan okt. 2004618 inlägg Ibland blir man "hemmablind" ;)
Men bra att du talade om hur du löste problemet så andra kan lära sig.
