تسجيل الدخول | التسجيل | الأسئلة المتكررة
Anonymous

Falha ao tentar atribuir links a div

+ إضافة رد

3 مشاركة صفحة 1 من 1


Falha ao tentar atribuir links a div

بواسطة fredericobsb2 » الأربعاء ديسمبر 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
  • اشترك في: الأربعاء ديسمبر 07, 2011 12:36 am

Re: Falha ao tentar atribuir links a div

بواسطة atik » الخميس ديسمبر 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
  • اشترك في: الاثنين أكتوبر 17, 2011 4:55 pm

Re: Falha ao tentar atribuir links a div

بواسطة diegofly » الأربعاء فبراير 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
  • اشترك في: الأربعاء فبراير 15, 2012 5:44 pm


+ إضافة رد

صفحة 1 من 1