Søg
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 01:12 Der er 19 kommentarer og
1 løsning

Placering af et billede i % med begrænsning

Hej er det muligt at sætte et billede til fx top til 100% med en begrænsning på fx. 700px så hvis ens browser er minimeret til at kunne vise 400px i højden så ville billedet ikke kunne ses før man scroller ned til de 700px, og hvis browseren viser over 700px. i højden så vil billedet blive placeret helt nede i bunden

Ved godt det lyder pænt forvirrende :-)

min kode.
------------------------------
<html>
<head>
  <title>test</title>
  <link href="style/style.css" rel="stylesheet" type="text/css">
</head>

<style type="text/css">
#divlogo{position:absolute; width:10; left:50%; top:100%; z-index:10%; text-align: right}
  </style>

<body>

<div id="divlogo">
  <img src="logo.gif" border="0" alt="" width="21" height="99"></div>

</body>
</html>
Avatar billede roenving Novice
04. august 2003 - 01:18 #1
Er det margin-top:-100px; du vil have ?-)
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 01:19 #2
ja det er nok sådan noget lign. jeg er ude efter
Avatar billede clsc Praktikant
04. august 2003 - 01:19 #3
Denne her:

</head>

-skal du nok placere lige før <body> så din style blok ogso er inde i head-sektionen.

Ud over det forstår jeg ikke spørgsmålet, kan du uddybe?
Avatar billede roenving Novice
04. august 2003 - 01:23 #4
absolut positioneret med en relativ placering, men med begrænset relativitet
Avatar billede roenving Novice
04. august 2003 - 01:29 #5
-- jeg troede ikke før jeg prøvede, for jeg har før set lignende spørgsmål uden en løsning ...

-- og jeg tror nu at den eneste løsning er at bruge noget javascript ved resize, men det er irriterende at lave ...
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 01:30 #6
hmm jeg syntes bare ik lige jeg kan få det til at passe, det er lige som om den bare smider de 100% jeg så skriver ved toppen oven i hatten så den flyver alt for langt ned
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 01:31 #7
ja den metode du kom med der virker ik helt optimalt, men det var et forsøg værd;-)
Kender du et js. til det?
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 01:37 #8
hmm kan man lave noget som hedder top:baseline; bare på en anden måde? for så vil det virke med din margin-top du kom med vil jeg tro;-)
Avatar billede roenving Novice
04. august 2003 - 01:40 #9
baseline findes såvidt jeg ved kun til vertical-align -- og også ifølge W3C, som ovenikøbet siger at det må man ikke bruge på div's og sådan noget ...

-- forøvrigt er dit z-index:10% også noget vrøvl ifølge standarden, men det kan jo altid rettes !-)
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 01:42 #10
ja det ved jeg, det er bare noget som jeg har kopieret lidt hurtigt fra en anden kode jeg havde, så jeg har ik rigtigt redigeret så meget i den, jeg skulle bare se om det kunne lade sig gøre først;-)
Avatar billede roenving Novice
04. august 2003 - 01:52 #11
Forøvrigt var det her jeg kiggede efter:
http://www.w3.org/TR/REC-CSS2/propidx.html ...

-- prøver lige at se på det der med et javascript !-)
Avatar billede roenving Novice
04. august 2003 - 02:47 #12
-- og det er virkelige irriterende at arbejde med denne type scripts -- jeg for selvfølgelig vild i logikken et par gange, men nu virker window-resize ihvertfald og onscroll virker også, men den findes kun for IE, så det er kun tygget på den ...

<html>
<head>
  <title>test</title>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
  <link href="style/style.css" rel="stylesheet" type="text/css">
<script language="javascript" type="text/javascript">
function posDiv(){
  var elm = document.getElementById('divlogo');
  var sH = document.body.scrollHeight;
  var sT = document.body.scrollTop;
  var oH =document.body.offsetHeight;
  newY = (800>sH||800>oH+sT)?700:(sT+oH>sH)?sH - 100:sT+oH - 100;
  elm.style.top = newY;
}
</script>

<style type="text/css">
#divlogo{position:absolute; width:10; left:50%; top:700px; margin-bottom:0px; z-index:10; text-align: right}
  </style>
</head>

<body onresize="posDiv()" onload="posDiv()" onscroll="posDiv()">
<div style="float:left;width:25px;heigh:1000px;border:1px solid black"> <img src="logo.gif" border="0" alt="" width="25" height="1000">
</div>
<div id="divlogo">
  <img src="logo.gif" border="0" alt="" width="21" height="99"></div>

</body>
</html>
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 16:15 #13
Takker du det virker helt perfekt, har lige prøvet i NetCaptor og det virker også ganske glimrende der.
Avatar billede roenving Novice
04. august 2003 - 16:17 #14
-- Muy bueno '-)
Avatar billede roenving Novice
04. august 2003 - 16:44 #15
-- og tak for points ;~}
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 17:35 #16
Hmm jeg har bare lige et andet problem med det nu:-(
vil gerne give nogle points for det, det drejer sig om at det logo som du har lavet den kode til, skal være et bundlogo af siden, og så skulle det gerne være centreret, det er heller ik noget problem men nu er det jo fx 500px bredt, og når nu jeg centrerer det så er det jo kun begyndelsen af billedet som kommer til at være i midten så det kommer til at sidde helt ude i højre side, men så kan man vel bare sætte den til -250px så det kommer til at passe med midten, men det er bare lige hvordan jeg får skrevet det rigtigt i koden, og det tænkte jeg at du måske vil hjælpe mig med;-)
Avatar billede roenving Novice
04. august 2003 - 18:01 #17
#divlogo{position:absolute; width:10; left:50%; top:700px; margin-bottom:0px; margin-left:-250 px; z-index:10; text-align: right}
Avatar billede jesper_r_c Nybegynder
04. august 2003 - 18:09 #18
LOL virkelig ik andet, men okay det virker jo fint nok, så det skal du da have lidt points for, jeg opretter et nyt spm. som hedder "Points til roenving" ;-)
Avatar billede kenp Novice
04. august 2003 - 18:15 #19
roenving -> du skal hente point her!
http://www.eksperten.dk/spm/383606
Avatar billede roenving Novice
04. august 2003 - 23:42 #20
:-)
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
I går 19:53 installer mange programmer på en gang Af Overgaard1654 i Andet software
I går 17:48 Min hp Officejet pro 7740 skærer det nederste af billedet i word Af rosmarin i Printere
I går 13:13 Batch OCR Af KurtG i Billedbehandling
I går 10:42 AI integreret i Access Af per2edb i Access
04/0409:43 AI google.com Af Peter Olsen i Andre onlineløsninger
White papers
Flere white papers »