Søg
Avatar billede downloading Nybegynder
02. februar 2005 - 18:24 Der er 24 kommentarer og
1 løsning

Min baggrundsfarve går ud over min celle?

Jeg har en side som ser sådan her ud:

<link rel="stylesheet" href="lol.css" type="text/css" media="all">

<table>
<tr>
<td width="300">
<div id="quotameter" class="smallroundedmodule lowquota">
<div class="first">
<span class="first"></span>
<span class="last"></span>
</div>
<div>
<span id="quotausagebar">
<span class="first" style="width:50%;"></span>
<span class="last">4% of 250.0MB </span>
</span>
</div>
<div class="last">
<span class="first"></span>
<span class="last"></span>
</div>
</div>

                                                       
</td>
</tr>
</table>

Lol.css ser sådan her du:

div.lowquota span#quotausagebar span.first{background:#FFCC00  repeat-x center left;}
#quotausagebar{position:relative;display:block;border-style:solid;border-width:1px;margin:2px 4px;height:1em;}
#quotausagebar span.first{position:absolute;height:100%;}
#quotausagebar span.last{width:100%;text-align:center;font:bold 78% verdana;}
.smallroundedmodule{padding:0 4px;}
html>body .smallroundedmodule div{height:auto;}
.smallroundedmodule div div{border-style:none;border-width:0;margin:0 4px;}
.smallroundedmodule .first, .smallroundedmodule .last{position:relative;height:4px;margin:0;}       
.smallroundedmodule .first{border-width:1px 0 0 0;}
.smallroundedmodule .last{border-width:0 0 1px 0;}
.smallroundedmodule .first .first, .smallroundedmodule .first .last{margin-top:-1px;}
.smallroundedmodule .last .first, .smallroundedmodule .last .last{margin-bottom:-1px;}
.smallroundedmodule .first .first, .smallroundedmodule .first .last, .smallroundedmodule .last .first, .smallroundedmodule .last .last{border:0;position:absolute;z-index:1;width:4px;background-repeat:no-repeat;}
.smallroundedmodule .first .first, .smallroundedmodule .last .first{margin-left:-4px;}
.smallroundedmodule .first .last, .smallroundedmodule .last .last{right:0px;margin-right:-4px;}

Hvorfor ser det så grimt ud??

Den der #FFCC00 går ned over cellen..
Avatar billede olebole Juniormester
02. februar 2005 - 19:11 #1
<ole>

Prøv med et link til siden

/mvh
</bole>
Avatar billede downloading Nybegynder
02. februar 2005 - 19:29 #2
http://www.downloading.dk/sider/karakter/4.htm
Avatar billede olebole Juniormester
02. februar 2005 - 19:59 #3
Punkt 1 - når du bruger CSS - er at skrive noget valid HTML, der kan formateres.
Prøv til en start at skrive det ind i et validt HTML-dokument. Glem ikke en DTD og vel at mærke en fuld DTD ... f.eks:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

Så ser dit dokument nok helt anderledes ud  ;o)
Avatar billede downloading Nybegynder
02. februar 2005 - 20:18 #4
hmm.. ja, det fuckede det lidt op.. :-)

Nu står teksten ikke i midten.. Men det hjalp ikke på mit problem..
Avatar billede olebole Juniormester
02. februar 2005 - 20:21 #5
Er dit problem det samme, eller har det ændret sig. Hvad er det præcist, du gerne vil og hvordan skal resultatet se ud?
Avatar billede downloading Nybegynder
02. februar 2005 - 20:24 #6
Den der orange streg der er, den vil jeg gerne have til ikke at gå ned under cellens bund (den der sorte streg i bunden)..
Avatar billede olebole Juniormester
02. februar 2005 - 20:39 #7
Da din kode er ekstremt rodet - og umiddelbart med yderst uhensigtsmæssig CSS - vil jeg gerne skrive en ny og mere overskuelig kode ... men det kræver, jeg ved, hvad meningen er  :)
Avatar billede downloading Nybegynder
02. februar 2005 - 20:45 #8
Det ville jeg være så yderst taknemmelig for! Du kan godt få et lilel link eller noget hvis det kan hjælpe, men jeg har sku ingen penge...

