/ Forside / Teknologi / Udvikling / HTML / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
HTML
#NavnPoint
molokyle 11184
Klaudi 5506
bentjuul 3377
severino 2040
smorch 1950
strarup 1525
natmaden 1396
scootergr.. 1320
e.c 1150
10  miritdk 1110
Scalering af hjemmeside
Fra : undertegnede@gmail.c~


Dato : 07-04-08 01:59

Hej....

Jeg er 95% færdig med en hjemmeside - men har et stort problem, jeg
håber I kan hjælpe med.

Det drejer sig om hvordan siden vises når skærmstørrelsen kun er
800x600. Jeg vil gerne have at teksten i midten forbliver helt uden
nogen horizontal scroll og det i stedet er billedet i højre side der
gradvist forsvinder. (Således at det forsvinder fra højre - så fx kun
An, Ve, Ko står tilbage).

Link: http://home6.inet.tele.dk/compuart/hj/test.htm

Håber meget I kan hjælpe! Mange tak!

/morten


 
 
Philip Nunnegaard (07-04-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 07-04-08 12:41

<undertegnede@gmail.com> skrev i meddelelsen
news:94f8a302-2d42-41f8-a752-2e560033bdce@a23g2000hsc.googlegroups.com...

> Det drejer sig om hvordan siden vises når skærmstørrelsen kun er
> 800x600. Jeg vil gerne have at teksten i midten forbliver helt uden
> nogen horizontal scroll og det i stedet er billedet i højre side der
> gradvist forsvinder. (Således at det forsvinder fra højre - så fx kun
> An, Ve, Ko står tilbage).

Så vidt jeg kan se, er det div#tekst, der er problemet:

#tekst {
position: absolute;
top: 20%;
left:226px;
right:336px;
height:290px;
padding-left:0px;
padding-right:0px;
margin: 0px auto -1px auto;
overflow-y: auto;
text-align:center}

Fjern "right: 336px;" og sæt en bredde på i stedet.

Problemet er så, at der nok kommer vandret scroll på billedet til højre i
stedet.
Det kan sikkert klares ved at gøre billedet til et baggrundsbillede i stedet
for at bruge <img...>

Offtopic:
I koden har du:
<a href="ydelser.html#poli"><li>txt</li></a>

Det ville nok se lidt kønnere ud, hvis du byttede om på <li> og <a>, så det
blev til:
<li><a href="ydelser.html#poli">txt</a></li>


undertegnede@gmail.c~ (07-04-2008)
Kommentar
Fra : undertegnede@gmail.c~


Dato : 07-04-08 06:43


> Så vidt jeg kan se, er det div#tekst, der er problemet:
>
> #tekst {
> position: absolute;
> top: 20%;
> left:226px;
> right:336px;
> height:290px;
> padding-left:0px;
> padding-right:0px;
> margin: 0px auto -1px auto;
> overflow-y: auto;
> text-align:center}
>
> Fjern "right: 336px;" og sæt en bredde på i stedet.
>
> Problemet er så, at der nok kommer vandret scroll på billedet til højre i
> stedet.
> Det kan sikkert klares ved at gøre billedet til et baggrundsbillede i stedet
> for at bruge <img...>
>
> Offtopic:
> I koden har du:
> <a href="ydelser.html#poli"><li>txt</li></a>
>
> Det ville nok se lidt kønnere ud, hvis du byttede om på <li> og <a>, så det
> blev til:
> <li><a href="ydelser.html#poli">txt</a></li>


Tusind tak for svaret - men det hjælper desværre ikke.
Dels vil jeg gerne have at den lodrette scroll-bar er placeret helt
ude hvor billedet begynder, dels er det stadig teksten der forsvinder
og ikke billedet når vinduet gøres mindre.

Jeg har på fornemmelsen at billedet skal positioneres anderledes: Lige
nu står der fx #pic right: 0 px; men egentlig skal det være længst til
venstre hvis der er plads nok og forsvinde delvist hvis der ikke er
plads nok. Har I nogen forslag til hvordan jeg løser det?

Tak for offtoppic-tippet - altid rart at få anden respons. Jeg kan dog
ikke se at det gør nogen forskel i mine browsere

/morten



Philip Nunnegaard (07-04-2008)
Kommentar
Fra : Philip Nunnegaard


Dato : 07-04-08 14:41

<undertegnede@gmail.com> skrev i meddelelsen
news:264e6e92-d71b-4596-b17e-c351ec3728b6@j1g2000prb.googlegroups.com...

