CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg
Cookie ikon
Avatar billede dorgbar Nybegynder
28. december 2004 - 15:54 Der er 5 kommentarer og
1 løsning

længde/højde angivet i % og px

jeg vil gere have at vide om det er muligt at angive en længde på et objekt i både pixels og % så man f.eks kan lave et tag
<tag style="Width: 100% -20px">
så tagget altså fylder hele skærmen udover 20 pixels.
Avatar billede frol Nybegynder
29. december 2004 - 00:52 #1
Hvad med
width: 100%;
margin: 0 20px; ?
Avatar billede roenving Novice
29. december 2004 - 12:34 #2
>>frol

-- ikke så god en ide, da elementet så vil have en bredde på 100% og så vil de margin komme udenpå, så ialt vil bredden blive 100% + 40px !-)


Men et lille trick kan klare den:

<div style="margin:20px 20px;">
  <div style="background:green;">
    Denne div er 100% bred - 40px
  </div>
</div>

-- som det fremgår kan du ikke umiddelbart lave en ting, som er 100% høj, men så kan man tricke endnu mere:

<div style="position:relative;margin:0 20px;border:0px;height:100%;">
  <div style="background:green;height:100%;z-index:1;">
    <div style="height:20px;"></div>
    Denne div er 100% bred - 40px og ser ud som om den er 100% - 40px høj
    <div style="height:20px;"></div>
  </div>
  <div style="height:20px;position:absolute;top:0px;background:white;z-index:2;width:100%;"></div>
  <div style="height:20px;position:absolute;bottom:-1px;background:white;z-index:2;width:100%;"></div>
</div>

(Kiggede ikke så meget på det, at jeg fandt ud af de -1px, men det er der nok en forklaring på !-)

-- det er i begge eksempler en forudsætning, at du har noget, som ligner dette med i dit stylesheet:

html,body{
  margin:0;
  padding:0;
  border:0;
  height:100%;
}

-- og en fuldt kvalificeret doctype inklusive dtd-link, så f.eks.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 strict//EN"
    "http://www.w3.org/TR/html401/strict.dtd">
<html>
<head>
<title>Fuld højde simpelt</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta name="keywords" content="roenving,http://www.eksperten.dk/spm/497362">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;padding:0px;}
#banner{position:absolute;height:125px;width:100%;background:yellow;z-index:1;}
#top1{width:100%;height:50px;background:#770;}
#top2{width:100%;height:75px;background:#707;}
#main{height:100%;background:green;}
#spacer{height:125px;}
#bottom{position:absolute;bottom:0px;height:125px;width:100%;background:yellow;z-index:1;}
#bund1{width:100%;height:25px;background:#770;}
#bund2{width:100%;height:100px;background:#707;}
</style>
</head>
<body>
<div id="banner">
  <div id="top1">top1</div>
  <div id="top2">top2</div>
</div>
<div id="main">
  <div id="spacer">Usynligt</div>
  Hovedside</div>
<div id="bottom">
  <div id="bund1">bund1</div>
  <div id="bund2">bund2</div>
</div>
</body>
</html>
Avatar billede dorgbar Nybegynder
29. december 2004 - 20:18 #3
tjaa ser ud til at virke fint, fik også lige nogle andre gode ting uyd af din kode :)  height:100%; løste nogle andre problemmer jeg havde :D så bare opret svar
Avatar billede frol Nybegynder
29. december 2004 - 22:57 #4
>>roenving
Jeez! den tænkte jeg ikke rigtigt igennem, hvad :-!

Flotte løsninger!
Den der -1px ting, ses "kun" i IE6, ikke i Gecko'erne...
Avatar billede roenving Novice
30. december 2004 - 12:31 #5
Velbekomme '-)
Avatar billede roenving Novice
16. maj 2005 - 16:42 #6
-- og tak for point ;~}
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 17 10/09/202515:07 10/09/202519:19
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
12/0915:18 Valg af vejrstation Af KurtG i Andet hardware
12/0914:02 Lenovo Yoga hænger i opstart. Af valby i PC
12/0911:40 Fjerne kontoer i Teams Af Klaus Fagerlund i Andet software
12/0909:09 Excel hjælp Af rudbech i Excel
11/0917:10 Joomla artikler Af rmadsen80 i CMS-systemer
White papers
Flere white papers »


Premium
Teaser billede
Forskere skabte et socialt medie befolket af AI-bots: Derfor er det nærmest umuligt at lave sunde platforme
Læs mere »
Uenighed blandt EU-lande kan betyde død for kontroversielt chat-forslag: Danske topforskere advarer mod konsekvenserne
Danske it-konsulenter er under hårdt pres: Hvad er de egentlig værd?
Erik Damgaard vil sælge sit it-guldæg - prisen kan runde to milliarder kroner
Se alle »
Computerworld
Teaser billede
Så meget kommer de til at koste: Apple løfter sløret for helt nye iPhones, Apple-ure og AirPods
Læs mere »
Alt om Apples spritnye iPhone Air – og hvorfor den nok vil floppe
Microsoft åbner for kildekoden til banebrydende program: Et af de få, som Bill Gates selv har kodet
Sådan kan du pludselig på en enkel måde hælde en halv terabyte ekstra RAM i din arbejdsmaskine
Se alle »
CIO
Teaser billede
Er vokset 261 procent på ét kvartal: "Vi oplever en massiv interesse. Kunderne vil have kontrollen tilbage"
Læs mere »
De gyldne tider som it-konsulent er forbi: Noget er i gang med at ødelægge den guldrandede forretningsmodel
Microsoft kalder sine ansatte tilbage på kontoret: Så mange dage om ugen skal de mindst være tilstede
Skynd dig at opdatere: Microsoft har opdaget 86 sårbarheder - flere af dem er alvorlige
Se alle »
Job & Karriere
Teaser billede
Tryg skiller sig af med 225 it-medarbejdere: Outsourcer stor del af sin it-drift til indere
Læs mere »
Lille dansk it-virksomhed fra Vanløse lander drømmekontrakt, der rækker langt ind i stifterens pension
Her er fidusen: Sådan fastholder KMD og Twoday deres it-folk i lang tid
Novo Nordisks CIO og digitale topchef, Anders Romare, forlader selskabet
Se alle »
White paper
Teaser billede
Undgå at printeren bliver svageste led i sikkerheden
Læs mere »
Tidsbegrænset kampagne: Overvejer du at udskifte eller tilføje printere i din forretning? Vi kan tilbyde én eller flere maskiner gratis
Få automatisk styr på alle virksomhedens persondata
Tænk nyt: Mød et stærkt oursourcing-alternativ
Se alle »

Events
Flere events »
White papers
Flere white papers »
IT-Kurser
Se alle vores it-kurser »