Avatar billede mikkelraev Nybegynder
14. december 2007 - 23:11 Der er 6 kommentarer

Gode ideer mangel på løsninger css/html java etc.

Ja nu er jeg efterhånden løbet tør for gode ideer selv udover at lave om på selve designet,
Mit problem er som følger:
Jeg har en gradient der er reversed dvs den starter nede fra i et felt og går op i en sort farve, dette felt skal udvide sig når det bliver fyldt ud med informationer, den research jeg har lavet so far er at det kan man ikke i et divtag, man kan i et layer men det vil flytte sig i forhold til skærmopløsningen på klientens side. CSS kan lave en gradient men den kan ikke bruges i andet end windows, og mit site skulle gerne kunne ses i andre operativ systemer.

Sådan skal det se ud: http://www.houze.dk/niknak/design.jpg
Og så langt er jeg kommer: http://www.houze.dk/niknak

Det er den nederste grå boks som skal udvidde sig. Håber nogen kan hjælpe om så det er andet sprog end css og html så håber jeg på at få hjælp :)

Mange venlige hilsner
Mikkel Andersen
Avatar billede mall Nybegynder
15. december 2007 - 01:53 #1
Hmm..
Hvordan har du lavet billedet som er baggrunden der hvor der står nyeste forum indlæg og sådan?

For ville da mene man bare kunne klare den med et billede og noget css..
Avatar billede mikkelraev Nybegynder
15. december 2007 - 12:00 #2
Bare sat højden på dem og sat dem som baggrund i Divtagget men de skal jo ikk kunne udvide sig!
Avatar billede mall Nybegynder
15. december 2007 - 17:15 #3
Altså.. Måden jeg pejer at lave baggrunden, med en gradient. Det er at lave et lille billede, 5 px bredt, 200 px højdt.. Og så lave en gradient på det..

Hvis vi siger at det skal være en sort der går ned og blir hvid.. Så indsætter du det på din side, vælger at billedet skal gentages hen ad x-aksen. Laver baggrunds farven på div'en til hvid, sådan at billedet, når det slutter efter de 200 px, ser ud til stadig at fortsætte.
Avatar billede mikkelraev Nybegynder
16. december 2007 - 15:10 #4
Mall nu skal du jo tænke på at gradienten er reversed!
Avatar billede mall Nybegynder
16. december 2007 - 16:44 #5
Så sæt baggrundens position til at være i bunden..
Avatar billede peter369 Nybegynder
02. januar 2008 - 11:31 #6
Jeg ved ikke om du har fået det løst men.

Men der kan bruges java.

Der er en guide til det her.
http://osteele.com/sources/#javascript

Det kan godt tage lidt læsning for at få stå det.
Men kort og godt.

Du skal bruge de her 3 Java filer
  http://osteele.com/javascripts/behaviour.js
  http://osteele.com/sources/javascript/divstyle.js
  http://osteele.com/sources/javascript/gradients.js

Du har de her 3 settings

gradient-start-color: <value>;
gradient-end-color: <value>;
border-radius: <value>;

Så vide jeg kunne lige se skal du ikke have runde hjørner på 'border-radius:'

Et eks kan være.

Header:
<head>

...

<script type="text/javascript" src="behaviour.js"></script>
<script type="text/javascript" src="divstyle.js"></script>
<script type="text/javascript" src="gradients.js"></script>
<style type="text/css">
  .style {
    display: none
  }
  #box {
    width: 100%;
    height: 100%;
  }
</style>
</head>

Body:
<body>
<div class="style">
  #box {gradient-start-color: #AFAFAF; gradient-end-color: #767676; border-radius: 10;}
</div>
<table>
  <tr>
    <td rowspan="2" valign="top">
      <div id="box">
        <div style="padding-top: 13px; padding-right: 17px; padding-bottom: 13px; padding-left: 17px;" id="content">
          he he
        </div>
      </div>
    </td>
  </tr>
</table>
</body>

Det er mulige at bare bruge gradients.js men jeg kunne ikke få den til at fylde de 100 % ud.

Men man skal så kun indsætte gradients.js og indsætte

....
  <td rowspan="2" valign="top">
    <div id="box">
      <div style="padding-top: 13px; padding-right: 17px; padding-bottom: 13px; padding-left: 17px;" id="content">
        he he
      </div>
    </div>
    <script type="text/javascript">
      var box = document.getElementById('box');
      var style = {'gradient-start-color': 0xAFAFAF,
                  'gradient-end-color': 0x767676,
                  'border-radius': 10};
      OSGradient.applyGradient(style, box);
    </script>
  </td>
....

Jeg håber det løste dit problem :)
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
Kurser inden for grundlæggende programmering

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.

Du kan også logge ind via nedenstående tjenester