Volver al Foro de Diseño de páginas Web

CSS darme problemas

  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Abril 20th, 2009, 9:55 pm

Este CSS es algo que me da problemas. Este diseño no va a entrar en Wedevoy rediseño, Im trabajando en un solo lado de los proyectos, mientras que Im que espera de algunos comentarios sobre mis diseños que se van a ir en wedevoy.

De todos modos, el diseño de esta parte del proyecto se puede encontrar aquí . Necesito ayuda sobre el mismo en los ámbitos siguientes:
  • El Diseño
  • Mirar
¿Qué Im que básicamente se trata de pedir una revisión y un poco de ayuda.

Una vez que vea el diseño, te darás cuenta de que parte del contenido (el uno con Lorem Ipsum) no va a la muy borde de la pantalla...Podría hacerlo, todo lo que tengo que hacer es cambiar el ancho de #cuerpo de 67.75 a unos 80 o 75 (en mi resolución)...el problema de que a pesar de que, si reducir la pantalla o la utilización de una menor resolución que obtener un x-desplazador (Barra de desplazamiento que se desplaza de un lado a otro).

Esto se está convirtiendo en un poco frustrante...Im pensando en ir a las tablas ahora :lol:

Otra cosa que necesita / quiere es una simple revisión en el sitio...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • Anonymous
  • Bot
  • No Avatar
  • Registrado: 25 Feb 2008
  • Mensajes: ?
  • Loc: Ozzuland
  • Status: Online

Nota Abril 20th, 2009, 9:55 pm

  • roje0913
  • Student
  • Student
  • No Avatar
  • Registrado: Sep 08, 2006
  • Mensajes: 78
  • Status: Offline

Nota Abril 20th, 2009, 10:26 pm

Supongo que depende del tipo de lo que usted está utilizando para el sitio. Parece un poco oscura, pero que pueden estar bien si está inclinado a algo más joven o nervioso. si usted no quiere tener el texto a través de todo el camino, ¿qué pasa con un tenue fondo repetible en ese lado para no dejar que mirar como algo que falta? Tal vez algunos de sus iconos y comentarios enviados por animar a que sólo un poco. Y que un buen logotipo y yo creo que hay un ganador. Por favor, tenga en cuenta que si usted está haciendo esto para un cliente, lo que él / ella piensa que es todo lo que importa :-)
  • natas
  • PHP Ninja
  • Proficient
  • No Avatar
  • Registrado: Mar 28, 2009
  • Mensajes: 305
  • Loc: AFK
  • Status: Offline

Nota Abril 21st, 2009, 12:18 am

Código: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>Content Management System</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            
            body {
                background-color: #000000;
            }
            
            a {
                text-decoration: none;
                color: #ffcc00;
            }
            
            a:hover {
                text-decoration: underline;
            }
            
        p {
        padding: 0 10px 0 5px;
        text-align: justify;
        }

            #header {
                width: 98%;
                height: 100px;
                padding-left: 2%;
                background-color: #444444;
                background-image: url('header.png');
            }
            
            #tnav {
                width: 100%;
                height: 20px;
                text-align: center;
                background-color: #444444;
                border-top: 1px solid #000000;
                border-bottom: 1px solid #000000;
            }
            
            #tnav ul li {
                display: inline;
                list-style-type: none;
            }
            
            #tnav ul li a {
                height: 100%;
                color: #cccccc;
                padding-left: 10px;
                padding-right: 10px;
                background-color: #333333;
            }
            
            #tnav ul li a:hover {
                height: 100%;
                color: #bbbbbb;
                padding-left: 10px;
                padding-right: 10px;
                background-color: #222222;
            }
    
        #wrapper {
        width: 1000px;
        margin: 0 auto;
        }
            
            #container {
                width: 100%;
                height: 100%;
                background-color: #555555;
            }
            
            #body {
                width: 790px;
                float: left;    
        padding: 0 0 0 190px;
            }
            
            #body p {
                margin-bottom: 10px;
                margin-left: 5px;
            }
            
            .box_head {
                width: 100%;
                clear: right;
                color: #cecece;
                text-align: center;
                background-color: #666666;
                border-bottom: 1px dashed #222222;
            }
            
            .cfoot {
                float: right;
            }
            
            #rnav {
                width: 190px;
                height: 100%;
                color: #AAAAAA;
        position: absolute;
                background-color: #222222;
                background-position: right;
                background-image: url('right_back.png');
            }
            
            #footer {
                clear: both;
                color: #cecece;
                text-align: center;
                background-color: #333333;
                border-top: 1px dashed #000000;
            }
        </style>
    </head>
    <body>
    <div id="wrapper">
    <div id="header">
        <h1>My Site</h1>

        <p>Witty Textual Line Here</p>
    </div>
    <div id="tnav">
        <p><ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Forum</a></li>
                <li><a href="#">Blog</a></li>

                <li><a href="#">Profile</a></li>
                <li><a href="#">Links</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact us</a></li>
            </ul></p>
    </div>
    <div id="container">

        <div id="body">
            <p class="box_head">Some Header Text 1</p>
            <p>Lorem ipsum ne ius alterum vivendum iracundia, ad eos graecis adipiscing. Dolorum repudiandae eam

