Foros del Web » Creando para Internet » CSS »

(Consulta) Cuadros de filehippo.com

Estas en el tema de (Consulta) Cuadros de filehippo.com en el foro de CSS en Foros del Web. Hola., necesitaria saber cmo se hacen los recuadros dnd tiene los links cada seccion, ejemplo: browsers and plugins etc...ya q es todo css excepto las ...
  #1 (permalink)  
Antiguo 06/06/2008, 00:01
 
Fecha de Ingreso: marzo-2008
Mensajes: 1.020
Antigüedad: 9 años, 9 meses
Puntos: 21
(Consulta) Cuadros de filehippo.com

Hola., necesitaria saber cmo se hacen los recuadros dnd tiene los links cada seccion, ejemplo: browsers and plugins etc...ya q es todo css excepto las viñetas..

pagina: http://www.filehippo.com

saludos.!
  #2 (permalink)  
Antiguo 06/06/2008, 02:04
 
Fecha de Ingreso: diciembre-2002
Ubicación: Madrid
Mensajes: 378
Antigüedad: 15 años
Puntos: 11
Respuesta: (Consulta) Cuadros de filehippo.com

Código para dos cuadrados

Código:
<div class="box-three">
<div class="box">
	<h2 class="s1"><a href="/software/browsers/">Browsers and Plugins</a></h2>
	<ul>
		<li><img src="http://i.filehippo.com/img/new.gif" alt="New"/><a href="/download_firefox/">Firefox 3.0 RC2</a></li>
		<li><a href="/download_flashplayer_ie/">Flash Player 10.0.1.218 Beta (IE)</a></li>
		<li><a href="/download_google_desktop/">Google Desktop 5.7.805.16405</a></li>
		<li><a href="/download_google_toolbar/">Google Toolbar 5.0.1112.7760 (IE) Beta</a></li>
		<li><a href="/download_internet_explorer/">Internet Explorer 8.0 Beta 1</a></li>
		<li><a href="/download_maxthon/">Maxthon 2.1.0.2082</a></li>
		<li><a href="/download_opera/">Opera 9.50 Beta 2</a></li>
	</ul>
	<div class="more"><a href="/software/browsers/">View more &raquo;</a></div>
</div>
<div class="box">
	<h2 class="s1"><a href="/software/browsers/">Browsers and Plugins</a></h2>
	<ul>
		<li><img src="http://i.filehippo.com/img/new.gif" alt="New"/><a href="/download_firefox/">Firefox 3.0 RC2</a></li>
		<li><a href="/download_flashplayer_ie/">Flash Player 10.0.1.218 Beta (IE)</a></li>
		<li><a href="/download_google_desktop/">Google Desktop 5.7.805.16405</a></li>
		<li><a href="/download_google_toolbar/">Google Toolbar 5.0.1112.7760 (IE) Beta</a></li>
		<li><a href="/download_internet_explorer/">Internet Explorer 8.0 Beta 1</a></li>
		<li><a href="/download_maxthon/">Maxthon 2.1.0.2082</a></li>
		<li><a href="/download_opera/">Opera 9.50 Beta 2</a></li>
	</ul>
	<div class="more"><a href="/software/browsers/">View more &raquo;</a></div>
</div>
</div>
Y el estilo :

Código:
.box-three {
	float: left;
	width: 260px;
	margin: 0;
	padding: 0;
}
.box {
	font-size:12px;
	margin:0 5px 10px 5px;
	padding:0;
	background: #fff;
	border-right: 1px solid #e8e6df;
	border-bottom: 1px solid #e8e6df;
	border-left: 1px solid #e8e6df;
}
.box h2.s0{
	background-color:#8ec6ee;
	border-top:3px solid #5e96be;
}
.box h2.s1{
	background-color:#E7D769;
	border-top:3px solid #b7a739;
}
.box h2.s2{
	background-color:#EC9486;
	border-top:3px solid #bc5446;
}
.box h2.s3{
	background-color:#C2D7B0;
	border-top:3px solid #92a780;
}
.box ul {
	margin:0;
	padding:4px 0;
}
.box ul li {
	list-style:none;
	padding: 2px 0px 2px 22px;
	background: url(http://i.filehippo.com/img/bul0.png) no-repeat;
	background-position: 8px 6px;
}
.box ol {
	margin:0;
	padding:4px 0;
}
.box ol li {
	list-style: none;
	padding: 2px 0px 2px 8px;
}

body,td,input,select,textarea{
	font-family:Arial,Helvetica,sans-serif;
	font-size:10pt;
}

/* LINKS */

a img{border:none;}
a:link {
	color: #025eb3;
	text-decoration:none;
}
a:visited {
	color: #025eb3;
	text-decoration:none;
}
a:hover {
	color: #025eb3;
	text-decoration:underline;
}
a.black{
	color:#000;
	text-decoration:underline;
}

/* TITLES */

h1 {
	font-size:1.5em;
	line-height:22px;
	color: #33302e;
	margin: 0;
	padding:10px 0 2px 5px;
	font-weight: bold;
	letter-spacing: -0.4px;
	border:0;
}
h2 {
	font-size: 1.1em;
	line-height: 8px;
	color: #33302e;
	margin: 0;
	padding: 8px 8px;
	font-weight:normal;
	background:#e8e6df;
	border-top:3px solid #d6d3cd;
}
h2 a:link {
	color: #33302e;
	text-decoration: none;
}
h2 a:visited {
	color: #33302e;
	text-decoration: none;
}
h2 a:hover {
	color: #33302e;
	text-decoration:underline;
}

h3 {
	font-size: 15px;
	margin: 0;
	color: #025eb3;
	font-weight: bold;
}
a.underline{
	text-decoration:underline;
}
.more {
	text-align:right;
	margin:0;
	padding: 3px 10px 3px 22px;
	background-color:#ecf0f3;
	border-top: 1px solid #e8e6df;
}
Saludos.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 12:50.