Søg
Avatar billede sijmonj Nybegynder
03. juni 2009 - 17:02 Der er 8 kommentarer og
1 løsning

højre menu bliver skubbet væk + ser forkert ud i IE

Hej, jeg har 2 problemer som jeg håber i kan hjælpe mig med.

1. på min side http://ziimx.zeekoo.dk/phoor/ når man gør browser vinduet større / mindre så bliver højre menu skubbet neden under content, hvordan kan det være?.

2. i IE så ser min venstre menu, content og højre menu forkert ud til forskel til Firefox, hvordan kan det være?.


Tak på forhånd
Avatar billede mclemens Nybegynder
04. juni 2009 - 12:12 #1
1. Læg et element omkring hele sidens indhold og sæt den til
width:1600px; eller min-width:1600px; (bemærk min-width er IE7+)

2. Undlad at definere height på rammen eller
definer height på menuerne og ikke/ikke kun rammen
#venstre_menu {HEIGHT: 455px;
#hojre_menu {HEIGHT: 455px;
Avatar billede sijmonj Nybegynder
04. juni 2009 - 16:45 #2
nu har jeg prøvet dine løsninger, men ingen af dem har jeg fået til at virke :/, kender du andre muligheder?
Avatar billede mclemens Nybegynder
04. juni 2009 - 19:40 #3
Når jeg tilføjer rettelserne jeg foreslog, så kan jeg ikke længere se de hvide px linjer i content højre eller venstre menu, og den højre menu hopper heller ikke længere ned på næste linje - jeg kan derfor ikke komme på andre muligheder, medmindre du har css filen i din cache og ikke tømmer den/trykker f5 når du tester.

Her er forslaget tilføjet direkte, prøv evt. at køre filen:



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Phoor.dk - Programmering &amp; Design</title>
<link href="../stylesheets/design.style.css" rel="stylesheet" type="text/css" />





<style type="text/css">
#venstre_menu {height:455px;}
#hojre_menu {height:455px;}
#content {height:455px;}
#wrapper{width:1600px;}
</style>






<!--
Denne hjemmeside er lavet af Simon Jensen
-->
</head>




<body><div id="wrapper">


<div id="logo_ramme">

<div id="logo">

  <!-- MENU START -->
  <div id="menu_forside"></div><!-- menu_forside -->
  <div id="menu_community"></div><!-- menu_forside -->
  <div id="menu_forum"></div><!-- menu_forside -->
  <div id="menu_artikler"></div><!-- menu_forside -->
  <div id="menu_downloads"></div><!-- menu_forside -->
  <div id="menu_admins"></div><!-- menu_forside -->
  <div id="menu_kontakt"></div><!-- menu_forside -->
  <!-- MENU SLUT -->

 
  <!-- BRUGER LOGIN START -->
  <div id="bruger_login">
    <form action="" method="get">
      <img alt="" src=".ikoner/user_orange.png" width="16" height="16" />
      <input style="border-left:none; border-bottom:1px solid #1d4154; border-right:none; border-top:none; background:none;" type="text"

name="brugernavn" />
     
      <img alt="" src=".ikoner/key.png" width="16" height="16" />
      <input style="border-left:none; border-bottom:1px solid #1d4154; border-right:none; border-top:none; background:none;" type="text"

name="password" />
     
      <img alt="" src=".ikoner/lock.png" width="16" height="16" />
   
  </form>

  </div><!-- bruger_login -->
    <div id="bruger_login_opret_glemtkode"><a href="pages/community/opret.bruger.php">Opret bruger</a> - <a

href="pages/community/glemt.kodeord.php">Glemt kodeord?</a>
  </div><!-- bruger_login_opret_glemtkode -->


</div><!-- logo slut -->
   
</div><!-- logo_ramme slut -->
<br />
<br />






<!-- MENU OG INDHOLD START -->
<div id="indhold_ramme">

<div id="venstre_menu_border_ramme">

<div id="venstre_menu">
  <img alt="" style="margin-left:40px; margin-top:5px;" src="nyeste_trade.png" width="108" height="21" />
  <table style="margin-top:15px;" cellpadding="0" cellspacing="0" width="200" border="0">

  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">hej</td>
  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>

  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>

  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
  </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
  </tr>
</table>
<br />

<br />
<br />
<img alt="" style="margin-left:40px;" src="reklamer.png" width="84" height="19"></div><!-- venstre_menu slut -->
 
</div><!-- border_ramme slut -->

<div id="content_border_ramme">
<div id="content">Velkommen til Phoor - Programmerings hjemmeside</div><!-- content -->
</div><!-- content_border_ramme slut -->