Det skal være en celle med sort kant.

i den celle skal der så komme en streg ud fra venstre mod højre, og dens længde skal man kunne ændre i HTML'en..

Mid i cellen skal der så stå en tekst.. :-)

1000 TAK!
Avatar billede olebole Juniormester
02. februar 2005 - 20:57 #9
Penge er altid dejlige at have/få, men her hjælper jeg kun mod tak - så det skal du ikke tænke på  ;o)
Jeg skal lige lave noget kaffe - så skal jeg kikke på det ...
Avatar billede olebole Juniormester
02. februar 2005 - 21:20 #10
Prøv dette og se, om det er noget, du kan bruge:

<style type="text/css">
.bar {
    position: relative;
    width: 300px;
    height: 20px;
    border: 1px solid black;
    background-color: white;
}
.bar #band {
    position: absolute;
    width: 0px;
    height: 20px;
    background-color: yellow;
    z-index: 1;
}
.bar #barTxt {
    position: absolute;
    width: 100%;
    margin-top: 2px;
    font: bold 13px arial, sans-serif;
    color: black;
    text-align: center;
    z-index: 2;
}
</style>

<div class="bar">
    <div id="barTxt">&nbsp;</div>
    <div id="band"></div>
</div>

<script type="text/JavaScript">
function setBar(proc, tot) {
    document.getElementById('band').style.width = proc + "%";
    document.getElementById('barTxt').innerHTML = proc + "% af " + tot + "MB";
}
</script>

<button onclick="setBar(10, 250.2)">Set Width = 10%</button>
<button onclick="setBar(50, 250.2)">Set Width = 50%</button>
<button onclick="setBar(80, 250.2)">Set Width = 80%</button>
Avatar billede olebole Juniormester
02. februar 2005 - 21:47 #11
Du kunne også gøre det lidt mere OS-agtigt. Med denne kode tilpasser farverne sig til det tema, der er valgt i Windows - og teksten farves, som man er vandt til fra Windows progress-barer ... prøv det  :)

<style type="text/css">
.bar {
    position: relative;
    width: 300px;
    height: 20px;
    border: 1px solid black;
    background-color: white;
    font: bold 13px arial, sans-serif;
}
.bar #band {
    position: absolute;
    width: 0px;
    height: 20px;
    overflow: hidden;
    z-index: 2;
    background-color: highlight;
}
.bar #band div {
    position: absolute;
    width: 300px;
    height: 20px;
    margin-top: 2px;
    color: highlighttext;
    text-align: center;
}
.bar #barTxt {
    position: absolute;
    width: 100%;
    margin-top: 2px;
    z-index: 1;
    color: black;
    text-align: center;
}
</style>

<div class="bar">
    <div id="barTxt">&nbsp;</div>
    <div id="band">
        <div id="barTxt2">&nbsp;</div>
    </div>
</div>

<script type="text/JavaScript">
function setBar(proc, tot) {
    document.getElementById('band').style.width = proc + "%";
    document.getElementById('barTxt').innerHTML = proc + "% af " + tot + "MB";
    document.getElementById('barTxt2').innerHTML = proc + "% af " + tot + "MB";
}
</script>

<button onclick="setBar(10, 250.2)">Set Width = 10%</button>
<button onclick="setBar(50, 250.2)">Set Width = 50%</button>
<button onclick="setBar(80, 250.2)">Set Width = 80%</button>
Avatar billede olebole Juniormester
02. februar 2005 - 21:49 #12
Du kan evt. skifte systemfarverne 'highlight' og 'highlighttext' ud med nogle efter dit eget ønske  :)
Avatar billede downloading Nybegynder
02. februar 2005 - 21:55 #13
Over nice!

Men jeg syntes stadig der er det der porblem med at de over lapper hinanden (Den blå tykke streg og cellekanten - den sorte)..
Avatar billede olebole Juniormester
02. februar 2005 - 22:12 #14
Ikke i IE, Moz eller Opera  :)
Avatar billede downloading Nybegynder
02. februar 2005 - 22:15 #15
okay, nu kommer der en dårlig kommentar:

