[CSS] Como usar la variable <li class

#1 (**permalink**) 17/03/2015, 04:14

Hola muy buenas a todos.

Ante todo quiero agradecer a toda la gente que me ayuda.

My problema:

Tengo un diseño PSD que estado adaptando con despacito por que nose.Tras encontrar el del sieño que mas me gusta naevegando por internet e logrado hacer esto

My problema es que estado separando el psd en varias imagenes
BG
CONTENT
LOGIN VAR
NAVI

Ahora una vez que lo e colocado en todo sus sitios correctamente me encontrado con que.

Quiero seprar para poder añadir las funciones de php
Osea me explico.

Cuando yo creo un div e inserto la imgen y la posciono, dentro de ese div quiero crear como lo podrias llamar sub divs los cules seperen ciertas partes de la imagen y no se como usarlo esa variable de css

Asi que ustedes me explican perfecto

Os dejo el css y el codigo html

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RevolutionMT2|FreeMMORPG</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
	background-image: url(img/bg.jpg);
	background-repeat: no-repeat;
}
</style>
</head>

<body>

<div class="login_bar">

</div>
<div class="navi">
<ul>
				<li class="first"><a href="#"> INICIO
				    <div class="nav-trenn"></div></a></li>
				<li class="middle"><a href="#">REGISTRO</a></li>
	<li class="middle"><a href="#">COMUNIDAD</a></li>
	<li class="middle"><a href="#">RANKING</a></li>
	<li class="middle"><a href="#">DOWNLOAD<div class="nav-trenn"></div></a></li>
				<li class="last"><a href="#">VOTE 4 COINS</a></li>
</ul></div>
<div class="content"></div>

</body>
</html>

Código:

@charset "utf-8";
/* CSS Document */

.login_bar {
	background-image: url(../img/login_bar.png);
	background-repeat: no-repeat;
	height: 51px;
	width: 1280px;
	padding: 1px;
}
.bg {
	background-image: url(../img/bg.jpg);
	height: 1600px;
	width: 1280px;
}
.content {
	position: absolute;
	height: 1208px;
	width: 692px;
	background-image: url(../img/content.png);
	background-repeat: no-repeat;
	background-position: center;
	left: 318px;
	top: 284px;
}
.navi {
	background-image: url(../img/st_navi_but_top.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 308px;
	width: 1066px;
	left: 129px;
	top: 227px;
}
	
	ul li.first{
	height: 46px;
	width: 113px;
	color: #bf8364;
	position: absolute;
	clip: rect(auto,50px,auto,auto);
	left: 196px;
	top: 9px;
	vertical-align: text-top;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: center;
	display: none;
	}
	
	
	ul li.middle{
	height: 39px;
	width: 111px;
	position: absolute;
	left: 216px;
	top: 19px;
	}

Como podreis apreciar o tengo ni las pajolera idea.

Estoy usando dreamviwer

Saludos y gracias

fede5426 · #2 (**permalink**) 17/03/2015, 06:41

Simplemente crea los divs dentro del que quieras dividir, o es eso o no entendí muy bien que es lo que querés hacer.. jaja

Al principio pensé que podrías estar poniendo la imagen con html en vez de colocarla como fondo del div y por eso tenias problemas.. pero viendo el código me doy cuenta que no es así, están como fondo así que no debería causarte problemas el colocar más contenedores dentro del principal.

Saludos

PD: Css no tiene variables

a menos que uses Stylus.

#3 (**permalink**) 17/03/2015, 06:56

Hola y gracias por comentar, lo que quiero hacer esto.

Perdon pero use paint no habia muchas ganas de currarselo xD pero creo que quedo claro

AngelKrak · #4 (**permalink**) 17/03/2015, 07:50

yo veo que esta bien ._.? no entiendo muy bien que es lo que quieres hacer porque yo la veo como la que dice paint jejeje xD

#5 (**permalink**) 17/03/2015, 10:27

Loe quiero es poder crear las secciones de la web es decir, añadi las funciones de login las letras de menu con su direccion ay esas cosas

Saludos

Edito, para los botones derechos e creado unos div y con la propiedad onclik pero no hacen nada.

Código HTML:

<div class="button1" onclick="location.href=../pages/descarga.php"";" style="cursor:pointer;" ></div>
<div class="button" onclick="location.href="";" style="cursor:pointer;" ></div>

CSSS

Código:

@charset "utf-8";
/* CSS Document */

.login_bar {
	background-image: url(../img/login_bar.png);
	background-repeat: no-repeat;
	height: 51px;
	width: 1280px;
	padding: 1px;
}
.bg {
	background-image: url(../img/bg.jpg);
	height: 1600px;
	width: 1280px;
}
.content {
	position: absolute;
	height: 1208px;
	width: 692px;
	background-image: url(../img/content.png);
	background-repeat: no-repeat;
	background-position: center;
	left: 318px;
	top: 284px;
	font-family: "Comic Sans MS", cursive;
	font-size: 24px;
	text-align: center;
	border-top-color: #000;
	border-right-color: #000;
	border-bottom-color: #000;
	border-left-color: #000;
}
.navi {
	background-image: url(../img/st_navi_but_top.png);
	background-repeat: no-repeat;
	position: absolute;
	height: 308px;
	width: 1066px;
	left: 129px;
	top: 227px;
}
.navi1 {
	float: left;
	height: 182px;
	width: 187px;
	position: absolute;
	left: 3px;
	top: 76px;
}
.navigator {
	position: absolute;
	height: 56px;
	width: 690px;
	float: left;
	left: 191px;
	top: 2px;
}
.top15 {
	float: left;
	height: 219px;
	width: 187px;
	position: absolute;
	left: 876px;
	top: 85px;
}
.button {
	float: left;
	height: 37px;
	width: 187px;
	position: absolute;
	left: 883px;
	top: 1px;
}
.button1 {
	float: left;
	height: 37px;
	width: 187px;
	position: absolute;
	left: 881px;
	top: 45px;
}
.logo_login_bar {
	float: left;
	height: 25px;
	width: 150px;
	position: absolute;
	left: 96px;
	top: 17px;
}

AngelKrak · #6 (**permalink**) 17/03/2015, 11:34

para los menus basta con <nav>, <ul> y <li> y para que vaya a la web solo agregale el <a href="url_de_la_seccion"></a> y listo ;)

