Søg
Avatar billede sjh Nybegynder
05. december 2004 - 19:54 Der er 15 kommentarer og
1 løsning

width på background image

hvordan kan jeg sette  background-image: url("titlebar.gif"); width til 100% ??

altså på samme måde som hvis man skriver <img src="...gif" width="100%">


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
  <head>
    <title>Window test</title>
    <style type="text/css">
      <!--
      .TitleBar {
        font: Caption;
        color: CaptionText;
        padding: 3px;
        margin: 0px;
        cursor: default;
        width:100%;
        height:18px;
        background-image: url("titlebar.gif");
      }
      //-->
    </style>
  </head>
  <body>
    <table border="0" width="400" cellpadding="0" cellspacing="0">
      <tr>
        <td class="TitleBar">caption</td>
      </tr>
      <tr>
        <td>tekst</td>
      </tr>
    </table>
  </body>
</html>
Avatar billede skovenborg Nybegynder
05. december 2004 - 19:59 #1
nej, ikke endnu i hvert fald. CSS3 skulle give mulighed for dette, men den er først færdig om lang tid, og det tager endnu længere tid at få browserne med. Så du bliver nok nødt til at bruge et almindeligt billede som baggrund eller lave dit baggrundsbillede stort nok.
Avatar billede sjh Nybegynder
05. december 2004 - 20:07 #2
okææ..

Jeg har godt nok den her som kan det jeg skal bruge.. men den virker desværre ikke i alle browser..

Filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=1 ,startColorStr=#0A246A ,endColorStr=#A6CAF0);

nogle som har et bud til hvordan jeg kan gøre det..
Avatar billede olebole Juniormester
05. december 2004 - 23:16 #3
<ole>

Du kan lave en gradient med 1px højde som en .jpg - og strække den med width. Property'en filter er en proprietær MS-ting og virker ikke i andre browsere.

/mvh
</bole>
Avatar billede sjh Nybegynder
05. december 2004 - 23:27 #4
øhh det kan jeg jo ikke bruge til noget så... det skulle gerne virke i IE.x og NS.x osv..
Avatar billede olebole Juniormester
05. december 2004 - 23:33 #5
Ja, det gør det sandelig også  :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Window test</title>
    <style type="text/css">
      <!--
      .TitleBar {
          position: relative;
        font: Caption;
        color: CaptionText;
        padding: 3px;
        margin: 0px;
        cursor: default;
        width:100%;
        height:18px;
        background-image: url("titlebar.gif");
      }
      //-->
    </style>
  </head>
  <body>
    <table border="0" width="400" cellpadding="0" cellspacing="0">
      <tr>
        <td class="TitleBar"><div style="position:relative;height:100%">
            <img style="position:absolute;width:100%;height:100%;z-index:0" src="grad.jpg">
            <div style="position:absolute;z-index:1">caption</div></div></td>
      </tr>
      <tr>
        <td>tekst</td>
      </tr>
    </table>
  </body>
</html>

PS: Husk, URL'en i DTD'en - da IE ellers ikke overholder CSS-standarden  ;o)
Avatar billede olebole Juniormester
05. december 2004 - 23:36 #6
Oooops ... du behøver ikke 'position: relative' i TitleBar-klassen  :)

I øvrigt tror jeg ikke, det er #0A246A, du ønsker at bruge som startfarve i din gradient ... det er nok #000080, hvis det skal ligne Win-Classic.
Avatar billede sjh Nybegynder
06. december 2004 - 00:02 #7
Jeg har godt nok fået det til at virke, med lidt mindre kode.. så nu ved jeg ikke hvad jeg skal bruge.. :D

<html>
  <head>
    <title>Window test</title>
    <style type="text/css">
      <!--
      .TitleBar {
        position: relative;
        font: Caption;
        color: CaptionText;
        padding: 3px;
        margin: 0px;
        cursor: default;
      }
      //-->
    </style>
  </head>
  <body>
    <table border="0" width="400" cellpadding="0" cellspacing="0">
      <tr>
        <td class="TitleBar">
          <div style="position: absolute; top: 5px; left: 5px;">caption</div>
          <img src="titlebar.gif" height="18" width="100%" border="0">
        </td>
      </tr>
      <tr>
        <td>tekst</td>
      </tr>
    </table>
  </body>
</html>

#0A246A -> jo det er den farve.. har taget et print-screen.. ;)

ole smid et svar så er der point..
Avatar billede olebole Juniormester
06. december 2004 - 00:18 #8
Det kommer lidt anpå, hvad vi taler om. Systemfarverne 'activecaption' og 'highlight' havde under 'ægte' Win-Classic (før XP) værdien #000080 - men jeg kan godt se, XP's emulering af Win-Classic åbenbart kun er tilnærmet og i stedet bruger #0A246A  :)

Ja, dit eksempel virker, sålænge IE ikke overholder CSS-standarden - og det gør den ikke uden den DTD, jeg viste dig. Som du ser, virker det heller ikke synderlig optimalt i Moz  ;o)
Avatar billede olebole Juniormester
06. december 2004 - 00:19 #9
... og et svar  :)
Avatar billede olebole Juniormester
06. december 2004 - 00:20 #10
Vedr. DTD, så læs lige denne side:
  http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp
Avatar billede sjh Nybegynder
06. december 2004 - 00:28 #11
behøver der at stå en url??

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
Avatar billede olebole Juniormester
06. december 2004 - 00:39 #12
Ja ... læs nu siden  ;o)
Avatar billede sjh Nybegynder
06. december 2004 - 01:44 #13
hmm ja.. jeg kan godt se det..
  men nu virker den her ikke (style="width:183;")..
  <select name="select1" size="1" style="width:183;">
Avatar billede sjh Nybegynder
06. december 2004 - 01:51 #14
ha ha skulle bare have px på..
style="width:183px;"
Avatar billede olebole Juniormester
06. december 2004 - 01:57 #15
Ja, nu skal du pludselig til at skrive, hvad du mener - og det, du mener, skal være i overensstemmelse med CSS-standarden  ;o)
Avatar billede sjh Nybegynder
06. december 2004 - 03:22 #16
faktis er det også en del nemmere.. så ved man at det virker :D
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 16:51 Links m.m. virker ikke Af Kjeld Aage Christiansen i PC
I dag 11:04 Outlookproblem Af g91 i E-mail programmer
I dag 09:21 Firefox - Bøvl med idelig genbekræftelse af identitet Af andershl i Browsere
I går 15:14 Sætte billeder ind i google sheets ark ud fra elev nummer Af lurup i Excel
16/0822:58 Kan man undgå at få vist referer når der klikkes på links Af Strawberry i Browsere
White papers
Flere white papers »