Jeg er sikker på den gjorde det før.. Men nu har jeg prøvet igen, og det virker! :-)

1000 tak...!

vil du ikke lige skrive et svar? :-)
Avatar billede olebole Juniormester
02. februar 2005 - 22:17 #16
Det kan måske være fordi, din browser har hentet en cached version af siden  :)

For andre, der måtte være interesseret i den endelige løsning, har jeg lagt en version her:
  http://www.tjenester.dk/x-codes.dk/eksperten/bar/

- og selvtak  ;o)
Avatar billede olebole Juniormester
02. februar 2005 - 22:20 #17
PS: Når du en anden gang tester HTML/CSS/JavaScript, så sørg altid for, du skriver koden i et validt HTML-dokument ... dvs, med DTD og alle nødvendige HTML-tags (<html><body> ... osv, osv)  ;o)
Avatar billede downloading Nybegynder
02. februar 2005 - 22:21 #18
Jeg skal ikke bruge det der java script til noget..

Hvor skal jeg indsætte længden af den der blå streg? kan den indsættes som px?

Manget tak.. :-)
Avatar billede downloading Nybegynder
02. februar 2005 - 22:22 #19
sorry.. Har set det... Sorry..

Tak..
Avatar billede downloading Nybegynder
02. februar 2005 - 22:25 #20
hmm.. nu har jeg ændret..

bar {
    width: 100px;

bu bliver teksten ikke hvis når den kommer ind over?? Noia..
Avatar billede olebole Juniormester
02. februar 2005 - 22:29 #21
;o)

.bar #band div {
    position: absolute;
    width: 100px;
    height: 20px;
    margin-top: 2px;
    color: highlighttext;
    text-align: center;
}
Avatar billede olebole Juniormester
02. februar 2005 - 22:29 #22
De to bredder skal følge hinanden
Avatar billede downloading Nybegynder
02. februar 2005 - 23:36 #23
Bare rolig, det er det sidste jeg vil vide..

Hvordan får jeg hele den sorte box til at stå i midten? :-)
Avatar billede olebole Juniormester
03. februar 2005 - 00:58 #24
Et element skulle efter CSS-standarden kunne centreres med en side-margin i begge sider med værdien 'auto':
  <div style="margin:0px auto">blabla</div>

- eller i vores stylesheet:

.bar {
    position: relative;
    width: 300px;
    height: 20px;
    margin: 0px auto;
    border: 1px solid black;
    background-color: white;
}

Det virker dog ikke i IE. Der skal du have fat i elementets omkransende element (i de eksempler, jeg skrev, er det omkransende element body'en) og sætte 'text-align' til 'center':

body {
  text-align: center;
}

Ligger 'dyret' i en tabel-celle, er det naturligvis cellen, der skal have 'text-align:center'  ;o)

Det skal lige siges, at i følge CSS-standarden skal 'text-align:center' _kun_ centrere teksten i elementet - ikke dets sub-elementer. Det har man bare glemt at fortælle IE  :)
Avatar billede olebole Juniormester
03. februar 2005 - 01:06 #25
Men ups ... så skal du lige ophæve centreringen inde i klassen 'bar', da den og dens sub-elemeter ellers arver centreringen og bringer helt kage i det hele:

.bar {
    position: relative;
    width: 100px;
    height: 20px;
    margin: 0px auto;
    border: 1px solid black;
    background-color: white;
    font: bold 13px arial, sans-serif;
    text-align: left;
}

- taget fra eksemplet (02/02-2005 21:47:40)
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 dag 12:21 Er det svindel eller fra Microsoft Af mort1 i Andet sikkerhed
I går 11:56 Er det muligt at lave sin egen webserver i boligforening? Af Strawberry i Cloudtjenester
14/0810:21 Ny printer, men hvilken Af mort1 i Printere
13/0819:41 USB på Linux Af Uvanga i Linux
12/0818:26 Hvilken type mus Af mort1 i PC
White papers
Flere white papers »