Avatar billede voller Nybegynder
16. november 2003 - 22:52 Der er 11 kommentarer og
1 løsning

Maksimal bredde på div?

Hej eksperter.


Nu har jeg nørklet med det et stykke tid: Hvordan får man en div til at være så bred som den plads der er til rådighed? Jeg har forsøgt med width: auto; og det går også fint nok i IE6, men princippet fejler i Mozilla, Opera og
sikkert flere andre browsere.

Et eksempel: http://voller.dk/DivTest.htm
Konceptet er, at jeg har tre div-bokse.
Den grå kasse fungerer om en slags container for de to andre kasser. Dens bredde er 80%, sådan at den skalerer op og ned i bredde alt efter dens skærmplads der er til rådighed hos klienten.
Den røde kasse fungerer som menu og har en fast bredde på 140px + 2 gange 15px i padding. Godt nok.
Den grønne kasse er så problemet. Den skal have en variabel bredde, der gerne skulle være præcis lige så bred som den plads der er til rådighed i den grå kasse, minus den samlede bredde af den røde menu. Altså sådan at den røde og grønne kasse kan ligge med siden af hinanden i den grå kasse og ikke over eller under hinanden. Hvordan sætter man sådan en bredde?

Som jeg har sat bredden nu med auto, virker det helt perfekt i IE6 (måske er det rent teknisk forkert som det bliver vist, men æstetisk er det rigtigt), mens der er problemer i Opera og Mozilla, sikkert plus andre eller ældre browsere.. Test selv på den givne URL, eller se her:
http://www.voller.dk/DivIE6.gif
Det er, som jeg gerne vil have siden til at se ud.

I Opera er siden sådan her, med den grønne kasse under den røde:
http://www.voller.dk/DivOpera.gif

Mozilla har noget der der minder om Opera, men mangler den grå baggrund:
http://www.voller.dk/DivMozilla.gif

Igen: Hvordan skal man sætte bredden på den grønne kasse?



Mvh. Voller.
Avatar billede bearhugx Nybegynder
16. november 2003 - 23:10 #1
har du prøvet

<div style="width: 100%;">...</div>
Avatar billede voller Nybegynder
16. november 2003 - 23:21 #2
Nej, det vil jo bevirke at den grønne kasse får den samme bredde, som den kasse den ligger inde i. Dvs. de grønne og den grå kasse vil blive lige lange, og det vil jo ikke løse problemet...

BTW...: "Kasse" er dog et ualmindeligt grimt ord. Hvordan snakker man om <div> i dagligdags tale? :-)
Avatar billede foxy_lady Nybegynder
16. november 2003 - 23:26 #3
boks tror jeg
Avatar billede bearhugx Nybegynder
16. november 2003 - 23:26 #4
"Kasse" er dog et ualmindeligt grimt ord. Hvordan snakker man om <div> i dagligdags tale?
  >> blok-element

i modsætning til SPAN som normalt er et inline-element (med mindre man sætter det anderledes via display: none/block/inline etc.


hvis jeg forstår ret, så skal den grønne kasse derved have bredden 100%-(80%+170px) ???
Avatar billede bearhugx Nybegynder
16. november 2003 - 23:34 #5
er igang med en lille omskrivning af din css - for jeg plejer at få det til at virke i Mozilla uden problemer

giv mig lige nogle minutter :-)
Avatar billede sn0wflake Nybegynder
16. november 2003 - 23:36 #6
Div omtales bare "div" :) Jeg er rimelig sikker på at div betyder "division", altså en del.
Din side virker desværre ikke korrekt i Mozilla 1.5 (http://www.mozilla.org).

Lige en kommentar til sidst. Du kan sikkert ikke få en ældre browser end Internet Explorer for tiden. Mozilla og Opera opdateres konstant i modsætning til Internet Explorer der kun fejlrettes for sikkerhedshuller. Viva Mozilla :)
Avatar billede bearhugx Nybegynder
16. november 2003 - 23:45 #7
Viva notepad - og manuel indents  - her er min opdaterede version - der er nogle rettelser til din css - f.eks. kan et float-left og et float-right ikke stå overfor hinanden - derfor er det faktisk Mozilla, som har renderet rigtigt denne gang - du har simpelthen skrevet noget andet end hvad du egenligt mente ...


Nuvel - til det interessante  -KODEN :-)

