Avatar billede mvk Nybegynder
30. november 2005 - 12:36 Der er 9 kommentarer og
1 løsning

Layout driller

jeg har forsøgt at sætte min side op i CSS men den ligger ikke elementerne rigtigt. kan nogen hjælpe.

top menuen skal op til højre for logoet...
og derunder skal content vises
Avatar billede roenving Novice
30. november 2005 - 14:06 #1
Der mangler lissom en anelse i dine oplysninger ...

-- prøv f.eks. at linke til dit forsøg og forklar, hvad der er galt !-)
Avatar billede mvk Nybegynder
30. november 2005 - 14:26 #2
tak roenving
jeg havde glemt at paste linket,. sorry...!

http://www.because-test.dk/pixmantec/
Avatar billede notes2c Nybegynder
30. november 2005 - 21:26 #3
Jeg ville nok lige starte med at kigge på html'en, der der rod i den...

Du har bl.a. dobbelt body start tag og div's som ikke hænger sammen. Så kig lige på det først...
Avatar billede mvk Nybegynder
30. november 2005 - 23:55 #4
samme problem efter jeg har ryddet op - den viser ikke elementerne top of content top alignet til højre for logo og menu
Avatar billede notes2c Nybegynder
01. december 2005 - 13:46 #5
Det er lidt svært at hjælpe når koden ændre sig... Men dit problem ligger måske et andet sted. For du har en #page som er 762px bred og inde i den har du #top og dt giver jo en bredde på 762px og når du så forsøger at laver float på top og der samtidig skal være plads til #logo og #navigation så er der naturligvis ikke plads... Så derfor vil jeg anbefale at ud fjerne width på #top så vil den falde på plads, det samme gælder for #content (også for bred).
Avatar billede mvk Nybegynder
01. december 2005 - 17:28 #6
det hjalp lidt :)

layoutet jeg prøver og lave er sådan:
http://www.because-test.dk/pixmantec/layout.asp
Avatar billede notes2c Nybegynder
01. december 2005 - 18:30 #7
Din content er stadig for bred, men prøv at indsætte dette i dit stylesheet, så kan du se problemet...

* {border: 1px solid red}
Avatar billede mvk Nybegynder
01. december 2005 - 22:15 #8
jeg har fjernet width på #top og #content men de ligger stadig dernedaf. den vil ikke ligge 2 elementer ved siden af hinanden

http://www.because-test.dk/pixmantec/
Avatar billede notes2c Nybegynder
01. december 2005 - 23:47 #9
har leget lidt med koden. Må lige gøre opmærksom på at menuen har jeg ikke kigget på... Den skal du lave om... Det går ikke at have et design som basere sig på float. Og så en menu som er absolute, de er jo lidt modstridende ik... Kig på det og tag det du kan bruge....

<!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>pixmantec</title>
<base href="http://www.because-test.dk/pixmantec/" />
<link href="include/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="include/layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
* {border:none}
#page {
    width: 766px;
}
#left {
float: left;
}
#content {
    margin-left: 0px;
}

</style>
<script language="JavaScript" src="include/functions.js">
</script>
<script language="JavaScript" type="text/JavaScript">
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>
<body>
<div id="page">
    <div id="left">
    <div id="logo"><a href="http://www.pixmantec.com"><img src="http://www.pixmantec.com/img/logo.gif" alt="" border="0"/></a></div>
    <div id="navigation">
    <h1>Products</h1>
    <h2>RawShooter</h2>
    <p><a href="http://www.pixmantec.com/rawshooter_premium.html">premium 2006</a></p>
    <p><a href="http://www.pixmantec.com/rawshooter_essentials.html">essentials 2005</a></p>

    <p><a href="http://www.pixmantec.com/rawshooter_color_engine.html">Color Engine</a></p>
    <p><a href="http://www.pixmantec.com/rawshooter_color_engine.html">Customer Care Center</a></p>
    </div>
    </div><!-- left -->

    <div id="top">
        <table height="103" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td align="right" valign="bottom" style="padding-top:42px;padding-right:2px;">
            <p><a href="http://esd.element5.com/product.html?productid=545270">Buy</a> |
            <a href="http://www.pixmantec.com/company/partners.html" >Partners</a> | 
            <a href="http://www.pixmantec.com/forums/index.htm" >Support Forums</a> |
            <a href="http://www.pixmantec.com/purchase/downloads.html" >Downloads</a></p></td>

          </tr>
          <tr>
            <td><table border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td rowspan="3"><img src="http://www.pixmantec.com/img/start.gif" width="2" height="27"></td>
                <td rowspan="3"><img src="http://www.pixmantec.com/img/products.gif" name="pro" width="71" height="27" id="pro" onMouseOver="showhide('sub1',1);MM_swapImage('pro','','http://www.pixmantec.com/img/products_o.gif',1)" onMouseOut="showhide('sub1',0);MM_swapImgRestore()"></td>
                <td rowspan="3"><img src="http://www.pixmantec.com/img/support.gif" name="sup" width="67" height="27" id="sup" onMouseOver="showhide('sub2',1);MM_swapImage('sup','','http://www.pixmantec.com/img/support_o.gif',1)" onMouseOut="showhide('sub2',0);MM_swapImgRestore()"></td>
                <td rowspan="3"><img src="http://www.pixmantec.com/img/community.gif" name="comm" width="83" height="27" id="comm" onMouseOver="showhide('sub3',1);MM_swapImage('comm','','http://www.pixmantec.com/img/community_o.gif',1)" onMouseOut="showhide('sub3',0);MM_swapImgRestore()"></td>
                <td rowspan="3"><img src="http://www.pixmantec.com/img/purchase.gif" name="pur" width="73" height="27" id="pur" onMouseOver="showhide('sub4',1);MM_swapImage('pur','','http://www.pixmantec.com/img/purchase_o.gif',1)" onMouseOut="showhide('sub4',0);MM_swapImgRestore()"></td>

                <td rowspan="3"><img src="http://www.pixmantec.com/img/company.gif" name="com" width="75" height="27" id="com" onMouseOver="showhide('sub5',1);MM_swapImage('com','','http://www.pixmantec.com/img/company_o.gif',1)" onMouseOut="showhide('sub5',0);MM_swapImgRestore()"></td>
                <td colspan="2"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="8"></td>
                <td rowspan="3"><img src="http://www.pixmantec.com/img/end.gif" width="2" height="27"></td>
              </tr>
              <tr>
                <td><a href="http://www.pixmantec.com/index.html"><img src="http://www.pixmantec.com/img/home.gif" name="home" width="58" height="27" border="0" id="home" onMouseOver="MM_swapImage('home','','http://www.pixmantec.com/img/home_o.gif',1)" onMouseOut="MM_swapImgRestore()"></a></td>
                <td background="http://www.pixmantec.com/img/loop.gif"><img src="http://www.pixmantec.com/img/transparent.gif" width="201" height="27"></td>
              </tr>
              <tr>

                <td colspan="2"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="8"></td>
              </tr>
            </table></td>
          </tr>
        </table>

