Scrolling på webside

25. april 2013

Hei, jeg har kommet over et problem angående scrolling på websiden min...
Jeg har bygd opp websiden ved å bruke boxes, jeg har sentret disse ved bruk av margin og gitt them en spesiel width og height...
Det har seg sånn at textboxen min har høyde som er mer en websiden, men en scrollbar har ikke blitt aktivert, jeg har prøvd forskjellige måter, men har ikke kommet over et resultat, boxen går rett og slett videre uten at jeg får sett hva som befinner seg lengre ned i boxen (som tekst osv.).
Her et et bilde:
http://bildr.no/thumb/1445529.jpeg

8bit

Profesjonell Noob

842 226

25. april 2013

har du en overflow:hidden; i css'en din?
If so, endre denne til overflow:scroll; eller overflow:auto;

ingis95

Trådstarter

496 144

25. april 2013

Sitat av 8bit

har du en overflow:hidden; i css'en din?
If so, endre denne til overflow:scroll; eller overflow:auto;

Vis hele sitatet...

Har en, men denne er satt på headeren... er det relevant?

8bit

Profesjonell Noob

842 226

25. april 2013

Sitat av ingis95

Har en, men denne er satt på headeren... er det relevant?

Vis hele sitatet...

Hmm... skulle ikke være relevant, men du kan prøve å sette en overflow:scroll; eller auto i main'en.

ingis95

Trådstarter

496 144

25. april 2013

Sitat av 8bit

Hmm... skulle ikke være relevant, men du kan prøve å sette en overflow:scroll; eller auto i main'en.

Vis hele sitatet...

Har prøvd å sette overflow:scroll; eller auto i body og html... det gir ikke noe resultat annet at en tom scrollbar kommer opp, men jeg kan fremdeles ikke scrolle ned på boxen som forsvinner...

nso

popålol

Administrator

6.159 5.592

25. april 2013

Bruker du floats uten clear:both etter dem?

ingis95

Trådstarter

496 144

25. april 2013

Sitat av nso

Bruker du floats uten clear:both etter dem?

Vis hele sitatet...

Nei, jeg har ikke brukt en slik funksjon på kodingen...
Her er CSS koden, ikke døm please, jeg er i lærerstadiet :P

Kode

body 
{
background-color:#cbcbcb;
}

div.home
{
background-color:#fbfbfb;
width:140px;
height:30px;
border:1px solid black;
border-radius: 2px;
margin-top: -110px;
margin-left:-400px;
position:fixed;
top: 50%;
left: 50%;
}
	
div.about
{
background-color:#fbfbfb;
width:140px;
height:30px;
border:1px solid black;
border-radius: 2px;
margin-top: -110px;
margin-left:-145px;
position:fixed;
top: 50%;
left: 50%;
}

div.blog
{
background-color:#fbfbfb;
width:140px;
height:30px;
border:1px solid black;
border-radius: 2px;
margin-top: -110px;
margin-left:8px;
position:fixed;
top: 50%;
left: 50%;
}

div.contact
{
background-color:#fbfbfb;
width:140px;
height:30px;
border:1px solid black;
border-radius: 2px;
margin-top: -110px;
margin-left:160px;
position:fixed;
top: 50%;
left: 50%;
}

div.header
{
background-color:#fbfbfb;
width:800px;
height:200px;
border:1px solid black;
border-radius: 2px;
margin-top: -318px;
margin-left:-400px;
position:fixed;
top: 50%;
left: 50%;
overflow: hidden;
}

div.news
{
background-color:#fbfbfb;
width:800px;
height:800px;
border:1px solid black;
border-radius: 2px;
margin-top: -72px;
margin-left:-400px;
position:fixed;
top: 50%;
left: 50%;
}

p {font-family:"Verdana";}
p {color:#000000;}
p {font-size:0.6em;}

a {font-family:"Verdana";}
a {font-size:1.5em;}
a:link {color:#000000;}      /* unvisited link */
a:visited {color:#000000;}  /* visited link */
a:hover {color:#d0504f;}  /* mouse over link */
a:active {color:#d0504f;}  /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

Sist endret av ingis95; 25. april 2013 kl. 14:13.

Yochi

1.024 230

25. april 2013

Nå har jeg bare sett veldig kjapt på CSS-koden din, og jeg tror problemet er "position: fixed;"

Denne gjør at innholdet holder seg plassert der det er uansett, og dermed vil du ikke få scrolle videre. Bruk position: relative eller ingenting og du skal se det ordner seg

ingis95

Trådstarter

496 144

26. april 2013

Sitat av Yochi

Vis hele sitatet...

Hei, det ødelegger for posisjoneringen av boxene...
Tips til hvordan jeg kan ungå det?

Markus

413 69

26. april 2013

Post en lenke til all kildekoden din, så er det straks enklere å hjelpe deg.

ingis95

Trådstarter

496 144

26. april 2013

HTML:

Kode

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="introduction.css">
</head>

<div class="box">
<center> 
<a href="home.html"> <b>Enter site</b></a>
</center>
</div>

<div class="foto">
<center> 
<img src="./img/index.png">
</center>
</div>


</body>
</html>

CSS:

Kode

body {background-color:#cbcbcb;}

div.box
{
background-color:#fbfbfb;
width:250px;
height:38px;
border:1px solid white;
margin-top: 200px;
margin-left: -125px;
position: relative;
top: 50%;
left: 50%;
border-radius: 10px ;
box-shadow: inset 0px 1px 3px #000000;
}

div.foto
{
background-color:#fbfbfb;
width:600px;
height:300px;
border:1px solid white;
margin-top: -120px;
margin-left: -300px;
position: relative;
top: 50%;
left: 50%;
border-radius: 0px ;
}

a {font-family:"Arial";}
a {font-size:2em;}
a:link {color:#666666;}      /* unvisited link */
a:visited {color:#666666;}  /* visited link */
a:hover {color:#bd4d4d;}  /* mouse over link */
a:active {color:#666666;}  /* selected link */

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}

Sist endret av ingis95; 26. april 2013 kl. 02:31.

0xFF

War room

2.408 1.141

26. april 2013

Om det er de rette dimensjonene på de forskjellige boksene vet jeg ikkje, men du vil få 2 bokser under hverandre, midt stil på siden, men 10px padding i toppen, og 10 px margin mellom boksene. Og mulighet for å scrolle.

Kode

<html>
<body>
<head>
<link rel="stylesheet" type="text/css" href="introduction.css">
</head>
<body>
<div id="wrap">
<div class="box">
<center> 
<a href="home.html"> <b>Enter site</b></a>
</center>
</div>

<div class="foto">
<center> 
<img src="./img/index.png">
</center>
</div>
</div>

</body>
</html>

Kode

* {
padding: 0px;
margin: 0px;
}

div#wrap {
width: 800px;
height: auto;

padding: 10px;
margin: 0 auto;

display: block;
}

div.box {
width: 780px;
height: auto;

padding:  0px;
margin-bottom: 10px;

display: block;
}

div.foto {
width: 780px;
height: auto;

padding: 0px;

display:block;
}

EDIT: <center> er en utgått html tag som ikkje lengere er valid følge W3C, bruk heller CSS til å midtstill elementer.

Sist endret av 0xFF; 26. april 2013 kl. 02:54.

ingis95

Trådstarter

496 144

26. april 2013

Takker, skal prøve dette ut

KP!