<html>
  <head>
    <style>
      body {
        margin: 0;
        padding-top: 50px;
        text-align: center;
      }

      #mainHolder {
        width: 80%;
        margin: auto;
        background-color: silver;
      }

      #menuHolder {
        float: left;
        width: 140px;
        background-color: red;
        text-align: left;
      }

      #textHolder {
        padding: 15px;
        margin-left: 140px;
        background-color: cyan;
        text-align: justify;
      }
    </style>
  </head>

  <body>
    <div id="mainHolder">
      <div id="menuHolder">
        <ul>
          <li>Punkt 1</li>
          <li>Punkt 2</li>
          <li>Punkt 3</li>
          <li>Punkt 4</li>
          <li>Punkt 5</li>
        </ul>
      </div>
      <div id="textHolder">
        <p>Jeg er enig med dig i, at man ikke b&oslash;r placere alt for store objekter i Session-variable, men du har l&aelig;st forkert i min kommentar, for det er ikke DataGrid'et, jeg ville gemme, men DataSet'et.</p>
        <p>I det eksempel i artiklen, bliver hele database-queryen k&oslash;rt forfra hver gang man page'r, og generelt er det en d&aring;rlig ide rent performancem&aelig;ssigt at hente de samme data flere gange, for databasetilgang er typisk de tungeste operationer, der sker i l&oslash;bet af afviklingen af en webside. Min ide er, at man gemmer DataSet'et i en Session-variabel f&oslash;rste gang, og s&aring; bind'er Session-variablen til DataGrid'et. Det giver maksimal performance. Generelt ang&aring;ende Session-variable er min holdning, at disse er klart at foretr&aelig;kke til parameteroverf&oslash;rsel fra aspx-side til aspx-side frem for QueryString-parametre. Der er mange grunde til at jeg har den holdning, men de vigtigste er, at s&aring; slipper man for grimme URL'er p&aring; sit site, og man slipper for at en bruger bookmark'er en side og f&aring;r hentet "gammel" data frem. En ekstra bonus ved at anvende Session-variable i stedet for QueryString-parametre er, at f&oslash;lsomme data aldrig forlader serveren.</p>
        <p>Jeg er enig med dig i, at man ikke b&oslash;r placere alt for store objekter i Session-variable, men du har l&aelig;st forkert i min kommentar, for det er ikke DataGrid'et, jeg ville gemme, men DataSet'et.</p>
        <p>I det eksempel i artiklen, bliver hele database-queryen k&oslash;rt forfra hver gang man page'r, og generelt er det en d&aring;rlig ide rent performancem&aelig;ssigt at hente de samme data flere gange, for databasetilgang er typisk de tungeste operationer, der sker i l&oslash;bet af afviklingen af en webside. Min ide er, at man gemmer DataSet'et i en Session-variabel f&oslash;rste gang, og s&aring; bind'er Session-variablen til DataGrid'et. Det giver maksimal performance. Generelt ang&aring;ende Session-variable er min holdning, at disse er klart at foretr&aelig;kke til parameteroverf&oslash;rsel fra aspx-side til aspx-side frem for QueryString-parametre. Der er mange grunde til at jeg har den holdning, men de vigtigste er, at s&aring; slipper man for grimme URL'er p&aring; sit site, og man slipper for at en bruger bookmark'er en side og f&aring;r hentet "gammel" data frem. En ekstra bonus ved at anvende Session-variable i stedet for QueryString-parametre er, at f&oslash;lsomme data aldrig forlader serveren.</p>
      </div>
    </div>
  </body>
</html>
Avatar billede bearhugx Nybegynder
16. november 2003 - 23:46 #8
Den er ikke testet i Opera - har ikke den browser - men er dog testet i IE 6.0 og Mozilla Firebird 0.7 :-)

Og der ser det bare "klasse" ud (hvis jeg selv skal sige det :-)
Avatar billede voller Nybegynder
16. november 2003 - 23:54 #9
Klasse og klasse... Der er jo lidt med farverne... ;-)
Alvorligt talt, så tak. Det virker jo glimragende. Jeg havde ikke tænkt på den tilgang med at sætte margen på den ene boks til samme værdi, som bredden af den anden boks er. Så lærte jeg noget nyt i dag.

Gider du uddybe det her med float-left og float-right ikke kan stå overfor hinanden? Det har jeg ikke hørt om før?
Avatar billede voller Nybegynder
16. november 2003 - 23:56 #10
Snowflake >>
Nej, den virker ikke korrekt i Mozilla, det var netop pointen. :-)
Det gør den dog nu, med hjælp fra bearhugx.
Avatar billede bearhugx Nybegynder
17. november 2003 - 00:05 #11
ang. float-left overfor float-right :

Sorry - ejg har misforstået regl 3 på http://www.w3.org/TR/REC-CSS2/visuren.html#float-rules

Beviset for at det _er_ muligt er følgende :

<html>
  <body>
    <div style="width: 400px; background-color: red;">
      <div style="float:left; width: 75px; background-color: yellow;">LEFT</div>
      <div style="float:right; width: 75px; background-color: cyan;">RIGHT</div>
      test text
    </div>
  </body>
</html>

som virker i både IE og MOZ
Avatar billede bearhugx Nybegynder
17. november 2003 - 00:11 #12
Det som jeg har misforstået det med er når følgende situation findes :
<html>
  <body>
    <div style="width: 400px; background-color: red;">
      <div style="float:left; width: 75px; background-color: yellow;">LEFT</div>
      test text 1
      <div style="float:right; width: 75px; background-color: cyan;">RIGHT</div>
      test text 2
    </div>
  </body>
</html>

bemærk at der nu er sat content ind i mellem de to floats -- Dette vil betyde, at LEFT bliver positioneret til venstre for [test text 1] - som så til gændgæld for lov til at fylde resten af den tilgænglige bredde på den pågældende linie...

Derefter læser browseren at der kommer et nyt float RIGHT - men da der ikke er mere plads på "linie 1" så starter RIGHT på "linie 2", hvor contentet efter float-definitionen af RIGHT så indsættes til venstre for :-))))


Så det hele koges ned til om det er at man indsætter noget content mellem de to floats - hvis ikke så kan to floats godt være placeret side om side --- hvis ikke, så gælder der det, at den sidst defineret float indsættes i den linie som det generelle content er nået til ....
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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