A Block Hover

**kilotto** · 09-06-2006, 22:59

Non riesco ad estendere il collegamento a tutto il div.

Premetto che sto lavorando al theme per WP.

Vi posto il CSS, magari c'è qlc errore:

codice:

A, A:HOVER, A:VISITED {
	color: #CCC;
	text-decoration: none;
}
HTML, BODY {
	background-color: #222D2D;
	text-align: center;
	font-size: 10pt;
	color: #999;
	padding: 0;
	margin: 10px 0;
	font-family: "Trebuchet MS", Arial;
}
BLOCKQUOTE {
	font-style: italic;
	padding: 0 0 0 10px;
	border-left-width: 4px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: solid;
	border-left-color: #666666;
} 
EM {
	margin: 0px;
	padding: 0px;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 10pt;
	padding: 0;
	margin: 0;
}
IMG {
	border: none;
	padding: 0;
	margin: 0;
}
INPUT {
	background-color: #F5F5F5;
}
LI {
	margin: 0;
	padding: 0 0 0 20px; /* For FireFox */
	/padding: 0 0 0 5px; /* For IE 6.x */
	list-style-type: none;
}
TEXTAREA {
	margin: 0 0 0 10;
	padding: 0 0 0 3;
}
UL {
	margin: 0;
	padding: 0 0 0 0px; /* For FireFox */
	/padding: 0 0 0 10px; /* For IE 6.x */
	text-indent: -10px; /* For FireFox */
	/text-indent: 10px; /* For IE 6.x */
}

/*** TEMPLATE ***/
.bar {
	background-image: url(images/header_10.gif);
	height: 25px;
	margin: 0;
}
.calendar-box {
	text-align: center;
	padding: 0;
	margin: 0px auto;
}
.container {
	width: 800px;
	margin: 0px auto;
	text-align: left;
	padding: 0 0 0 0;
	background-image: url(images/body_11.gif);
}
.content {
	margin-right: 300px;
	padding: 5px;
}
.footer {
	background-color: #2F3E3E;
	text-align: center;
	font-size: 8pt;
	color: #CCC;
	padding: 5px 0;
	margin: 0;
	clear: right;
	background-repeat: no-repeat;
	background-position: bottom;
	height: 15px;
}
.footer a, .footer a:hover, .footer a:visited {
	color: #CCC;
}
.header {
	background-color: #222D2D;
	text-align: center;
	font-size: 20pt;
	font-weight: bold;
	color: #2F3E3E;
	margin: 0;
	padding: 0 0 0 0;
	height: 110px;
	vertical-align: text-bottom;
}
.navigation, .navigation a {
	display: inline;
	text-align: center;
	font-size: 8pt;
	color: #666;
	padding: 0 0 0 0;
	margin: 20px 10px 0 10px;
}
.navigation a, .navigation a:hover, .navigation a:visited {
	color: #666;
}
.navigation-left {
	display: inline;
	float: left;
	padding: 0;
	margin: 0 0 10px 0;
}
.navigation-right {
	display: inline;
	float: right;
	padding: 0;
	margin: 0 0 10px 0;
}
.sidebar {
	float: right;
	width: 300px;
	font-size: 9pt;
	padding: 0 0;
	margin: 5px 0 10px 0;
}
 /*** FORMATTING ***/
.info {
	text-align: right;
	font-size: 8pt;
	padding: 0;
	margin: 0 10px 10px 0;
}
.info a, .info a:hover, .info a:visited {
	color: #FFFFCC;
}
.pagetitle {
	text-align: left;
	font-size: 12pt;
	color: #999;
	font-style: italic;
	padding: 0 0 10px 5px;
	maring: 0;
}
.side-text {
	text-alig: left;
	margin: 0;
	padding: 0;
}
.side-text li {
	background-color: #3E4F4F;
	border: 1px solid #3E4F4F;
	margin: 0;
	padding: 0;
}
.side-text a {
	display: block;
	background-color: #2F3E3E;
	border: 1px solid #999;
	margin: 0;
	padding: 0;
}
.side-text a:hover {
	background-color: #990000;
}
.side-title {
	text-alig: left;
	font-size: 12pt;
	color: #FF6600;
	font-weight: bold;
	margin: 5px 0 0 10px;
}
.text {
	text-align: left;
	color: #CCC;
	padding: 0 0 0 15px;
}
.time {
	font-size: 8pt;
	padding: 0 0 0 10px;
}
.title {
	font-size: 14pt;
	color: #FF6600;
	font-weight: bold;
	padding: 0 0 0 5px;
	maring: 0;
	
}
.title a, .title a:hover, .title a:visited {
 	color: #FF6600;
}
/*** COMMENTS ***/
.comment {
	padding: 0;
	margin: 0 0 0 10px;	
}
#comments {
	padding: 0;
	margin: 0 0 10px 5px;	
}
#commentform {
	padding: 0;
	margin: 0 0 0 15px;
}
.comment-area {
	background-color: #3E4F4F;
	padding: 5px 10px;
	margin: 0 10px 10px 5px;
	border: 1px dashed #CCC;
}
.comment-area p {
	padding: 0 0;
	margin: 10px 0;
}
#comment-author {
	font-size: 10pt;
	font-weight: bold;
	color: #CCC;
	padding: 0;
	margin: 0;
}
#comment-author a, #comment-author a:hover, #comment-author a:visited {
	color: #FF9900;
}
#comment-RSS, #comment-RSS a, #comment-RSS a:hover, #comment-RSS a:visited {
	font-size: 10px;
	color: #FF6600;
	margin: 0 0 10px 15px;
}
#comment-text {
	color: #EEE;
}
#comment-time {
	font-size: 8pt;
	color: #999;
	padding: 0;
	margin: 0;
}
#comment-time a, #comment-time a:hover, #comment-time a:visited {
	color: #FF9900;
}
#postcomment {
	background-color: #000;
	color: #FFF;
	padding: 0 10px;
	margin: 0 10px 0 0;
}