ex, aeterno verterem usu ad, ne eos graeco deserunt. Nam te antiopam constituto, mea in affert suscipit

quaerendum, ex eam suas nobis recusabo. Altera fuisset temporibus ei pri, assum nonumy possim sit ne, usu vero

falli aeque an. Nec cu idque oporteat assueverit, prompta minimum consectetuer eam ea, tale tation repudiare vix

te. Eum audiam meliore adolescens no, cu eam takimata gloriatur, vidit ignota moderatius eum at.</p>
            <p>Nihil oratio conclusionemque at come, per choro minimum insolens ex. Nam ne audire labitur

placerat. Odio numquam suscipiantur ex has, pri ne everti insolens laboramus. Ea legere assueverit concludaturque

mea, quo ex patrioque gubergren sententiae. Fierent deleniti praesent ex pri, ludus inermis et mea.</p>
            <p>Ne vel alii solum accommodare, eam eu nominavi delicata mandamus, mea dicta latine no. Dicit

accusata definiebas no quo, in atqui discere repudiandae eos. Cu expetenda corrumpit rationibus quo, no pri

vidisse omnesque. Eu mea munere suscipit delicatissimi, in augue debet persius vim, graeco vivendum accommodare

sed an. Quodsi epicuri repudiandae ne quo, ei eos eros scaevola suavitate, sed scaevola appetere ad. Nostrud

civibus gubergren eos et, et eam simul nihil pericula. Vix an nibh aliquyam, munere option eam eu, in eum dicta

solet adversarium.</p>
            <p>Suas saepe ius et, ei prima posse eos. Ut postea tamquam minimum per, hinc omnesque repudiandae ne

eos. Qui rebum oporteat necessitatibus ad, audiam convenire prodesset pro te. Vim ne consul graecis reformidans,

come alienum dissentias eu, eu duo scripta legimus detraxit. Dico mazim timeam at eam, sit eu iriure aliquyam. Vis

omnium omittam efficiendi ea, porro mollis accommodare per eu.</p>

            <p>At augue nonumy consul mea, cu tale oratio comprehensam pro. Decore dolore nullam mel at, ad elit

semper iuvaret vel, mei at vide etiam pertinax. Ut ipsum tamquam suscipit eos, ea erat inciderint est. An est

solum voluptatum dissentiunt, putant aliquip facilis mea no. Quod magna interesset sea ea, ne mea sonet partem

prompta, eu mutat adhuc principes has.</p>
            <p>Meis iuvaret disputationi sed cu, facilisi corrumpit id come. An quem nullam adversarium per, his

ei nobis solet consequuntur. His ne vide vitae delectus, mei debet commodo ne. Eu dico iusto splendide mea, wisi

illum consul ei nec. Dicunt deleniti pro te, ne est quis sanctus sadipscing. Populo omnesque no pro, ipsum

aliquip torquatos an pro, ne enim inani mel.</p>
            <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">0</a></p>
            <p class="box_head">Some Header Text 2</p>
            <p>Iisque mentitum luptatum vix ea, has an possit verterem facilisis, ut usu veri iriure inciderint.

Cu utinam fabellas voluptatibus vix, ad sit tollit conclusionemque. Quod omnis suscipiantur nam eu, te luptatum

sententiae percipitur duo, id vocent inermis democritum come. No mucius ornatus perfecto come, ea mei antiopam

philosophia, vis cu adhuc expetendis mnesarchum. Luptatum scriptorem in his, te pri vidisse efficiantur

ullamcorper. Ne populo latine persecuti vix, eu eum rebum postea delenit, ut mei tamquam nonummy.</p>

            <p>Vim in dicta expetenda, et mei quem eirmod luptatum. Ea sint illum elitr eum, ea postea abhorreant

appellantur duo. Aperiam consulatu ut eam, veri vidisse facilisis ne usu. Per idque facete invenire id, quo porro

