SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    aquí
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    <div> command ???

    I'd like to say first that <div> command is something I don't understand very well...it is confusing for me...

    I have a menu taken from the internet made with javascript. In this code the <div> command is used several times with 'position:absolute'. The point is that inside my design the position of this menu wouldn't be absolute but relative (I want it to be inside a cell)...but I don't know how to do it...how could I make this menu with a relative position?

    ------------------------------

    ORIGINAL CODE:

    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="MFXinitMenu()">

    <table width="162" height="353" border="1" cellspacing="0" cellpadding="0" class="tabla-fondo">
    <tr>
    <td class="tabla-fondo" width="162"><img src="images/fondillo.gif" width="162" height="4"></td>
    </tr>
    </table>

    <DIV id="MFX0" style="position:absolute; width:147px; height:20px; z-index:2; left:5px; top: 107px; visibility: hidden; background-color: #aad0aa; layer-background-color: #66cc71; border: 1px none #000000"><img src="/area_miembros/images/cuad.gif" width="9" height="5" alt="bullet cuadrado azul"><a href="#" onClick="MFXrunMenu(0,5)">enlace 1</a></DIV>
    <DIV id="MFX1" style="position:absolute; width:142px; height:60px; z-index:1; left:5px; top: 127px; visibility: hidden; background-color: #663371; layer-background-color: #234A71; border: 1px none #000000">

    <table width="142" border="1" cellspacing="0" cellpadding="2" summary="submenú de servicios">
    <tr>
    <td><img src="/area_miembros/images/cuad_blanco.gif" width="9" height="5" alt="bullet cuadrado blanco"><a class="enlace-01" href="/area_miembros/correo/correo.jsp">enlace 12</a></td>
    </tr>
    <tr>
    <td><img src="/area_miembros/images/cuad_blanco.gif" width="9" height="5" alt="bullet cuadrado blanco"><a class="enlace-01" href="mailto:risespana@risolidaria.org">enlace 13</a></td>
    </tr>
    </table>

    </DIV>

    <DIV id="MFX4" style="position:absolute; width:147px; height:20px; z-index:2; left:5px; top: 267px; visibility: hidden; background-color: #234A71; layer-background-color: #234A71; border: 1px none #000000"><img src="/area_miembros/images/cuad.gif" width="9" height="5" alt="bullet cuadrado azul"><a href="#" onClick="MFXrunMenu(4,5)">Grupos de Trabajo</a></DIV>
    <DIV id="MFX5" style="position:absolute; width:142px; height:30px; z-index:1; left:5px; top: 287px; visibility: hidden; background-color: #234A71; layer-background-color: #234A71; border: 1px none #000000">

    <table width="142" border="0" cellspacing="2" cellpadding="0" summary="grupos trabajo">
    <tr>
    <td colspan="2"><img src="/area_miembros/images/cuad_blanco.gif" width="9" height="5" alt="bullet cuadrado blanco"><a class="enlace-01" href="http://grupostrabajo.risolidaria.org/index.html" target="_blank">Entrar Grupos Trabajo</a>
    <br>
    </td>
    </tr>
    </table>

    </DIV>


    <DIV id="MFX8" style="position:absolute; width:147px; height:20px; z-index:2; left:5px; top: 427px; visibility: hidden; background-color: #234A71; layer-background-color: #234A71; border: 1px none #000000"><img src="/area_miembros/images/cuad.gif" width="9" height="5" alt="bullet cuadrado azul"><a href="#" onClick="MFXrunMenu(8,5)">Administraci&oacute;n general </a></DIV>
    <DIV id="MFX9" style="position:absolute; width:142px; height:130px; z-index:1; left:5px; top: 447px; visibility: hidden; background-color: #234A71; layer-background-color: #234A71; border: 1px none #000000">

    <table width="142" border="0" cellspacing="0" cellpadding="2" summary="Administracion">
    <tr>
    <td><img src="/area_miembros/images/cuad_blanco.gif" width="9" height="5" alt="bullet cuadrado blanco"><a class="enlace-01" href="/area_miembros/gestion_usuarios/listaUsuarios.jsp">Gesti&oacute;n de usuarios</a> </td>
    </tr>
    <tr>
    <td><img src="/area_miembros/images/cuad_blanco.gif" width="9" height="5" alt="bullet cuadrado blanco"><a class="enlace-01" href="/area_miembros/intoArtfacto.jsp">Art*facto</a>
    </td>
    </tr>
    </table>

    </DIV>


    </body>

    -----------------


    Please help!

    Thank you very much!!!

  2. #2
    Follow Me On Twitter: @djg gold trophysilver trophybronze trophy Dan Grossman's Avatar
    Join Date
    Aug 2000
    Location
    Philadephia, PA
    Posts
    20,580
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    <div> is just used as a container and all that stuff in the "style=" is defining CSS styles for everything from the <div> to the </div>...

    If you really want to understand it enough to change it and write your own, get a good CSS book, like "Designing with Web Standards", "Eric Meyers on CSS" or even SitePoint's "HTML Utopia".

  3. #3
    SitePoint Member livetoserve's Avatar
    Join Date
    Jul 2003
    Location
    maryland
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    div's are a tag used to execute various attributes in CSS. alighnment, classes, id's, etc. I'd suggest visiting http://www.w3schools.com and reading through a CSS tutorial to really learn the power of the <div></div> tags.

    livetoserve
    Living2Serve Ministries
    Serve As Jesus Did!!
    Mark 10:45

  4. #4
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by livetoserve
    div's are a tag used to execute various attributes in CSS.
    not to be nitpicking, but...divs are not used to "execute" anything. as dan points out, they're containers. div stands for division. they're used to structure your documents into "related" chunks.

    once you've defined a div (and given it an id or class) you can then style it via CSS.

    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  5. #5
    SitePoint Enthusiast
    Join Date
    Jun 2003
    Location
    aquí
    Posts
    39
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very mauch guys


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •