Ayuda adaptando un diseño a mi antojo.

[jafp_pe]

Bueno amigos ando adaptando un diseño , que me gusta regularmente ... claro por que no esta acabado , hay cosas que se me complica... espero que me ayuden , bueno estos son los problemas , aqui muestro una imagen .



Este es el Link de la web , donde estoy armando poco a poco ...
http://www.juegosfatal.com/index-ultimo.php

/////// que es lo que deseo hacer? ... pues como se daran cuenta mi header es entero , osea no tengo diviciones para los baners adsense ni para las categorias , ya que es solo un fondo .. trato de colocar categorias y adsense mediante un MAP css-p element , pero en verdad uno es mas complicado ... y no se ve dinamico ... , quiero dividirlo como quiero mediante div , halgo así como TABLAS hablando en lenguaje html.

pero no se como hacerlo lo hago , pero se descuadra orriblemente ...

tambien quiero que los texto de descripcion de juegos se muestren en JUSTIFICADO...

EN LA IMAGEN DE ARRIBA MUESTRO COMO QUIERO QUE LA WEB ESTE DIVIDIDA LO E MARCADO PARA QUE SE DEN CUENTA AMIGOS... no quiero que sea entero quiero que este dividido , en div o en otros , para poder poner las categorias y el baner adsense.



bueno y así espero su celestial ayuda.

muchas gracias.

[jomaruro]

Iniciado por jafp_pe

tambien quiero que los texto de descripcion de juegos se muestren en JUSTIFICADO...

Hola:

Para eso solo tienes que indicar en el div correspondiente lo siguiente:

Código:

text-align:justify;

saludos

[jafp_pe]

gracias, eres bacan :( y en lo demas eso si est aun poco liado verdad.. joder :( hacer algo como tablas con css no entiendo.. como seria.. en este caso así como lo quiero..

[jomaruro]

Hola de nuevo:

Modifica tu header así:

Código:

        <div id="header">
            <div id="menu">
                <ul>
                    <li><a href="index.php" class="hover">Inicio</a></li>
                    <li><a href="#">Suscríbete </a></li>
                    <li><a href="http://www.forotematico.com">Nuestro Foro</a></li>
                    <li><a href="http://www.hombresfatales.com">Hombres Lindos</a></li>
                    <li><a href="http://www.mujeresfatales.com">Mujeres Lindas</a></li>
                    <li><a href="http://www.refugiofatal.com">Anime</a></li>
                    <li class="last"><a href="#">Contactar</a></li>
                </ul>
            </div>                
            <div id="ponelogo">
                <a href="index.php">
                    <img src="images/logo.png" alt="Juegos Gratis" border="0" class="logo" />
                </a>  
            </div>
            <div id="publi">
                <script type="text/javascript"><!--
                    google_ad_client = "pub-2655004646912857";
                    /* FORO TEMATICO 468x15, creado 5/11/08 */
                    google_ad_slot = "8062288509";
                    google_ad_width = 468;
                    google_ad_height = 15;
                    //-->
                </script>

                <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>

                <script type="text/javascript"><!--
                    google_ad_client = "pub-2655004646912857";
                    /* FORO TEMATICO 468x15, creado 5/11/08 */
                    google_ad_slot = "8062288509";
                    google_ad_width = 468;
                    google_ad_height = 15;
                    //-->
                </script>

                <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
            </div>
            <div id="categorias">
                <p class="topText">CATEGORIAS:<span class="smallTxt">Coches, para mujeres, aventuras</span></p>
                <a href="#" class="readMore"></a>
            </div>
        </div>

y en el CSS añade:

Código:

#menu{
    height:31px;
}

#publi{
	width: 660px;
	height:117px;
	float:right;
	padding-top:20px;
	text-align:center;
}

#ponelogo{
	float:left;
	width:300px;
	height:236px;
}

#categorias {
	width: 660px;
	height:90px;
	float:right;
	padding-top:0px;
	text-align:center;
}

Espero que te sirva.

Saludos.