honestatis consequuntur in. Ne noster audire latine vis, dicit errem tincidunt ius id. Cu duo assentior

expetendis definiebas, novum legimus definitiones te vel.</p>
            <p>Eu come mollis noluisse scriptorem, dico brute disputando ut sed, nam quot eripuit quaerendum eu.

An pro quaeque saperet disputando, pri id ignota alienum disputationi, veritus quaestio nec id. Eos eius maiorum

sententiae no, sed nisl impedit nominati cu. Eos debet aliquam singulis eu, tale accusamus est te. Sit ne unum

quas dicta, pri in elitr aeterno pertinax. Vix quod tale disputando ad, nec quot congue appareat eu, vix vivendum

urbanitas et.</p>
            <p>Unum quas laoreet eos cu, vel id porro postea audire. Tempor probatus constituam vis te, eum eu

omnes dicant mediocrem. Id erat diceret ullamcorper vel. Cu consul dicunt est, zzril vitae euismod ea vix, an sea

apeirian takimata salutatus. Sed at audiam detraxit elaboraret.</p>
            <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">4</a></p>
        </div>


        <div id="rnav">
            <p>Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey

Hey Hey</p>
        </div>
        <div id="footer">
            <p>Copyright &copy; 2009-2010</p>
        </div>
    </div>
    </div>

    </body>
</html>
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4.     <head>
  5.         <title>Content Management System</title>
  6.         <style type="text/css">
  7.             * {
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             
  12.             body {
  13.                 background-color: #000000;
  14.             }
  15.             
  16.             a {
  17.                 text-decoration: none;
  18.                 color: #ffcc00;
  19.             }
  20.             
  21.             a:hover {
  22.                 text-decoration: underline;
  23.             }
  24.             
  25.         p {
  26.         padding: 0 10px 0 5px;
  27.         text-align: justify;
  28.         }
  30.             #header {
  31.                 width: 98%;
  32.                 height: 100px;
  33.                 padding-left: 2%;
  34.                 background-color: #444444;
  35.                 background-image: url('header.png');
  36.             }
  37.             
  38.             #tnav {
  39.                 width: 100%;
  40.                 height: 20px;
  41.                 text-align: center;
  42.                 background-color: #444444;
  43.                 border-top: 1px solid #000000;
  44.                 border-bottom: 1px solid #000000;
  45.             }
  46.             
  47.             #tnav ul li {
  48.                 display: inline;
  49.                 list-style-type: none;
  50.             }
  51.             
  52.             #tnav ul li a {
  53.                 height: 100%;
  54.                 color: #cccccc;
  55.                 padding-left: 10px;
  56.                 padding-right: 10px;
  57.                 background-color: #333333;
  58.             }
  59.             
  60.             #tnav ul li a:hover {
  61.                 height: 100%;
  62.                 color: #bbbbbb;
  63.                 padding-left: 10px;
  64.                 padding-right: 10px;
  65.                 background-color: #222222;
  66.             }
  67.     
  68.         #wrapper {
  69.         width: 1000px;
  70.         margin: 0 auto;
  71.         }
  72.             
  73.             #container {
  74.                 width: 100%;
  75.                 height: 100%;
  76.                 background-color: #555555;
  77.             }
  78.             
  79.             #body {
  80.                 width: 790px;
  81.                 float: left;    
  82.         padding: 0 0 0 190px;
  83.             }
  84.             
  85.             #body p {
  86.                 margin-bottom: 10px;
  87.                 margin-left: 5px;
  88.             }
  89.             
  90.             .box_head {
  91.                 width: 100%;
  92.                 clear: right;
  93.                 color: #cecece;
  94.                 text-align: center;
  95.                 background-color: #666666;
  96.                 border-bottom: 1px dashed #222222;
  97.             }
  98.             
  99.             .cfoot {
  100.                 float: right;
  101.             }
  102.             
  103.             #rnav {
  104.                 width: 190px;
  105.                 height: 100%;
  106.                 color: #AAAAAA;
  107.         position: absolute;
  108.                 background-color: #222222;
  109.                 background-position: right;
  110.                 background-image: url('right_back.png');
  111.             }
  112.             
  113.             #footer {
  114.                 clear: both;
  115.                 color: #cecece;
  116.                 text-align: center;
  117.                 background-color: #333333;
  118.                 border-top: 1px dashed #000000;
  119.             }
  120.         </style>
  121.     </head>
  122.     <body>
  123.     <div id="wrapper">
  124.     <div id="header">
  125.         <h1>My Site</h1>
  127.         <p>Witty Textual Line Here</p>
  128.     </div>
  129.     <div id="tnav">
  130.         <p><ul>
  131.                 <li><a href="#">Home</a></li>
  132.                 <li><a href="#">Forum</a></li>
  133.                 <li><a href="#">Blog</a></li>
  135.                 <li><a href="#">Profile</a></li>
  136.                 <li><a href="#">Links</a></li>
  137.                 <li><a href="#">About Us</a></li>
  138.                 <li><a href="#">Contact us</a></li>
  139.             </ul></p>
  140.     </div>
  141.     <div id="container">
  143.         <div id="body">
  144.             <p class="box_head">Some Header Text 1</p>
  145.             <p>Lorem ipsum ne ius alterum vivendum iracundia, ad eos graecis adipiscing. Dolorum repudiandae eam
  147. ex, aeterno verterem usu ad, ne eos graeco deserunt. Nam te antiopam constituto, mea in affert suscipit
  149. quaerendum, ex eam suas nobis recusabo. Altera fuisset temporibus ei pri, assum nonumy possim sit ne, usu vero
  151. falli aeque an. Nec cu idque oporteat assueverit, prompta minimum consectetuer eam ea, tale tation repudiare vix
  153. te. Eum audiam meliore adolescens no, cu eam takimata gloriatur, vidit ignota moderatius eum at.</p>
  154.             <p>Nihil oratio conclusionemque at come, per choro minimum insolens ex. Nam ne audire labitur
  156. placerat. Odio numquam suscipiantur ex has, pri ne everti insolens laboramus. Ea legere assueverit concludaturque
  158. mea, quo ex patrioque gubergren sententiae. Fierent deleniti praesent ex pri, ludus inermis et mea.</p>
  159.             <p>Ne vel alii solum accommodare, eam eu nominavi delicata mandamus, mea dicta latine no. Dicit
  161. accusata definiebas no quo, in atqui discere repudiandae eos. Cu expetenda corrumpit rationibus quo, no pri
  163. vidisse omnesque. Eu mea munere suscipit delicatissimi, in augue debet persius vim, graeco vivendum accommodare
  165. sed an. Quodsi epicuri repudiandae ne quo, ei eos eros scaevola suavitate, sed scaevola appetere ad. Nostrud
  167. civibus gubergren eos et, et eam simul nihil pericula. Vix an nibh aliquyam, munere option eam eu, in eum dicta
  169. solet adversarium.</p>
  170.             <p>Suas saepe ius et, ei prima posse eos. Ut postea tamquam minimum per, hinc omnesque repudiandae ne
  172. eos. Qui rebum oporteat necessitatibus ad, audiam convenire prodesset pro te. Vim ne consul graecis reformidans,
  174. come alienum dissentias eu, eu duo scripta legimus detraxit. Dico mazim timeam at eam, sit eu iriure aliquyam. Vis
  176. omnium omittam efficiendi ea, porro mollis accommodare per eu.</p>
  178.             <p>At augue nonumy consul mea, cu tale oratio comprehensam pro. Decore dolore nullam mel at, ad elit
  180. semper iuvaret vel, mei at vide etiam pertinax. Ut ipsum tamquam suscipit eos, ea erat inciderint est. An est
  182. solum voluptatum dissentiunt, putant aliquip facilis mea no. Quod magna interesset sea ea, ne mea sonet partem
  184. prompta, eu mutat adhuc principes has.</p>
  185.             <p>Meis iuvaret disputationi sed cu, facilisi corrumpit id come. An quem nullam adversarium per, his
  187. ei nobis solet consequuntur. His ne vide vitae delectus, mei debet commodo ne. Eu dico iusto splendide mea, wisi
  189. illum consul ei nec. Dicunt deleniti pro te, ne est quis sanctus sadipscing. Populo omnesque no pro, ipsum
  191. aliquip torquatos an pro, ne enim inani mel.</p>
  192.             <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">0</a></p>
  193.             <p class="box_head">Some Header Text 2</p>
  194.             <p>Iisque mentitum luptatum vix ea, has an possit verterem facilisis, ut usu veri iriure inciderint.
  196. Cu utinam fabellas voluptatibus vix, ad sit tollit conclusionemque. Quod omnis suscipiantur nam eu, te luptatum
  198. sententiae percipitur duo, id vocent inermis democritum come. No mucius ornatus perfecto come, ea mei antiopam
  200. philosophia, vis cu adhuc expetendis mnesarchum. Luptatum scriptorem in his, te pri vidisse efficiantur
  202. ullamcorper. Ne populo latine persecuti vix, eu eum rebum postea delenit, ut mei tamquam nonummy.</p>
  204.             <p>Vim in dicta expetenda, et mei quem eirmod luptatum. Ea sint illum elitr eum, ea postea abhorreant
  206. appellantur duo. Aperiam consulatu ut eam, veri vidisse facilisis ne usu. Per idque facete invenire id, quo porro
  208. honestatis consequuntur in. Ne noster audire latine vis, dicit errem tincidunt ius id. Cu duo assentior
  210. expetendis definiebas, novum legimus definitiones te vel.</p>
  211.             <p>Eu come mollis noluisse scriptorem, dico brute disputando ut sed, nam quot eripuit quaerendum eu.
  213. An pro quaeque saperet disputando, pri id ignota alienum disputationi, veritus quaestio nec id. Eos eius maiorum
  215. sententiae no, sed nisl impedit nominati cu. Eos debet aliquam singulis eu, tale accusamus est te. Sit ne unum
  217. quas dicta, pri in elitr aeterno pertinax. Vix quod tale disputando ad, nec quot congue appareat eu, vix vivendum
  219. urbanitas et.</p>
  220.             <p>Unum quas laoreet eos cu, vel id porro postea audire. Tempor probatus constituam vis te, eum eu
  222. omnes dicant mediocrem. Id erat diceret ullamcorper vel. Cu consul dicunt est, zzril vitae euismod ea vix, an sea
  224. apeirian takimata salutatus. Sed at audiam detraxit elaboraret.</p>
  225.             <p class="cfoot">Posted By: <a href="#">Bogey</a> Comments: <a href="#">4</a></p>
  226.         </div>
  229.         <div id="rnav">
  230.             <p>Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey Hey
  232. Hey Hey</p>
  233.         </div>
  234.         <div id="footer">
  235.             <p>Copyright &copy; 2009-2010</p>
  236.         </div>
  237.     </div>
  238.     </div>
  240.     </body>
  241. </html>


Lo pongo todo en un div contenedor y ajustado sus columnas un poco. pero no puedo entender por qué el "RNAV" de fondo no continúa todo el camino. hmmm
Moderator Remark: Added [code] tags
Custom Web Design
  • Bogey
  • Bogey
  • Genius
  • Avatar de Usuario
  • Registrado: Jul 14, 2005
  • Mensajes: 8211
  • Loc: USA
  • Status: Offline

Nota Abril 21st, 2009, 2:49 pm

roje0913 escribió:
Supongo que depende del tipo de lo que usted está utilizando para el sitio. Parece un poco oscura, pero que pueden estar bien si está inclinado a algo más joven o nervioso. si usted no quiere tener el texto a través de todo el camino, ¿qué pasa con un tenue fondo repetible en ese lado para no dejar que mirar como algo que falta? Tal vez algunos de sus iconos y comentarios enviados por animar a que sólo un poco. Y que un buen logotipo y yo creo que hay un ganador. Por favor, tenga en cuenta que si usted está haciendo esto para un cliente, lo que él / ella piensa que es todo lo que importa :-)

La razón de que la imagen que realmente no necesitan trabajar porque a ambas partes a ser flexibles...si nos fijamos en este sitio , Verá que el lado izquierdo de navegación es el mismo que el lado derecho de contenido y no el uso de imágenes...Hice ese sitio y no recuerdo cómo lo hice :lol:

Creo que Im que va a utilizar el mismo código HTML y CSS en ese sitio, pero el cambio es un poco...
"Bring forth therefore fruits meet for repentance:" Matthew 3:8
  • roje0913
  • Student
  • Student
  • No Avatar
  • Registrado: Sep 08, 2006
  • Mensajes: 78
  • Status: Offline

Nota Abril 22nd, 2009, 7:45 pm

incluso si usted utiliza una bg repetible. como el patrón en la parte superior de la relación que acaba de enviarme. Pule la textura de que realmente el sitio de un lote.

Página 1 de 1

Publicar Información

  • Total de mensajes en este tema: 5 mensajes
  • Usuarios navegando por este Foro: roelof y 114 invitados
  • No puede abrir nuevos temas en este Foro
  • No puede responder a temas en este Foro
  • No puede editar sus mensajes en este Foro
  • No puede borrar sus mensajes en este Foro
  • No puede enviar adjuntos en este Foro
 
 

© 2011 Unmelted, LLC. Ozzu® es una marca registrada de Unmelted, LLC