Søg
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 17:11 Der er 27 kommentarer og
1 løsning

Drilsk Width.

Hej Eksperter.

Sidder med at layout der fylder hele browseren.

har en menu del der fylder 140px, og nu vil jeg så gerne have main delen til at fylde resten...

hvis jeg ikke sætter nogen width, deler den det op i 50/50, hvis jeg sætter width til auto, deler den det op i 50/50 ...

mit css ser sådan her ud:

  .menu {
      width: 140px;
      font-size: 12px;
      vertical-align: top;
      background-image: url('gfx/left_background.gif');
      background-repeat: repeat;
  }

  .content {
      width: auto;
      padding: 3px;
      font-size: 12px;
      vertical-align: top;
  }

Nogle ideer ?
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 17:22 #1
hmmm kan se det er pga min top, som har en colspan="2" på sig... nogen vej uden om det ?
Avatar billede mclemens Nybegynder
03. marts 2006 - 17:39 #2
Hvad med (hvis det er ok med javascript?):

  .menu {
float:left;
      width: 140px;
      font-size: 12px;
      vertical-align: top;
      background-image: url('gfx/left_background.gif');
      background-repeat: repeat;
  }

  .content {
float:right;
      width: auto;
      padding: 3px;
      font-size: 12px;
      vertical-align: top;
  }



<html><head>
<script language="javascript">
function alignit(){document.getElementById("content").style.width=document.body.clientWidth-160;}
</script>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head><body onLoad="alignit()">

<div class="menu"></div>

<div class="content" id="content"></div>

</body></html>
Avatar billede mclemens Nybegynder
03. marts 2006 - 17:40 #3
... de 160 i function alignit afhænger af hvad din margin er ...
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 17:40 #4
bruger tables til opsætningen... deraf colspan="2"
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 17:41 #5
margin: 0px
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 17:46 #6
det her ved jeg ikke rigtigt om jeg kan bruge... mit layout ser sådan her ud:

top
----------------------------
menu | content
    |
    |

hvor toppen er 70px høj, menu'en er 140px bred.

bruger så tables til opsætningen, hvor der er en colspan="2" i toppen, for at den skal sprede sig ud over menu og content.
Avatar billede mclemens Nybegynder
03. marts 2006 - 17:51 #7
Sådan her???
html{margin:0px;}

  .menu {
float:left;
      width: 140px;
      font-size: 12px;
      vertical-align: top;
      background-image: url('gfx/left_background.gif');
      background-repeat: repeat;
  }

  .content {
float:right;
      width: auto;
      padding: 3px;
      font-size: 12px;
      vertical-align: top;
  }

<html><head>
<script language="javascript">
function

alignit(){document.getElementById("content").style.width=document.body.clientWidth-140;}
</script>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head><body onLoad="alignit()">

<table width="100%"><tr>
<td colspan="2" width="100%" height="100%">
topbar</td>

</tr><tr>

<td class="menu">menuen</td>

<td class="content" id="content">indholdet</td>

</tr></table>

</body></html>
Avatar billede mclemens Nybegynder
03. marts 2006 - 17:53 #8
... edit slet bare float:left og right det var til brug ved divs
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:02 #9
damn så er vi der. :D

body {
      margin:0px;
      background-color: black;
      color: white;
      font-family: Arial, Sans Serif;
      overflow: hidden;
}

.menu {
      width: 140px;
      font-size: 12px;
      vertical-align: top;
      background-image: url('gfx/left_background.gif');
      background-repeat: repeat;
}

.content {
      width: auto;
      padding: 3px;
      font-size: 12px;
      vertical-align: top;
}

table {
      height: 100%;
      width: 100%;
}

.top {
      height: 70px;
      background-image: url('gfx/top_background.gif');
}

og htm filen:

<html><head>
<script language="javascript">
function

alignit(){document.getElementById("content").style.width=document.body.clientWidth-140;}
</script>

<link rel="stylesheet" type="text/css" href="stylesheet.css" />

</head>

<body onLoad="alignit()">

<table cellspacing="0" cellpadding="0">
  <tr>
  <td colspan="2" class="top">
    <a href="index.html"><img src="gfx/logo.jpg" border="0" alt=""></a><br>
  </td>
  </tr>
  <tr>
  <td class="menu">
    menuen
  </td>
  <td class="content" id="content">
    indholdet
  </td>
  </tr>
</table>

</body>
</html>
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:02 #10
... Poster den lige igen (afkortet /fjernet lidt)
<html><head>
<script language="javascript">
function alignit(){document.getElementById("content").style.width=document.body.clientWidth-140;}
</script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
</head><body onLoad="alignit()">
<table><tr>
<td colspan="2">topbar</td>
</tr><tr>
<td class="menu">menuen</td>
<td class="content" id="content">indholdet</td>
</tr></table>
</body></html>
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:03 #11
btw: brug body i stedet for html... iexplorer kan godt bruge html, men det ser ikke ud til at FF er glad for den. ;)
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:03 #12
Ok, så kaster jeg et svar ;)
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:05 #13
Takker for hjælpen, bare sjovt det skal være så "besværligt" :D
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:05 #14
btw: brug body i stedet for html
- Ja, det har du ret i ... retter lige den vane :/
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:06 #15
bare noget bæ at man skal opdatere hvis man ændrer vinduets størrelse, for at den ser rigtigt ud igen. :(
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:06 #16
hehe ;)
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:08 #17
<body onLoad="alignit()">
-> <body onfocus="alignit()">
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:11 #18
niks virker ikke.
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:12 #19
<body onLoad="alignit()">
-> <body onfocus="alignit()" onLoad="alignit()">
... ellers bugger firefox ved reload ...
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:13 #20
OnFocus sparker kun ind, hvis jeg går væk fra vinduet, og så tilbage.. og det gælder både IE og FF.
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:13 #21
niks virker ikke...
- click på vinduet...
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:14 #22
... ja, men du er jo fri for at klikke på reload ...
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:15 #23
been there done that... som sagt, virker kun hvis vinduet ikke er i focus, og jeg så klikker tilbage... når man ændrer størrelsen på vinduet, er det stadig i focus, ergo sparker OnFocus ikke ind. :(
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:15 #24
vil bare have den til at følge med vinduet, no matter what, lige som en table gør det.
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:18 #25
<body onresize="alignit()" onLoad="alignit()">
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:20 #26
Sådan! Så er vi kørende. :D

<body  onresize="alignit()" onLoad="alignit()" OnFocus="alignit()">

bare for at være sikker. :D
Avatar billede mclemens Nybegynder
03. marts 2006 - 18:25 #27
hehe ... OnFocus burde dog ikke være nødvendig <- men det er jo folks pc kraft og ikke serverens ;)
Avatar billede blackscorpion Nybegynder
03. marts 2006 - 18:25 #28
lige præcist. :D

men som sagt, tak for hjælpen, og hav en forsat god fredag. :D
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 16:21 Installere Ubuntu på Virtuel Maskine Af Uvanga i Andet software
I går 09:38 Microsoft har igen ødelagt mit højreklik Af valby i Windows
30/0714:41 To mails fra YouSee - Jeg tror ikke altid på tilfældigheder Af mort1 i Andet sikkerhed
27/0714:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
27/0713:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
White papers
Flere white papers »