Avatar billede heyn Nybegynder
27. oktober 2008 - 04:19 Der er 5 kommentarer og
1 løsning

Hjælp til en begynder i <DIV>

Hej Eksperter

Jeg er begyndt at udvikle et site der skal anvende CMS-systemet Joomla!.
Jeg ønsker at udvikle min egen template. Det foreslås at jeg anvender <DIV> tags i stedet for <TABLE>.
Naiv som jeg er troede jeg at jeg havde styr på det med <DIV>. Det har jeg ikke!!!
Kort fortalt ønsker jeg at siden skal have et format der lever op til følgende kode, men kun ved anvendelse af <DIV> tags og ccs.
(bordercolor er udelukkende medtaget for at illustrere det ønskede udseende).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="2" bordercolor="#000000">
    <tr><td    align="center" height="100px" valign="middle" colspan="3">Her skal der være et logo</td></tr>
    <tr><td    align="center" height="30px" colspan="3">Dette er en menubar</td></tr>
    <tr>
        <td align="center" width="150px" height="350px">Dette er en menu</td>
        <td align="center" valign="middle">
            <table width="100%" height="100%" cellpadding="0" cellspacing="0" border="2" bordercolor="#000000">
                <tr>
                    <td align="center" valign="middle">Artikel 1</td>
                    <td align="center" valign="middle">Artikel 2</td>
                </tr>
                <tr>
                    <td align="center" valign="middle">Artikel 3</td>
                    <td align="center" valign="middle">Artikel 4</td>
                </tr>
            </table>
        </td>
        <td align="center" width="150px">Dette er reklamer</td>
    </tr>
    <tr><td align="center" height="20px" colspan="3">Dette er en footer</td></tr>
</table>
</body>
</html>

Håber at nogle kan hjælpe mig.

Christian
Avatar billede roenving Novice
27. oktober 2008 - 04:50 #1
Vertical alignment er kun sikkert på tabelceller, så hvis du ønsker at anvende det skal du holde dig til tabellerne ...

-- dette gælder også, hvis du ønsker at dele dit content-area i 4 dele, hvor de følger hinanden i højden (man kan reparere på det med javascript, men, æeh, så skal det virkeligt være nødvendigt, layout må _aldrig_ basere sig på js-'hacks' !-)

-- men det bliver nok til noget grimt design, hvis du ønsker at det skal følge en tilfældig browsers view-port, lav du et stabilt layout i en defineret bredde, som så kan udvide sig i højden !o]
Avatar billede roenving Novice
27. oktober 2008 - 05:26 #2
-- og et eksempel kunne være:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>En ret simpel side ...</title>
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;margin:0px;border:0px;padding:0px;font-family:tahoma,verdana,arial,sans-serif;font-size:small;overflow:hidden;}
#site{width:960px;margin:0 auto;position:relative;}
#banner{height:180px;background: blue url(close_cone_forest.jpg) center center;}
#main{height:520px;}
#menu{width:180px;height:500px;float:left;position:relative;padding:10px 5px;background:lightgreen;}
#content{width:560px;height:520px;float:left;background-color:#ff8;padding:0 10px;}
#right{width:180px;height:500px;float:left;position:relative;padding:10px 5px;background-color:#faa;}
#footer{clear:both;height:40px;background-color:#66f;}
#menu ul{list-style:none;margin-left:5px;}
#menu li{line-height:2}
#menu a, #menu a:link, #menu a:visited{text-decoration:none;}
#menu a:hover, #menu a:active{color: yellow; font-weight:bold;}
#content table{width:460px;margin:0 auto;line-height:2.5}
#content td{text-align:right; border-bottom:1px dashed #fbb;}
#content th{border-bottom:1px dashed #fbb;}
.bundbillede{position:absolute;bottom:0;margin-left:-5px;}
.bundbillede img{width:190px;}
.center{text-align: center;}
</style>
</head>
<body>
  <div id="site">
    <div id="banner">&nbsp;</div>
    <div id="main">
      <div id="menu">
        <ul>
          <li><a href="enside.html" onclick="return false;">En god side</a></li>
          <li><a href="enside1.html" onclick="return false;">Endnu en god side</a></li>
          <li><a href="enside2.html" onclick="return false;">En bedre side</a></li>
          <li><a href="enside3.html" onclick="return false;">Endnu en bedre side</a></li>
          <li><a href="enside4.html" onclick="return false;">En endnu bedre side</a></li>
          <li><a href="enside5.html" onclick="return false;">Endnu en endnu bedre side</a></li>
        </ul>
      </div>
      <div id="content">
        <h1 class="center">Statistik for 2007</h1>
        <h4 class="center">Besøgende i udvalgte skove</h4>
        <table class="center">
          <tr>
            <th>Skov</th>
            <th>Ialt</th>
            <th>Voksne</th>
            <th>Børn</th>
          </tr>
          <tr>
            <th>Bredeskov</th>
            <td>378</td>
            <td>251</td>
            <td>127</td>
          </tr>
          <tr>
            <th>Dyrehaven</th>
            <td>475.986</td>
            <td>254.968</td>
            <td>221.018</td>
          </tr>
          <tr>
            <th>Grænseskoven v. Åbenrå</th>
            <td>3365</td>
            <td>2058</td>
            <td>1307</td>
          </tr>
          <tr>
            <th>Langenden</th>
            <td>6.545</td>
            <td>6.212</td>
            <td>333</td>
          </tr>
          <tr>
            <th>Langeskov</th>
            <td>3.785</td>
            <td>2.515</td>
            <td>1.270</td>
          </tr>
          <tr>
            <th>Lilleskov</th>
            <td>37</td>
            <td>25</td>
            <td>12</td>
          </tr>
          <tr>
            <th>Overskov</th>
            <td>687</td>
            <td>615</td>
            <td>72</td>
          </tr>
          <tr>
            <th>Storeskov</th>
            <td>37.858</td>
            <td>25.152</td>
            <td>12.703</td>
          </tr>
        </table>
      </div>
      <div id="right">
        <form action="sendDenIkke.php" method="post" onclick="return false;">
          <fieldset><legend>Tilmeld nyhedsbrev</legend>
            Navn: <input type="text" name="navn"><br><br>
            Mail: <input type="text" name="mail"><br><br>
            <input type="checkbox" name="accept"> Jeg accepterer <a href="betingelser.html" onclick="window.open(this.href,'_blank');return false;">betingelserne</a><br><br>
            <input type="submit" class="narrowButton" value="Tilmeld nu">
          </fieldset>
        </form>
      </div>
      </div>
    </div>
    <div id="footer" class="center">
      Denne side er fremstillet på Webintegrator grunduddannelsen<br>
      KTS, Brønderslev Allé &copy; oktober 2008</div>
  </div>
</body>
</html>
Avatar billede heyn Nybegynder
27. oktober 2008 - 23:21 #3
Mange tak for løsningen og de gode råd.
Der var lige et par problemer med for mange <div>, men så kom footer med.
Men så opstod et andet problem. Header forsvandt næsten helt. Kun undersiden var synlig.
Det virker som om siden blokerer for rulning af siden. Som om siden er tvunget til at holde sig inden for rammerne af browseren (altså i højden).
Hvordan kan det være?

Christian

Ps Da siden på sigt skal anvendes i Egypten må jeg hellere anvende opløsningen 780 X 580.
Avatar billede roenving Novice
28. oktober 2008 - 16:24 #4
-- da jeg ofte har haft fat i sider, der skulle holde sig indenfor skærmen, har jeg i mit standard-setup height:100% på html,body-reglen, fjern det, så er den ikke restringeret af view-portens størrelse !-)

-- els velbekomme '-)
Avatar billede heyn Nybegynder
30. oktober 2008 - 02:24 #5
Løste problemet - fjernede "overflow:hidden;" i html,body-led.

Mange tak for hjælpen - Jeg lærte en del.

Christian
Avatar billede heyn Nybegynder
30. oktober 2008 - 02:45 #6
Et lille ekstra problem:
Hvis jeg minimerer min browser i breden således at der ikke er plads til indholdet, så bliver højre div-block i "main" smidt ned i næste linie.
Hvordan låser man den fast således at man må scrolle for at se indholdet yderst til højre?
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