fede5426 · #7 (**permalink**) 18/03/2015, 06:34

La estructura basica de esa web seria algo asi:

Código HTML:

Ver original<div class="contenedor">
  <div class="login"></div>
  <header><!-- LOGO --></header>
  <nav><!-- Lista de items --></nav>
  <section class="contenido">
     <div class="izq"></div>
     <div class="der"></div>
     <article></article> 
  </section>
</div>

Código CSS:

Ver original*{
  margin:0;
  padding:0;
}
 
.contenedor{
  width:1280px;
  margin:0 auto;
  background-color:#000;
  /*Aca va tu imagen de fondo fondo*/
}
 
.login{
  width:100%;
  height:45px;
  background-color:#5f7ff6;
  position:absolute;
  top:0;
  left:0;
}
 
header{
  height:250px;
}
 
nav{
  width:695px;
  height:45px;
  background-color:#404040;
  margin:0 auto;
}
 
.contenido{
  width:695px;
  height:400px;
  background-color:#a1a1a1;
  margin:0 auto;
  position:relative;
}
 
.izq, .der{
  width:180px;
  height:250px;
  position:absolute;
}
 
.izq{
  background-color:#f4f44f;
  left:-180px;
}
 
.der{
  background-color:#4f4ff4;
  right:-180px;
}

Faltaria agregarle el resto de elementos.. pero basicamente es eso.

http://codepen.io/anon/pen/qEQwvO

#8 (**permalink**) 18/03/2015, 08:11

si mas o menos eso seria :d pro con las imagenes xD tambien falta el login bar

AngelKrak · #9 (**permalink**) 18/03/2015, 11:07

ahi sta ryen ya te hiso el codigo fede, que mas querias aparte de eso?

#10 (**permalink**) 18/03/2015, 14:40

Gracias a fede el cual me a rediseñado toda la web completamente quedado much mejo, la cual le estoy insertando los script ahora. una imagen

AngelKrak · #11 (**permalink**) 18/03/2015, 15:05

eaaaa perro (Y) quedo perrona >_< me gusta mas el Despues lml

ahi una imagen de antes y Despues >_<

Link:
http://angelkrak.blockpost.skn1.com/...es_despues.png

#12 (**permalink**) 19/03/2015, 04:34

si ami tambien tiene colores mas vivos, no esta cargada y tampoco esta cargada de imagenes xD mola jajaj

fede5426 · #13 (**permalink**) 19/03/2015, 05:52

Veo que le cambiaste varias cosas ya

Estas poniendo el contenido fuera de su caja.. revisalo.

Cierren el tema por favor, ya se esta desvirtuando el post.

#14 (**permalink**) 19/03/2015, 08:40

estaba pobando pero el div ese se me descentra cuando ago un include ;: s que no em gusta insertar el codigo directamente na la pagina em gusta tener los codigos limpios xD

fede5426 · #15 (**permalink**) 19/03/2015, 09:32

Que raro, porque tiene margenes automáticos, no debería salirse de centro.

Yo lo probé con un include de un formulario y sale perfecto:

Link: http://k30.kn3.net/E/4/D/5/E/4/D97.jpg

Algo estas colocando mal