<!-- Sub 1 -->
<div id="sub1" class="submenu1" onMouseOver="showhide('sub1',1);MM_swapImage('pro','','http://www.pixmantec.com/img/products_o.gif',1)" onMouseOut="showhide('sub1',0);MM_swapImgRestore()">


    <table width="190" border="0" cellpadding="0" cellspacing="0">

    <tr>
      <td width="190" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF" ><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="2" class="dropstyle"></td>
          </tr>
          <tr>
            <td colspan="2" valign="top" bgcolor="#FFFFFF">
            <p>
            <a href="http://www.pixmantec.com/products/rawshooter.html">RawShooter</a><br>

            <a href="http://www.pixmantec.com/products/rawshooter_premium.html">premium 2006</a><br>
            <a href="http://www.pixmantec.com/products/rawshooter_essentials.html">essentials 2005</a><br>
            <a href="http://www.pixmantec.com/products/rawshooter_color_engine.html">Color Engine</a><br>
            </p>
            </td>
          </tr>
      </table></td>

      <td width="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans_vert.gif"><img src="http://www.pixmantec.com/img/top.gif" width="3" height="3"></td>
    </tr>
    <tr>
      <td height="3" colspan="2"><table width="190" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="3" height="3" align="left" valign="top"><img src="http://www.pixmantec.com/img/bot.gif" width="3" height="3"></td>
          <td width="187" height="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans.gif"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="3"></td>
        </tr>
      </table></td>

  </tr>
</table>


</div>
<!-- Sub 2 -->
<div id="sub2" class="submenu2" onMouseOver="showhide('sub2',1);MM_swapImage('sup','','http://www.pixmantec.com/img/support_o.gif',1)" onMouseOut="showhide('sub2',0);MM_swapImgRestore()">


    <table width="190" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="190" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>

            <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF" ><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="2" class="dropstyle"></td>
          </tr>
          <tr>
            <td colspan="2" valign="top" bgcolor="#FFFFFF">
            <p>
            <a href="forums/index.htm">Support Forums & FAQ</a><br>
            <a href="http://esales.element5.com/ccc/index.html?publisherid=50938">Customer Care Center</a><br>

            <a href="http://www.pixmantec.com/support/user_guides.html">User Guides</a><br>
            <a href="http://www.pixmantec.com/support/software_updates.html">Software Updates</a><br>
            <a href="http://www.pixmantec.com/support/education_and_links.html">Education &amp; Links</a><br>
            </p>
            </td>
          </tr>

      </table></td>
      <td width="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans_vert.gif"><img src="http://www.pixmantec.com/img/top.gif" width="3" height="3"></td>
    </tr>
    <tr>
      <td height="3" colspan="2"><table width="190" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="3" height="3" align="left" valign="top"><img src="http://www.pixmantec.com/img/bot.gif" width="3" height="3"></td>
          <td width="187" height="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans.gif"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="3"></td>
        </tr>

      </table></td>
  </tr>
</table>

