登录 | 注册 | FAQ
Anonymous

Falha ao tentar atribuir links a div

+ 发表回复

3 篇帖子 分页: 1 / 1


Falha ao tentar atribuir links a div

fredericobsb2 » 周三 12月 07, 2011 12:39 am

Olá, pessoal!

Gente, sou iniciante em CSS, e passei a tarde toda hoje tentando resolver um probleminha. Só estou postando aqui porque não consegui MESMO resolver. Só pergunto aqui quando não tem jeito mesmo...

Bem, é o seguinte: tudo estava certo, até que tentei adicionar link num campo de uma lista. Abaixo segue a foto do site sem o problema, e sem o link inserido na pagina index.php.

A outra foto é de como fica a página depois que inseri o no código. Os códigos da pagina index.php e css estão abaixo. O que será que está errado?

Antes de inserir o <h ref>, a página estava assim:

http://www.flickr.co.../in/photostream
(página sem o problema)

Depois que inseri o <h ref>, aí desandou tudo. Vejam:

http://www.flickr.co.../in/photostream
(página com o problema)
___________________________________________________________________________

Abaixo segue o código da pagina index.php:

___________________________________

<!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>UpInside </title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id= "box">

<div id = "header">
<!---------------codigo pego na aula de css do neri - aula 2666---->
<div style = "position:absolute; top:20px; left: 200px"><img src="images/images/logomarca.png" alt = ""/>


</div><!------header_logo----->

<div id = header_contatos>
<div style = "position:absolute; top:40px; right: 200px">
Dúvidas sobre nossos cursos?<br>
Fone: (xx) xxxx-xxxx<br>
Fax: (xx) xxxx-xxxx

</div><!------header contatos----->

</div><!-----header------>

<div id = "menu" style="position:absolute; top:100px; left: 190px;">


<ul>
<li><a href = "#">Início</a></li>
<li><img src="images/menu_sp2.jpg" alt = ""/></li>

<li><a href = "#">Empresa</a></li>
<li><img src="images/menu_sp2.jpg" alt = ""/></li>

<li><a href = "#">Nossos Livros</a></li>
<li><img src="images/menu_sp2.jpg" alt = ""/></li>

<li><a href = "#">Nosso Cursos</a></li>
<li><img src="images/menu_sp2.jpg" alt = ""/></li>

<li><a href = "#">Fale Conosco</a></li>
<li><img src="images/menu_bgF2.jpg" alt = ""/></li>

</ul>

<div id= "menu_search">

<div style = "position:absolute; top:8px; right: 20px">

<form name =="search" action = "" method = "post">
<input type = "text" name = "search" size = "35"/>
<input type = "submit" name = "Encontre"value = "Encontre" class= "search_btn"/>
</form>

</div><!---menu_search-------->

</div><!-----menu------>

<div id = "content">

<div id = "noticias">

<div id = "noticias_destaque">

<!----- coloque o tamanho da imagem para evitar que um upload errado distorça o site ------>
<img src="uploads/noticias/01.JPG" alt ="" width = "500" height="300"/>
<p>
<strong>
<a href = "#">
Lorem ipsum dolor sit amet
</strong>

consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
</a>
</p>

</div><!-----noticias destaque------>

<div id = "noticias_lista">
<ul>
<li>
<!---span refere-se ao numero da noticia------>
<span>1</span>

<!---O curso manda colocar o h ref aqui. Sem ele, a página roda beleza, como voces viram na foto. ------>

<img src="uploads/noticias/01.JPG" alt = "" width = "125" height = "75"/>
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod
</p>

<!---esse h2 será a data ----->
<h2>06/12/2011 - por Admin</h2>

</li>

<li>


<!---span refere-se ao numero da noticia------>
<span> 2 </span>
<img src="uploads/noticias/01.JPG" alt = "" width = "125" height = "75"/>
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore </p>
<!---esse h2 será a data ----->
<h2>06/12/2011 - por Admin</h2>

</li>

<li>
<!---span refere-se ao numero da noticia------>
<span> 3</span>
<img src="uploads/noticias/01.JPG" alt = "" width = "125" height = "75"/>
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore </p>
<!---esse h2 será a data ----->
<h2>06/12/2011 - por Admin</h2>
</li>

