Ayuda para igualar diseño de mi web con otra

  • Autor Autor pedro100
  • Fecha de inicio Fecha de inicio
P

pedro100

Zeta
Hola a tod@s.

Editado, ya esta solucionado

En index.html tengo

HTML:
<!DOCTYPE HTML> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
	<head> 

	<title>Lorem ipsum ..</title>
<meta content='Lorem ipsum...' name='description'/>
<meta content='Lorem ipsum' name='keywords'/>
<link rel="shortcut icon" href="https://sites.google.com/site/pert/favicon/favicon-c.ico"/>
 
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
	<link href="style.css" rel="stylesheet" type="text/css" /> 

	</head>
	<body>
       
	<div id="contenido">
        <div id="menuarriba">
    <ul id="navi1">
    <li><a href="/">Inicio</a></li>
    <li><a href="#">enlace 2</a></li>
    <li><a href="#">enlace 3</a></li>
</ul>
</div>

        <div class="publicidada"> . </div>
	
        <div class="sidebar"> <center><img border="0" height="250" width="300" src="http://3.bp.blogspot.com/-Pa1njowjRQ4/TrMslmMP7hI/AAAAAAAADZ4/U6Ci3tSuyrY/s400/adsense.PNG" /></ </center>
         	
        </div> </sidebar>
	<div class="entrada">
            
        <h1>Lorem ipsum</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam .......</p>
   
	</entrada> </div>
	
	<div class="publicidada"> . </div>
	
	</div>
	</body>
        </html>

Y en style.css tengo esto

HTML:
body {
background:url("http://2.bp.blogspot.com/_JUg9QsmKp5s/TORru38nUnI/AAAAAAAACC4/a2pfdU7-2Y0/s000/content-bg.png") repeat-x scroll 0 130px transparent;
}
#contenido { 
background-color: #fff; 
margin-top: 0px;
margin:0 auto 0 auto; 
width:1000px;
padding-bottom: 100px;
border:3px solid #000;
}
#contenido h1 { margin-bottom: 0px; font-size: 24px; margin-left: 25px; margin-top: 5px; }
#contenido p { margin-left: 10px; margin-right: 15px;  text-align: justify; margin-top: 1px;}
#contenido .entrada {
margin-top: 0px;
background-color: #fff;
border:3px solid #CCCCCC;
width: 650px;
margin-left: 5px;
padding: 0px;
overflow: hidden;
}
#contenido .entrada entrada { 
}

#contenido .sidebar { 
float: right;
background-color: #fff;
border:3px solid #CCCCCC;
width: 290px;
margin-right: 5px;
padding: 10px;
overflow: hidden;
}
#contenido .sidebar sidebar { 
}
#contenido .publicidada { margin:0 auto 0 auto; width: 730px; padding-top: 5px; }



<style type="text/css">
#navi1 {
    margin:0px;
    padding:0px;

}
#navi1 li {
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        margin:5px;
        padding:3px;
        width: 150px;
        border:1px solid black;
        text-align:center;
        list-style:none;
        font-family: Segoe UI, Arial;
        font-size: 18px;
       float:left;
    }
#navi1 li:hover {
-moz-border-radius-topleft:20px;
-moz-border-radius-topright:20px;
-moz-border-radius-bottomleft:0px;
-moz-border-radius-bottomright:0px;
-webkit-border-top-left-radius:20px;
-webkit-border-top-right-radius:20px;
-webkit-border-bottom-left-radius:0px;
-webkit-border-bottom-right-radius:0px;
background:url(http://i825.photobucket.com/albums/zz180/latrucoteca/Degradadomini-1.png);
        color:#000000;
        border:1px solid black;
}
#navi1 li a:hover {
        color: #ffffff;
        font-style: Italic;
        text-decoration: none;
}
#navi1 a {
        color: #ffffff;
        font-weight: bold;
}
</style>

¿Alguien me puede decir como tendria que poner el index.html y style.css para poner igual que la otra web?

Me falta el header etc.. y si alguna parte del codigo sobra me lo podeis decir para quitarlo.

Saludos.
 
Última edición:
existen software para bajarse sitios web... te cogen todo el HTML/CSS/JS necesario para que se vea igual... prueba con "httrack" pero si hay themes mas bonitos gratis pero bueno :ghost:
 
Yo cuando no se hacer algo, pero tengo un ejemplo en otra web, utilizo un complemente de firefox muy potente, es la caña!!

Se llama "firebug" y te permite ver el html y el css de la pagina.

Y diras, eso lo puedes hacer viendo el codigo fuente...

Lo bueno de Firebug es que tiene una opcion que es selecionar elemento, selecionas un elemento concreto de la pagina y te muesta el fragmento de codigo perteneciente a ese elemento, asi como su codigo css, es decir sus propiedades, y te permite hacer modificaciones de forma virtual para visualizar resultados.

Te aconsejo que lo pruebes, te sera de gran ayuda, a mi me resulta imprescindible.
 
La web de donde quieres copiar su diseño es un blog, mejor create uno en Enlace eliminado o WordPress.com — Get a Free Blog Here , ahi se te sera mas facil acoplar diseños ya creados. 😀
 
No lo copies.. es muy viejo ese diseño y no da buena vista a la web.. Trabaja con wordpress hay themes gratuitos mucho mejores en diseño.. y con la potencia de Wordpress.
 
Atrás
Arriba