Holas...
hace Tiempo cuando no Savia nada de Css, me puse a esperimentar con un Diseño... vi que era facil y lo modifique como Si nada.. dije wow!! dejame hacer un tutorial de todo lo que aprenda de css en esos tiempos.. por ahora no se mas de css, tal ves Algunas Cositas , pero esto es lo que Aprendi y mucho mas despues pondree..


_______________________________________________________________________________________________
______________________

Pues Primeramente para Recordar...
Les Recomiendo a Todos que Usen Este Diseño
de Estructura basica para Editar porque con el Aprendi mucho...

http://www.paginawebgratis.es/forum/viewtopic.php?t=48674

Si quieres Adaptar Tu plantilla puedes Ir a:

http://www.paginawebgratis.es/forum/viewtopic.php?t=27181
o
http://www.paginawebgratis.es/forum/viewtopic.php?t=43974&highlight=adaptar+++dise%F1o+css


Aqui empezamos Nuestro Tutorial
Pero primero quiero os dar los Creditos porque este Tutorial no lo ise Solo
Procssdesign me ayudo y de algunos Tutoriales...
________________________________________________

Estos Son las partes de un Diseño.las Esenciales

HEADER:CABEZAL
MENU:MENU
SIDEBAR:BOX DERECHO
FOOTER:LO DE ABAJO

Yo Statings lo primero que pude Aprender es como modificar la Columna en Blosport

es Simplemente Asi Buscas en TEXTO POR DEBAJO DE PAGINAS [Recuerda blosport]

Como Dije en Texto por Debajo Buscas el Codigo:

<div id='sidebar-wrapper'> hasta <!-- end content-wrapper -->


y lo cambias por un Codigo Blosport que sea de una Columna [Sidebar]

y ahi ya Estas Cambiando el Sidebar.


Yo el primer Diseño Blosport lo Encontre en:

Pwg-Design.es.tl

______________________________________________

Ahora en Css design Diseños

si tu kieres el footer arriva solo tienes que mover
los <div id="footer">contenido del footer</div>
*arriva
pero en el Style Buscar #footer
*y si dice
*botton <--es abajo
*ponle up
*o
*top


left<----izkierda
*right<-----derecha

esto es para Cambiar el Sidebar[ Columna] de Derecha a Izquierda como Dice Arriba


Donde lo Busco?

pues
*depende como dice
*siempre
*para el contenido
*ciempre dice
*<div id="content"></div>
*biene siendo el contenido
pero
el sidebar
*aveces
*biene por su nombre
*sidebar
*o
*left
*o right
*o
leftsite


Para modificar un Diseño en Texto por ensima de la pagina si quieres
cambiar el menu busca

<!-- Begin Navigation -->

hasta

<!-- End Navigation -->


y Asi con todos solo que Algunos estan en Texto por encima de la pag.


Por ejemplo para el Cabezal:

<!-- Begin Header -->
hasta
<!-- End Header -->

menu


<!-- Begin Navigation -->
Hasta

<!-- End Navigation -->



Eso esta en Texto por ensima de la Pagina...

Ahora Cambio a Texto por debajo que en Texto por debajo esta el Sidebar Y Footer
que son:

Columna o mejor Dicho Sidebar es

<!-- Begin Left Column -->

hasta

<!-- End Faux Columns -->


y Footer

<!-- Begin Footer -->

hasta

<!-- End Footer -->




Hay podras modificar el Header- menu- Sidebar-Footer



Recuerden que no Siempre pueden ser los mismos Codigos pueden Ser Id Div como sea
depende...


Quieres que pues Redondear un Borde????
usa:

-moz-border-radius: 30px;

agregalo a css a cualquier Div

Esplicacion del Cabezal

- margin-left: =Distancia de la cabecera del extremo izquierdo
- width: = Ancho de la cabecera
- height: = Altura de la cabecera
- background-color = Color de fondo de cabecera
- background-image:url(); = Fondo de escritorio (URL) en paréntesis pegar
- si desea insertar una imagen, la misma anchura que la cabecera
- color:#000000; = En el texto de la cabecera de color, texto
- font-size:13px; = Tamaño del texto
- border: 1px solid #FFFFFF = Marco / marco de la fuerza / Color


Esplicacion del Contenido

- top: = Distancia a la caja de texto encima
- margin-left: = Distancia cuadro de texto desde el borde izquierdo
- padding:10px; = Sumario 10 de Píxeles bordes a la página
- width: = Ancho de la caja de texto
- height: = Altura de la caja de texto
- background-color = Color de fondo del cuadro de texto
- background-image:url(); = Fondo de escritorio (URL) en paréntesis pegar
- si desea insertar una imagen, la misma anchura que el cuadro de texto !
- color:#000000; = El color del texto en el cuadro de texto
- font-size:13px; = Tamaño de texto
- border: 1px solid #C9C9C9 = Marco / marco de la fuerza / Color
- overflow:auto;} = crea un cuadro de texto desplegable


Esplicacion de Sidebar

- top: = Distancia desde la parte superior de la caja
- margin-left: = Cuadro de distancia desde el borde izquierdo
- width: = Ancho de la caja
- height: = Altura de la caja
- background-color = Color del fondo de la caja
- background-image:url(); = Fondo del escritorio (URL) pegar alguna imagen
- si se inserta una imagen tiene que tener la misma anchura que el cuadro
- color:#000000; = El color del texto de la caja
- font-size:13px; = El tamaño del texto de la caja
- border: 1px solid #C9C9C9 = El color del marco
- overflow:auto;} = Crear un cuadro desplegable

Sp4mm3r escribió:Se jodio tu perfi

hhhmmmm ahhhhhhyyy!!! que pasoo!

Lo podrias haber ordenado, muchas faltas de ortografia..
No me gusto, no se entiende casi nada....
Es un buen aporte, pero le falta limpieza, orden y corregir las faltas de ortografia.

Buenoo es que no hay Casi Tiempoo.. xD

~Statings escribió:Les Recomiendo a Todos que Usen Este Diseño
de Estructura basica para Editar porque con el Aprendi mucho...

http://www.paginawebgratis.es/forum/viewtopic.php?t=48674

jijiji ese diseño lo HISE yo xD


bueno hay algunos errocitos

~Statings escribió:
<div id='sidebar-wrapper'> hasta <!-- end content-wrapper -->

no seria hasta </div> ?

~Statings escribió:

Sp4mm3r escribió:Se jodio tu perfi

hhhmmmm ahhhhhhyyy!!! que pasoo!

tenias activado el html,se desconfiguro la pag...(ya lo desactive)

Falta limpieza para que se entienda mejor pero aun asi muchas graciaas colega

yo creo que por lo menos Sabran algo

Si, si. Como dije se entiende

agan un diseño con esto...