<li>
<!---span refere-se ao numero da noticia------>
<span> 4 </span>
<img src="uploads/noticias/01.JPG" alt = "" width = "125" height = "75"/>
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore </p>
<!---esse h2 será a data ----->
<h2>06/12/2011 - por Admin</h2>
</li>

<li>
<!---span refere-se ao numero da noticia------>
<span> 5 </span>
<img src="uploads/noticias/01.JPG" alt = "" width = "125" height = "75"/>
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore </p>
<!---esse h2 será a data ----->
<h2>06/12/2011 - por Admin</h2>
</li>


</ul>
</div><!-----noticias_lista------>

</div><!-----noticias------>

<div id = "cursos">

<div id = "cursos_lista">

</div><!------cursos lista----->

<div id = "cursos_shopping">

</div><!------cursos shopping----->

</div><!-----cursos------>

<div id = "estudantes">

<div id = estudantes_page>

</div><!-----estudantes page------>

<div id = "estudantes_ilustra">

</div><!---estudantes ilustra-------->

</div><!-----estudantes------>

</div><!------content----->

</div><!--box---->

<div id="footer">

<div id="footer_login">
</div><!-----footer_login------>

<div id="footer_empresa">

</div><!-----footer_empresa------>

<div id="footer_ass">

</div><!----footer_ass------->

</div><!-----footer------>

</body>
</html>
__________________________________________________________________________

E este é meu código CSS:
_______________________________

/*RESETE*/
*{
margin:0;
padding:0;
}
body{
background:#999;
}

/*BOX --------- FAZ O SITE FICAR NO CENTRO AUTOMATICAMENTE ------------------*/
#box{
width:900px;
margin:0 auto;
}

/*HEADER*/
#header{
height: 105px;
background:url(images/header.jpg) no-repeat;
}
<!--------30px = cima , 15px = esquerda , primeiro 0 = baixo, segundo 0 = direita -------------->
#header_logo{
height:125px; width: 150px;
margin: 20px 15px;
float:left;
}
#header_contatos{
float:right;
margin:20px;
font: 14px Verdana, Geneva, sans-serif; color:#000;
font-weight:bold;
text-align:right;
}
#header_contatos h1{
font-size:12px;
margin:20px;
}

/*NENU*/
#menu{

height: 35px;
width:900px;
background:url(images/menu2.jpg) top repeat-x;


}
#menu ul{
margin:0;
padding:0;
float:left;
list-style:none;
}

#menu ul li{
display:inline;
}

#menu ul li a{
text-decoration:none;
color:#FFF;
font-weight:bold;
font:18px Arial, Helvetica, sans-serif;
float: left;

padding: 6px 8px;

}
/*-------- FAZ O MENU FICAR DE OUTRA COR QUANDO PASSAMOS O MAUSE NELE----------------*/
#menu ul li a:hover{
background:url(images/menu2.jpg) bottom repeat-x ;
}
#menu ul li img{
float:left;
/* esse comando leva as divisoes de menus, cada um para seu lugar */
}



#menu_search{
float:right;
}
#menu_search_form{
margin: 2px 3px;
}
#menu_search input{
padding: 2px;
width: 240px;
background:#2D51B0;
border:1px solid #FFF;
font: Georgia, "Times New Roman", Times, serif;
color:#FFF;
}

#menu_search .search_btn{
width:80px;
font: Georgia, "Times New Roman", Times, serif;
color:#FFF;
background:#2D51B0;
border:1px solid #FFF;
}
/*CONTENT - Div mae: Será a mae de todo o conteudo*/

#content{
width: 900px;
background:#FFF;
float: left;
}



/*NOTICIAS - bloco 1 - --- Se acontecer de uma div se escorar em outra, esta div manterá a formataação do site*/
#noticias{
width: 900px;
}
/*DUVIDA: SE TIRAR O FLOAT LEFT, O QUE ACONTECE???--------*/
#noticias_destaque{
width: 500px;
height: 390px;
float: left;
background:#EBEBEB;
margin: 5px;
padding:5px;
}
#noticias_destaque p{
font:14px "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#333;