> Jeg har på fornemmelsen at billedet skal positioneres anderledes: Lige
> nu står der fx #pic right: 0 px; men egentlig skal det være længst til
> venstre hvis der er plads nok og forsvinde delvist hvis der ikke er
> plads nok. Har I nogen forslag til hvordan jeg løser det?

Jeps! Dér var den. Positioner i forhold til venstre kant i stedet for højre
kant.
I stedet for "right: 0;" (ved #pic) skriver du f.eks. "left: 620px;"
I hvert fald noget i den retning.

Når jeg foreslog at fjerne img-tagget helt og i stedet have det som
baggrundsbillede i div#pic, var det for at undgå, at der kom en ny vandret
scrollbar nederst på siden.
Men her er vi så ude i en nød, jeg ikke lige kan overskue at knække.

> Tak for offtoppic-tippet - altid rart at få anden respons. Jeg kan dog
> ikke se at det gør nogen forskel i mine browsere

Det gør det sådan set heller ikke, fordi de fleste browsere er fejltolerante
på dét punkt.
Validatoren laver bare vrøvl over det, og det sammen med en align i det
sidste img-tag er de eneste fejl i din kode (og her ser jeg bort fra TDCs
kode nederst, som du jo ikke kan gøre noget med uanset), så det ville være
synd ikke at rette det.
align-fejlen kan evt. klares ved at ændre doctypen til loose i stedet for
strict.


undertegnede@gmail.c~ (07-04-2008)
Kommentar
Fra : undertegnede@gmail.c~


Dato : 07-04-08 08:03


>
> Jeps! Dér var den. Positioner i forhold til venstre kant i stedet for højre
> kant.
> I stedet for "right: 0;" (ved #pic) skriver du f.eks. "left: 620px;"
> I hvert fald noget i den retning.

Men det løser jo ikke problemet med at jeg i vinduer større end fx
800x600 vil have billedet til at stå helt ude i højre side.
Billedet skal placeres længst til højre og hvis der ikke er plads til
det (fordi de to andre felter (menu og tekst) fylder mindst 626px)
skal kun så meget af billedet som kan være der vises.

Håber rigtig meget på flere forslag!

/morten

Jørgen Farum Jensen (07-04-2008)
Kommentar
Fra : Jørgen Farum Jensen


Dato : 07-04-08 16:36

undertegnede@gmail.com skrev:
> Hej....
>
> Jeg er 95% færdig med en hjemmeside - men har et stort problem, jeg
> håber I kan hjælpe med.
>
> Det drejer sig om hvordan siden vises når skærmstørrelsen kun er
> 800x600. Jeg vil gerne have at teksten i midten forbliver helt uden
> nogen horizontal scroll og det i stedet er billedet i højre side der
> gradvist forsvinder. (Således at det forsvinder fra højre - så fx kun
> An, Ve, Ko står tilbage).
>
> Link: http://home6.inet.tele.dk/compuart/hj/test.htm

Prøv følgende:

body {
font-family:georgia,arial,sans-serif;
background-color:#0c1c3d;
background-image: url(ana-kom-velf.gif);
background-position:37em 120px;
background-repeat:no-repeat;
margin:0;padding:0;
}
div#side {
width:35em;
margin:120px auto 0 0;
border:none;
padding:1em;
background-color:#fff; }


--

Med venlig hilsen
Jørgen Farum Jensen
Håndbog i webdesign: http://webdesign101.dk/wwwbog/udgave2/
Webdesign med stylesheets: http://webdesign101.dk/cssbog/
..

undertegnede@gmail.c~ (08-04-2008)
Kommentar
Fra : undertegnede@gmail.c~


Dato : 08-04-08 03:16

> Prøv følgende:
>
> body {
> font-family:georgia,arial,sans-serif;
> background-color:#0c1c3d;
> background-image: url(ana-kom-velf.gif);
> background-position:37em 120px;
> background-repeat:no-repeat;
> margin:0;padding:0;
> }
> div#side {
> width:35em;
> margin:120px auto 0 0;
> border:none;
> padding:1em;
> background-color:#fff; }
>

Mange tak for buddet - det løser desværre kun delvist problemet. Nu
forsvinder billedet når man scalerer ned - men det er ikke placeret
yderst til højre når man scalerer op...

Venstre felt skal have en fast bredde 226px;
Midterfeltet skal mindst være 400 px
Højre felt skal højest være 336px og forsvinde delvist hvis der ikke
er plads.

Håber virkelig I har flere bud...

/morten

Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408925
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste