Avatar billede babyshark Nybegynder
19. august 2005 - 21:38 Der er 16 kommentarer

mit layer tilpasser sig ikke skærmstørrelsen

Hvad skriver man for at ens layer skal blive på sin plads i forholde til siden uanset hvilken skærmopløsning man bruger.
Og....hvordan får man ens side til at expande automatisk vertikalt, når indholdet bliver længere.
jeg har en side der indeholder en include til banner, en midtersektion som er den jeg skifter ud hver gang jeg skal lave en ny side, og så har jeg en include til en bund.
Avatar billede roenving Novice
19. august 2005 - 21:50 #1
En simpel udgave:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<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;}
#site{width:780px;height:100%;min-height:100%;margin:0 auto;}
#bund{text-align:center;background:#127;color:white;font-weight:900;}
</style>
<title>Et simpelt dokument</title>
</head>
<body>
<div id="site">
  <div id="banner">
    <img src="banner.jpg" alt="Her er mit banner" style="width:100%;height:125px;"></div>
  <div id="content">
    <!-- include indhold -->
    Og uden include, skal der jo være noget indhold
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <div id="bund">
    ® Roenving 2005</div>
</div>
</body>
</html>
Avatar billede olebole Juniormester
19. august 2005 - 21:51 #2
<ole>

Uden kode, er det lettere at fortælle, hvad der er galt med din hunds svogers hvalpe  :)

Der er ikke nogen idé i at tilrette noget til skærmstørrelsen. Skal du tilrette noget, bør det være til den aktuelle størrelse, brugeren har valgt at se dit site i  ;o)

/mvh
</bole>
Avatar billede babyshark Nybegynder
19. august 2005 - 22:06 #3
sådan ser min div ud. den hygger sig random på siden.

<div id="Layer2" style="position:static; width:81px; height:294px; z-index:2; left: 227px; top: 283px;" class="layer2"><span class="style1">          <img src="images/velkommen.jpg" width="200" height="277" class="billeder"><br>
      </span></div>
Avatar billede babyshark Nybegynder
19. august 2005 - 22:47 #4
Her er css hvis det hjælper.
Min layer1 ligger nedenunder layer2 som jeg har fået placeret korrekt. Men selvom der ikke er noget overlap og layer1 ligger ved siden af layer2, så skubbes den nedenunder.
body,html {
    margin:0px;
    height:auto;
    visibility: visible;
    background-image: url(images/prikbag.jpg);
    scrollbar-3dlight-color:#5D5D5D;
    scrollbar-arrow-color:#5D5D5D;
    scrollbar-base-color:#FBFBF9;
    scrollbar-darkshadow-color:#FFFFFF;
    scrollbar-face-color:#FFFFFF;
    scrollbar-highlight-color:none;
    scrollbar-shadow-color:none;
    scrollbar-track-color:none;
}

.pigalle {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
    background-repeat: no-repeat;
    position: relative;
    visibility: visible;
    height: auto;
    overflow: visible;
}
.iframes {
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
   
   
    visibility: visible;
}
.stretch {
    background-image: url(images/haar_14.gif);
}
.stretch2 {
    background-image: url(images/haar_17.gif);
}
.centerramme {
    height: auto;
    background-image: url(images/repeat.jpg);
    background-repeat: repeat-y;
    top: 0px;
    margin-top: 0px;
}
.iframe {
    display:block;
    border:none;
    background-image: url(images/repeat.jpg);
}
.topkasse {
    background-image: url(images/top_bg.jpg);
    top: 0px;
    bottom: 0px;
    background-repeat: no-repeat;
    height: 255px;
    width: 870px;
    overflow: scroll;
}
.midtbox {
    background-image: url(images/baggrund.jpg);
    background-repeat: no-repeat;
    padding-top: 0px;
    padding-bottom: 0px;
    width: 870px;
    overflow: scroll;
    margin-top: 0px;
    top: 0px;
}
.billeder {
    border: 1px solid #666666;
}
.tekst {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    color: #333333;
}
.bundkasse {
    background-image: url(images/bundlinje.jpg);
    background-repeat: no-repeat;
    height: 36px;
    width: 870px;
}
.feskrift {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #333333;
}
.layer2 {
    position: static;
    left: 400px;
}
.layer1 {
    overflow: visible;
    position: static;
    visibility: visible;
    width: 400px;
    margin-left: 40%;
    margin-top: 0px;
    vertical-align: top;
}
Avatar billede babyshark Nybegynder
19. august 2005 - 22:48 #5
html'en:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Pigalle - Copenhagen hair and beauty clinic</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="pigalle.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<style type="text/css">
<!--
.style1 {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: #333333;
    font-weight: bold;
    position: static;
    left: 10%;
}
a:link {
    color: #333333;
    text-decoration: none;
}
a:visited {
    text-decoration: none;
    color: #333333;
}
a:hover {
    text-decoration: underline;
    color: #999999;
}
a:active {
    text-decoration: none;
    color: #999999;
}
.style3 {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
.style4 {font-size: 12px}
.style5 {color: #666666}
-->
</style>
</head>

<body>
<table width="870"  border="0" align="center" cellpadding="0" cellspacing="0" background="images/repeat.jpg" class="centerramme">
  <tr>
    <td height="255" valign="top"><?php
include("top.htm");
?></td>
  </tr>
  <tr class="midtbox">
    <td height="427" valign="top" background="images/baggrund.jpg"><p>&nbsp;</p>
      <div class="layer2" id="Layer2" style="position:static; width:300px; height:294px; z-index:2; left: 20%; top: 283px;">       
        <div align="center"><img src="images/velkommen.jpg" width="200" height="277" class="billeder"><br>
        </div>
      </div>     
      <div class="layer1" id="Layer1" style="position:static; width:454px; height:321px; z-index:1; overflow: visible;">
        <p class="tekst"><strong>Velkommen til Pigalle. </strong></p>
        <p class="tekst"> Copenhagen Hair and Beauty Clinic er et totalkoncept indenfor sk&oslash;nhedspleje. Vi tilbyder blandt andet neglepleje, hudpleje, spraytanning og meget mere. Kom ind og f&aring; en snak med os om lige netop dit &oslash;nske.</p>
        <p><span class="tekst">Vi ser frem til dit bes&oslash;g!<br>
          <br>
        </span><img src="images/vertikalprik.jpg" width="455" height="9"></p>
        <table width="100%"  border="0">
          <tr>
            <td width="21%"><img src="images/sparaytan.jpg" width="82" height="86" class="billeder"></td>
            <td width="25%" valign="top" class="tekst style3"><strong class="feskrift">Brun i en fart?</strong><br>
              Perfekt spraytanning <br>
            kun 200 kr.</td>
            <td width="3%" valign="top" class="tekst style3"><img src="images/korteprikker.jpg" width="9" height="83"></td>
            <td width="20%" valign="top" class="tekst style3"><img src="images/brudepakke.jpg" width="82" height="86"></td>
            <td width="31%" valign="top" class="tekst style3"><strong class="feskrift">Skal du st&aring; brud?</strong><br>
            Pr&oslash;v vores brudepakke</td>
          </tr>
          <tr valign="middle">
            <td colspan="5"><span class="style5"><img src="images/vertikalprik.jpg" width="455" height="9"></span></td>
          </tr>
          <tr>
            <td><img src="images/negleforside.jpg" width="82" height="86" class="billeder"></td>
            <td valign="top" class="tekst style4"><strong class="feskrift">Smukke negle? </strong><br>
              Knust glasfibernegle<br>
            Sommertilbud 395 kr.</td>
            <td valign="top" class="tekst style4"><span class="tekst style3"><img src="images/korteprikker.jpg" width="9" height="83"></span></td>
            <td valign="top" class="tekst style4"><img src="images/girlsnight.jpg" width="82" height="86"></td>
            <td valign="top" class="tekst style4"><strong class="feskrift">Girls night out!</strong><br>
            Vi styler dig og veninderne til en aften i byen </td>
          </tr>
        </table>
        <p>&nbsp;        </p>
      </div>
      <p>&nbsp;</p>    </td>
  </tr>
  <tr bgcolor="#FFFFFF">
    <td height="25" bgcolor="#4F4F4F"><?php
include("bund.htm");
?></td>
  </tr>
</table>
</body>
</html>
Avatar billede roenving Novice
19. august 2005 - 22:55 #6
-- hvad betyder det, når du skriver 'den hygger sig random på siden' og hvad er det, du vil opnå ?-)
Avatar billede babyshark Nybegynder
19. august 2005 - 22:59 #7
jamen se på www.sharkz.dk/pigalle
Der ligger layer1 som er laget til højre, under layer 2 blot i højre side. Jeg kan ikke få den til at lægge sig på linje med layer2, selvom top margin er 0
Avatar billede roenving Novice
19. august 2005 - 23:06 #8
Vil du have layer 1 og 2 ved siden af hinanden ?-)

-- for en div fylder som standard hele bredden, og så kan der selvfølgelig ikke være noget ved siden af !-)
Avatar billede babyshark Nybegynder
20. august 2005 - 13:21 #9
hvordan laver man så 2 kolonner med divs?...
Avatar billede roenving Novice
20. august 2005 - 13:25 #10
Hvorfor laver du ikke bare en tabel med to celler ?-)
Avatar billede babyshark Nybegynder
20. august 2005 - 16:58 #11
det gjorde jeg også efter megen rykken i håret..men regnede med at layers kunne arrangeres ved siden af hinanden.
Avatar billede roenving Novice
20. august 2005 - 17:03 #12
Tjah, det kan de også, men der er nogle subtile browser-forskelle, som gør det til en større videnskab, og tabellen kan det jo direkte, så hvorfor bekymre sig alt for meget om det ?o]
Avatar billede babyshark Nybegynder
21. august 2005 - 11:37 #13
det er bare fordi folk tuder mine ører fulde af at det er ultra vigtigt at lave en hp i divs, så er man en "rigtig" webdesigner blabla....Så derfor prøver jeg mig frem, men har altid arbejdet med tabeller og synes dte er nemmest, men så er der jo problemer med iframes i mozilla...så intet er helt 100% iorden.
Avatar billede roenving Novice
21. august 2005 - 11:45 #14
Tjah, nu vil jeg jo hævde, at det er tågehorn, som efter at have læst 3 vers i en bibel, opkaster sig som profeter eller religionsforskere, som finder på at sige den slags !-)

-- men der er intet galt i at have noget imod tabeller, hvis udgangspunktet er 90'ernes tabelhelveder med tabeller nestet i 10-20 lag med celler udspændt af hundredevis af spacer.gifs ...

-- der er bare ingen grund til at kaste et godt og nyttigt html-element ud med skyllevandet, fordi der er kommet flere og nye muligheder !-)

Du kan f.eks. finde en kommentar til det her: http://www.eksperten.dk/spm/638929#rid5710754 !o]
Avatar billede olebole Juniormester
21. august 2005 - 20:40 #15
- og de 'nye' muligheder har faktisk været gældende halvdelen af den tid, WWW har været en realitet  :)

Der er med garanti mange, der fylder dine ører med den slags vrøvl - men de, der gør det, aner ikke, hvad en 'rigtig' webdesigner er.

Hvad problemer med iframes angår, skal du tilbage til det forrige årtusinde, før du finder en Netscape-browser, der havde problemer med iframes.
Mozilla har altid bygget på Gecko-motoren og den har aldrig haft problemer med iframes.

Du henter tydeligvis dine informationer uhensigtsmæssige steder  :)
Avatar billede babyshark Nybegynder
22. august 2005 - 12:59 #16
Jamen Ole jeg har lavet en side med iframes, og de kunne kun komme op i en højde 100 px i Mozilla, så der må være en speciel kode til iframes i Mozilla. Det er jeg ikke den eneste herinde der har problemer med, og jeg kan huske jeg søgte hjælp tidligere på måneden, og der var ingen løsningsforslag.

En "rigtig" webdesigner.....siger: " alt skal kodes i notepad"....så er jeg ikke webdesigner, men jeg tror disse kode-forvirringer omkring hvem der er "rigtig" designer, ikke  gælder andre designlinjer. Har set mange sælge typo3, dvs. et open source der bliver til deres produkt....flashdesignere der henter fra flashkit.com, og alle disse påberåber sig at være et seriøst firma..ja det er de nok, men sgu ikke originale. Og om man koder i Dreamweaver, notepad eller GoLive...det er originalt så længe man selv har udtænkt ideen og arbejdet med grafikken fra bunden.
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