/*----Colocando margens no paragrafo do texto: De cima para baixo - 10px, da esq. para direita = 0 px.----------------*/
mergin: 10px 0;
}
/*--------------- TEXT-DECORATION: Tirou o sublinhado do link do texto------------------------*/
#noticias_destaque a{

color:#333;
text-decoration: none;
}

/*--------- Aplicando o efeito hover (underline faz aparecer o efeito de leitura)------------------------------*/
#noticias_destaque a:hover{

color:#000;
text-decoration: underline;
}
/*--------- padding: 5px (cima) 5px (direita) 5px (abaixo) 0px (esquerda)- é isso mesmo?????? -----------------------------*/
#noticias_lista{
width: 375px;
float: right;
padding: 5px 5px 5px 0px;
}
/* -- Após fazer a formatação para deixar as noticias com link, apareceu um erro grande na formatação. Isso aqui corrigiu--*/
#noticias_lista a{
text-decoration: none;
color:#333;
}
#noticias_lista ul{
margin:0;
padding:0;
float:left;
list-style:none;
}

#noticias_lista ul li{
float:left;
margin-bottom: 5px;
width: 375px;
}

#noticias_lista ul li:hover{
background:#0CF;
}

#noticias_lista ul li:hover span{
background:#036;
}

#noticias_lista ul li p{
font: 12px Tahoma, Geneva, sans-serif;
margin: 2px 0;
}

#noticias_lista span{
padding:6px;
background: #069;
float: left;
font:50px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff;
text-align:center;
margin-right: 3px;
}

#noticias_lista img{
float: left;
margin-right: 3px;
border: 0;
}

#noticias_lista h1{
font: 12px Georgia, "Times New Roman", Times, serif;
color: #069;
font-weight: bold;
}

#noticias_lista h2{
font: 12px Georgia, "Times New Roman", Times, serif;
color: #666;
font-weight: bold;

}
/*CURSOS - bloco 2*/

#cursos{}
#cursos_lista{}
#cursos_shopping{}
/**/

/*EM INDEX - bloco 3*/

#estudantes{}
#estudantes_page{}
#estudantes_ilustra{}
/**/

/*RODAPE*/

#footer{}
#footer_login{}
#footer_empresa{}
#footer_ass{}

_____________________________________________________

O problema ocorre quando adiciono o h ref aqui:

<div id = "noticias_lista">
<ul>
<li>
<!---span refere-se ao numero da noticia------>
<span>1</span>

< h ref = "#">

<img src="uploads/noticias/01.JPG" alt = "" width = "125" height = "75"/>
<h1>Lorem ipsum dolor sit amet</h1>
<p>consectetuer adipiscing elit, sed diam nonummy nibh euismod
</p>

<!---esse h2 será a data ----->
<h2>06/12/2011 - por Admin</h2>
</a>
</li>
_____________________________________________________________________
头像

fredericobsb2

  • 帖子: 1
  • 注册: 周三 12月 07, 2011 12:36 am

Re: Falha ao tentar atribuir links a div

atik » 周四 12月 08, 2011 4:31 am

Alguma coisa que eu quero informá-lo,
Há um monte de erro de validação no seu código, você deve validá-lo a partir daqui.
Não há tag, tais como <h ref = "#">, o que é preciso usá-lo, eu não entendo.
Assim, no primeiro validar o código como w3c recomenda e você obterá o que deseja.
头像

atik

  • 帖子: 471
  • 注册: 周一 10月 17, 2011 4:55 pm

Re: Falha ao tentar atribuir links a div

diegofly » 周三 2月 22, 2012 4:58 pm

olha tem alguns erros ai, uma dica que eu dou é, tenta usa todo css na pagina externa!
e a tag é: <a href="link da pagina">, depois que corrigir isso manda ai se não tiver ok, que a gente ajuda!
头像

diegofly

  • 帖子: 6
  • 注册: 周三 2月 15, 2012 5:44 pm


+ 发表回复

分页: 1 / 1