/*** CALENDAR ***/
#wp-calendar {
	background-color: #222D2D;
	border: 1px solid #CCC;
	empty-cells: show;
	font-size: 9pt;
	padding: 0 0 0 0;
	margin: 0 10px;
	width: 180px;
}
#wp-calendar #next a {
	padding-right: 9pt;
	text-align: right;
}
#wp-calendar #prev a {
	padding-left: 9pt;
	text-align: left;
}
#wp-calendar a {
	display: block;
	background: #3E4F4F;
	color: #CCC;
	border: 1px dashed #CCC;
	text-decoration: none;
}
#wp-calendar a:hover {
	background: #2F3E3E;
	color: #CCC;
}
#wp-calendar a:visited {
	color: #CCC;
}
#wp-calendar caption {
	color: #CCC;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
}
#wp-calendar td {
	color: #666;
	font: normal 9pt "Trebuchet MS", Arial;
	letter-spacing: normal;
	padding: 0px 0;
	text-align: center;
}
#wp-calendar th {
	font-style: normal;
	text-transform: capitalize;
}
#wp-calendar #today{
	background-color: #E2E2E2;
	color: #333;
	border: 0px solid #CCC;
}

/*** Downbox ***/
#downbox {
	text-align: center;
	width: 800px;
	margin: 0px auto;
	padding: 20px 0 0 0;
}
#downbox-head {
	background-image: url(images/downbox_head_10.gif);
	background-repeat: no-repeat;
	height: 25px;
	maring: 0;
}
#downbox-body {
	background-color: #3E4F4F;
	text-align: center;
	padding: 0 10px;
}
#downbox-foot {
	background-image: url(images/downbox_foot_10.gif);
	height: 20px;
	clear: both;
}
#downbox-credit {
	background-color: #222D2D;
	text-align: center;
	font-size: 8pt;
	border: 1px dashed #CCC;
	margin: 10px 0 0 0;
	clear: both;
}
#downbox-credit a, #downbox-credit a:hover, #downbox-credit a:visited {
	color: #CCC;
}
#downbox-l {
	float: left;
	width: 380px;
	text-align: center;
	padding: 5px 0;
}
#downbox-r {
	float: right;
	width: 380px;
	text-align: center;
	padding: 5px 0;
}

**indigoindigo** · 11-06-2006, 09:49

Ciao!
Posta l'html...

**kilotto** · 11-06-2006, 11:38

Ecco l'html...

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title>WordPress Testing</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

<style type="text/css" media="screen">
	@import url( http://localhost/wordpress/wp-conten...dney/style.css );
</style>

</head>
<body>
<div class="container">

<div class="header"></div>

<div class="bar"></div>
<div class="sidebar">
  <div class="side-text">
  <li class="page_item">About
<li class="page_item">Il Bar Sport
  </div>
   

  <div class="side-text">[*]Login
  </div>
</div>

<div class="content">
   <div class="title">[Testo]</div>
  <div class="time">[Testo]</div>
  <div class="text">

[Testo]</p>
</div>
  <div class="info"> Posted in Generale | Nessun commento | Plink | ore 18:14</div>
  <div class="extra"><!--<rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
	    xmlns:dc="http://purl.org/dc/elements/1.1/"
	    xmlns:trackback="http://madskills.com/public/xml/rss/module/trackback/">
		<rdf:Description rdf:about="http://localhost/wordpress/?p=8"
    dc:identifier="http://localhost/wordpress/?p=8"
    dc:title="Step to Step"
    trackback:ping="http://localhost/wordpress/wp-trackback.php?p=8" />
</rdf:RDF>  --></div>
  <div class="comment"></div>
   <div class="navigation">
   <div class="navigation-left"></div>
   <div class="navigation-right"></div>
  </div> 
</div>

<div class="footer">

</div> 
</div>

<div id="downbox">

 <div id="downbox-head"></div>

 <div id="downbox-body">
  <div id="downbox-l">-left-</div>
  <div id="downbox-r">-right-</div>
 <div id="downbox-credit">
  Theme by Kilotto

  Powered by WordPress </div>
 </div>

 <div id="downbox-foot"></div>

</div>

</body>
</html>

**indigoindigo** · 11-06-2006, 12:39

posso chiederti di evidenziare il problema?

è qua?

codice:

<div id="downbox-credit">
  Theme by Kilotto

  Powered by WordPress </div>
 </div>

**kilotto** · 11-06-2006, 12:48

Qui...

codice:

<div class="sidebar">
  <div class="side-text">
  <li class="page_item">About
<li class="page_item">Il Bar Sport
  </div>
   

  <div class="side-text">[*]Login
  </div>
</div>

**indigoindigo** · 11-06-2006, 12:52

Primo errore:

una lista "ul-li" non ordinata necessita di entrambi i tag..la struttura è:

codice:

<ul>[*]..[*]..[*]..[*]..[/list]

secondo, ma cosa vuoi ottenere? sia chiaro che solo il contenuto dei tag "a" è considerato un collegamento...

**kilotto** · 11-06-2006, 13:35

Originariamente inviato da indigoindigo

secondo, ma cosa vuoi ottenere? sia chiaro che solo il contenuto dei tag "a" è considerato un collegamento...

Vorrei estendere l'area sensibile del collegamento <a> per la larghezza del div.

Discussione: A Block Hover

Strumenti discussione

Ricerca discussione

Visualizza

A Block Hover

Permessi di invio