<div id="hojre_menu_border_ramme">

<div id="hojre_menu">

  <img alt="" style="margin-left:40px; margin-top:5px;" src="nyeste_svar.png" width="101" height="19" />
<table style="margin-top:15px;" cellpadding="0" cellspacing="0" width="200" border="0">
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">hej</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>

  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>

  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>

</table>
<br />
<br />
<br />
<img alt="" style="margin-left:40px;" src="populare_trade.png" width="132" height="21" />
<table style="margin-top:15px;" cellpadding="0" cellspacing="0" width="200" border="0">
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">hej</td>

    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>

    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>

    </tr>
  <tr>
    <td onmouseover="this.style.backgroundColor='#deebee'" onmouseout="this.style.backgroundColor='#f0f1ec'">&nbsp;</td>
    </tr>
</table>

</div><!-- venstre_menu slut -->
</div><!-- hojre_menu_border_ramme -->
</div><!-- indhold_ramme -->


</div>
</body>
</html>
Avatar billede sijmonj Nybegynder
04. juni 2009 - 21:18 #4
www.ziimx.zeekoo.dk/phoor , se det ser helt mærkeligt ud :/
Avatar billede mclemens Nybegynder
04. juni 2009 - 23:41 #5
Når du i mellemtiden har ændret

#content_border_ramme {
    width: 70%;

til:

#content_border_ramme {
    width: 50%;

- vil center delen ikke passe længere.
Du kan enten øge center delens % eller
en af de andre. (Personligt foretrækker
jeg fast px design istedet for at designe
baseret på %, man ved bedre hvordan designet
tager sig ud uanset opløsnings størrelsen.)
Avatar billede mclemens Nybegynder
05. juni 2009 - 00:24 #6
Glemte helt - hvis det var de manglende
billeder du tænkte på, så var det url'sene
der lige var blevet rettet da jeg gemte filen
lokalt, de skal lige rettes tilbage (eller css
delen tilføjes til den oprindelige html fil)
Avatar billede sijmonj Nybegynder
09. juni 2009 - 21:05 #7
undskyld det så langtid siden jeg har skrevet, har ikke lige haft tid.

mente ikke at der manglede billeder.

har ændret

#content_border_ramme {
width: 70%;

så den nu har 70%, det du siger med at den skal have fast px, hvordan kan jeg det?, skal jeg så bruge noget relative position?
Avatar billede mclemens Nybegynder
09. juni 2009 - 21:32 #8
"mente ikke at der manglede billeder."
- Nej, men src koderne blev ændret da jeg gemte lokalt.

...

"det du siger med at den skal have fast px, hvordan kan jeg det?"

Den skal ikke have fast px, jeg skrev i en parentes at jeg foretrak selv fast px. Med andre ord, man vælger hvilket opløsningsniveau du vil tilpasse dit site efter og fastsætter px på designet, så siden fylder vinduet når man kører med den fastsatte opløsning - ellers er siden centreret.

F.eks. kunne du sætte din wrapper til {width:980px;margin:0 auto;}
og så definere f.eks.: width: 200px; eller lignende, på hver af de tre hoved elementer (left,right og content) - derved ville man vide hvordan siden så ud fra opløsning f.eks. 1024 og opefter, da det er fastsat px design, istedet for design baseret på vinduets størrelse.

- Fordelen ved dette er samtidig ulempen, da designet ikke udnytter det ekstra plads ved højere opløsninger.

...

Relative positionering er ikke som sådan nødvendig fordi du skifter % over til px, jeg plejer ikke selv at bruge det til "hoved design delen" (men positionering via relative eller absolute kan selvfølgelig vise sig at være nødvendig af andre designmæssige årsager).
Avatar billede sijmonj Nybegynder
09. juni 2009 - 22:35 #9
synes det bedst med at den skalere så den udnytter alt plads på vinduet.

har prøvet at rodde lidt mere med det, men kan fanme stadig ikke få det til at virke :(

http://ziimx.zeekoo.dk/phoor/


har ingen idé om hvorfor den ikke gider som jeg vil
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 10:29 Negativ billeder på samsung Af ALICE i Småopgaver
15/0115:45 HJÆLP - Lopslag, Indeks? Hvad gør jeg! Af Eva i Excel
14/0119:38 Webmail yousee Af nu_igen i E-mail programmer
14/0113:00 Blå pile på foto? Af hkprofil i Office & Kontorpakker
13/0123:48 Tekst til Dato Af nyhavn18 i Excel
White papers
Flere white papers »