</div>
<!-- Sub 3 -->
<div id="sub3" class="submenu3" onMouseOver="showhide('sub3',1);MM_swapImage('comm','','http://www.pixmantec.com/img/community_o.gif',1)" onMouseOut="showhide('sub3',0);MM_swapImgRestore()">


      <table width="190" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="190" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

          <tr>
            <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF" ><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="2" class="dropstyle"></td>
          </tr>
          <tr>
            <td colspan="2" valign="top" bgcolor="#FFFFFF">
            <p>
            <a href="http://www.pixmantec.com/community/reviews_and_feedback.html">Reviews &amp; Feedback</a><br>

            <a href="http://www.pixmantec.com/forums/index.htm">User Forums</a><br>
            <a href="http://www.pixmantec.com/community/newsletter.html">Newsletter</a><br>
            <a href="http://campaigns.emailserver2.com/mmm/webform/webform23723.asp">Beta Tester Program</a><br>
            <a href="http://www.pixmantec.com/community/features_photographers.html">Featured Photographers</a><br>
            </p>
            </td>
          </tr>

      </table></td>
      <td width="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans_vert.gif"><img src="http://www.pixmantec.com/img/top.gif" width="3" height="3"></td>
    </tr>
    <tr>
      <td height="3" colspan="2"><table width="190" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="3" height="3" align="left" valign="top"><img src="http://www.pixmantec.com/img/bot.gif" width="3" height="3"></td>
          <td width="187" height="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans.gif"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="3"></td>
        </tr>

      </table></td>
  </tr>
</table>


</div>
<!-- Sub 4 -->
<div id="sub4" class="submenu4" onMouseOver="showhide('sub4',1);MM_swapImage('pur','','http://www.pixmantec.com/img/purchase_o.gif',1)" onMouseOut="showhide('sub4',0);MM_swapImgRestore()">


    <table width="190" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="190" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">

          <tr>
            <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF" ><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="2" class="dropstyle"></td>
          </tr>
          <tr>
            <td colspan="2" valign="top" bgcolor="#FFFFFF">
            <p>
            <a href="http://esd.element5.com/product.html?productid=545270">E-Store</a><br>
            <a href="http://www.pixmantec.com/purchase/volume_licences.html">Volume Licenses</a><br>

            <a href="http://www.pixmantec.com/purchase/downloads.html">Downloads</a><br>
            <a href="http://www.pixmantec.com/purchase/activate_software.html">Activate Software</a><br>
            </p>
            </td>
          </tr>
      </table></td>
      <td width="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans_vert.gif"><img src="http://www.pixmantec.com/img/top.gif" width="3" height="3"></td>
    </tr>

    <tr>
      <td height="3" colspan="2"><table width="190" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="3" height="3" align="left" valign="top"><img src="http://www.pixmantec.com/img/bot.gif" width="3" height="3"></td>
          <td width="187" height="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans.gif"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="3"></td>
        </tr>
      </table></td>
  </tr>
</table>


</div>
<!-- Sub 5 -->
<div id="sub5" class="submenu5" onMouseOver="showhide('sub5',1);MM_swapImage('com','','http://www.pixmantec.com/img/company_o.gif',1)" onMouseOut="showhide('sub5',0);MM_swapImgRestore()">


      <table width="190" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="190" align="left" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td colspan="2" align="left" valign="top" bgcolor="#FFFFFF" ><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="2" class="dropstyle"></td>

          </tr>
          <tr>
            <td colspan="2" valign="top" bgcolor="#FFFFFF">
            <p>
            <a href="http://www.pixmantec.com/company/press_and_info.html">Press &amp; Info</a><br>
            <a href="http://www.pixmantec.com/company/partners.html">Partners</a><br>
            <a href="http://www.pixmantec.com/company/legal_notices.html">Legal Notices</a><br>

            <a href="http://www.pixmantec.com/company/about_pixmantec.html">About Pixmantec</a><br>
            <a href="http://www.pixmantec.com/company/jobs.html">Jobs</a><br>
            <a href="http://www.pixmantec.com/company/contact.html">Contact</a><br>
            </p>
            </td>
          </tr>
      </table></td>

      <td width="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans_vert.gif"><img src="http://www.pixmantec.com/img/top.gif" width="3" height="3"></td>
    </tr>
    <tr>
      <td height="3" colspan="2"><table width="190" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="3" height="3" align="left" valign="top"><img src="http://www.pixmantec.com/img/bot.gif" width="3" height="3"></td>
          <td width="187" height="3" align="left" valign="top" background="http://www.pixmantec.com/img/drop_trans.gif"><img src="http://www.pixmantec.com/img/transparent.gif" width="1" height="3"></td>
        </tr>
      </table></td>

  </tr>
</table>
</div>
    </div>

    <div id="content">
    <h1>RawShooter | product family</h1>
    <p>Her kommer indholdet</p>
    <iframe src="include/bottom.asp" scrolling="no" height="160" width="630" frameborder="0"></iframe>

    </div>
</div>
</body>
</html>
Avatar billede mvk Nybegynder
21. marts 2006 - 08:12 #10
tak :)
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