Avatar billede chrishunter Nybegynder
28. februar 2007 - 22:33 Der er 7 kommentarer og
1 løsning

konstant højde på celle ønsket - uanset indholdet

I mit theme i Drupal (det cms, jeg bruger) har jeg en bjælke øverst i blokken med indholdet. Og kildekoden til denne ser nogenlunde således ud (set fra browseren):

...
<table width="100%">
  <tbody>
    <tr>

      <td class="block-title">
        <div class="breadcrumb"><a href="/">Hjem</a></div>  &nbsp;
      </td>

    </tr>
    <tr>
      <td>
        <div id="main">
...

Og det relevante i .css-filen ser således ud:

.block-title {
  color: #ffffff;
  background-color: #000000;
  height: 2em;
}
.breadcrumb {
  font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #ffffff;
  padding: 0px;
  margin: 0em;
  background-color: red;
}

Mit problem er, at det er er afhængigt af, om der er en brødkrummesti eller ej, hvorvidt <div class="breadcrumb">-tag'et (med indhold og afslutning) kommer med eller ej. Og når tag'et kommer med, bliver bjælken højere.
Bjælken skulle gerne have den samme højde uanset hvad, men det er ikke lykkedes mig at realisere - uanset utallige forsøg med margin og padding i .css-filen.
Hvad kan jeg mon gøre?

Mvh Christian
Avatar billede o-zone Nybegynder
28. februar 2007 - 23:03 #1
er det en "overflow:hidden" i .block-title du leder efter? :-/
/o-zone
Avatar billede roenving Novice
02. marts 2007 - 13:25 #2
-- det er vel bedre at sætte højde og overflow på breadcrumb:

.block-title {
  color: #fff;
  background-color: #000;
}
.breadcrumb {
  font-family: Tahoma,Verdana, Arial, Helvetica, sans-serif;
  font-size: 10px;
  color: #fff;
  padding: 0;
  margin: 0;
  background-color: #f00;
  height: 2em;
  overflow:hidden;
}
Avatar billede chrishunter Nybegynder
06. marts 2007 - 17:19 #3
"overflow:hidden" virker af en eller anden grund ikke.
At flytte højdeangivelsen over på breadcrumb er umiddelbart en god idé, men da <div class="breadcrumb">-tag'et (med indhold og afslutning) kun kommer med i kildekoden, når der rent faktisk er en brødkrummesti, vil dette heller ikke virker. Og det gør det i øvrigt alligevel ikke.

For uanset, hvad jeg gør, så kommer der tilsyneladende et stykke block-title under breadcrumb-stykket. Det hjælper intet at sætte margin- og padding-værdierne til 0, og sættes de til en større værdi bliver stykket tilsvarende større.
Dette kunne tyde på, at der er to block-title oven i hinanden forskudt vertikalt, men det er der ikke ifølge kildekoden (set fra browseren). Og forsøg med at fjerne background-color fra breadcrumb og sætte border: 1px solid yellow; viser det da heller ikke.

Meget, meget mystisk (som så meget andet css (sagde han bittert)).
Avatar billede roenving Novice
06. marts 2007 - 17:26 #4
Prøv:

</div></td>
Avatar billede chrishunter Nybegynder
06. marts 2007 - 17:42 #5
De er der:

...
<table width="100%">
  <tbody><tr>
    <td class="block-title">
      <div class="breadcrumb"><a href="/">Hjem</a></div> &nbsp;
    </td>
  </tr>
  <tr>
    <td>
      <div id="main">
...
Avatar billede roenving Novice
06. marts 2007 - 17:45 #6
Hvis en </td> står på sin selvstændige linje, vil IE rendere linjeskiftet, derfor skal den op i røven på elementer og tekst:

...
<table width="100%">
  <tbody><tr>
    <td class="block-title">
      <div class="breadcrumb"><a href="/">Hjem</a></div> &nbsp;</td>
  </tr>
  <tr>
    <td>
      <div id="main">
...
Avatar billede chrishunter Nybegynder
06. marts 2007 - 18:02 #7
Heller ikke. Browseren viser det samme, selvom kildekoden nu ser sådan ud:

...
<table width="100%">
  <tbody><tr>
    <td class="block-title">
      <div class="breadcrumb"><a href="/">Hjem</a></div> &nbsp; </td></tr>
  <tr>
    <td>
      <div id="main">
Avatar billede chrishunter Nybegynder
27. april 2008 - 13:45 #8
Emnet afsluttes ...
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