[html] problema link in firefox e chrome

**cirilli89** · 01-03-2011, 20:25

Scusa il disturbo e forse la domanda banale ...

Stò realinzando un piccolo sito in html/css...ho creato tramite il file css un blocco ( div#text) dove poter inserire del testo ...però nel momento in cui vado a inserire un link all'interno di tale blocco nel file html nn me lo riconosce con firefox e chrome mentre con IE si !!!

Non riesco a risolvere tale problema nonostante abbia cercato delle soluzioni con google

Spero di essere stato in parte asaustivo nella spiegazione ...
Ringrazio in anticipo per le risposte

p.s di seguito postero il codice che "non funziona"

Codice PHP:


<div id="text">      



Benvenuti in Red Studio </p>     



Sito in Costruzione</p>     

<div>

<a href = "contatti.html" > CONTATTI </a>

</div>           

</div>

Codice PHP:


div#text 

{     

color: #990000;     

font-size: 50px;     

position: relative;     

top: 68px;     

padding: 1px;     

text-align: center;     

width: 550px;     

height: 390px;     

float:left;     

background-color:#eaeaea; 

}

scusate tanto se il codice non è indentato !!!

**Svarions** · 01-03-2011, 21:14

Ciao,

il problema è il position:relative
In realtà il link c'è ma è sotto il div in position relative. Il render di explorer è sbagliato... hai diverse soluzioni tra cui

inserire la a nel div in position relative
mettere anche il div che contiene la a in position relative e giocare con top e left
...

spero di essere stato di aiuto.

--sb

**cirilli89** · 01-03-2011, 21:34

scusa ma potresti farmi un esempio inerente alle soluzioni che hai citato ?
se non ho capito male dovrei fare una cosa del genere ?

Codice PHP:


div#text {     

color: #990000;     

font-size: 50px;     

position: relative;     

top: 68px;     padding: 1px;     

text-align: center;     

width: 550px;     

height: 390px;     

float:left;     

background-color:#eaeaea; 

} 

div#text a 

{     

position: relative;     

top: 0px;     

left: 0px; 

}

ma tale soluzione non funziona anche anche se non ho capito se era una delle soluzioni che hai citato

**Svarions** · 01-03-2011, 21:47

Ti ho detto una stupidata... avevo interpretato male il codice (pensavo che la a era in un div fratello di #text) cmq a spanne non so dirti qual'è il problema dovrei vedere un esempio completo, ad ogni modo una soluzione è

Soluzione 1:

codice:

<div id="text">       


Benvenuti in Red Studio </p>      


Sito in Costruzione</p>      
CONTATTI 
</div>

cioè rimuovere il div che contiene la a tanto nel caso puoi mettere una regola css alla a dandogli display block (così si comporta come fosse un div). se riesci a mettere una pagina su un server di staging ci do un occhio e vedo come mai non funziona ora.

--sb

**cirilli89** · 01-03-2011, 22:16

ho provato a togliere la div ma non funziona ugualmente ...
cmq adesso posto l'intero codice forse puoi avere una visuale migliore di tutto il lavoro...
cmq ti ringrazio per l'aiuto che mi stai dando

Codice PHP:


<html>

<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">

<title>RedStudio - Renewable Energies Development</title>

<style type="text/css">

@import url("layout.css");

</style>

</head>

<body>



<div id="container">



    <div id="header">

    [img]grafica/header.jpg[/img]

    </div>

    <div id="logo-menu">

    

    <div id="logo">

    <img src= "grafica/logo.jpg" width = "150" height = "200">

    </div>

    

    <div id="menu">



    

            <a href="index.html" onmouseover=image1[0].src="grafica/home_on.jpg" onmouseout=image1[0].src="grafica/home_off.jpg">

            [img]grafica/home_off.jpg[/img]</a>

    

            <a href="" onmouseover=image1[1].src="grafica/chi_siamo_on.jpg" onmouseout=image1[1].src="grafica/chi_siamo_off.jpg">

            [img]grafica/chi_siamo_off.jpg[/img]</a>



            <a href="" onmouseover=image1[2].src="grafica/mission_on.jpg" onmouseout=image1[2].src="grafica/mission_off.jpg">

            [img]grafica/mission_off.jpg[/img]</a>

            

            <a href="" onmouseover=image1[3].src="grafica/fotovoltaico_on.jpg" onmouseout=image1[3].src="grafica/fotovoltaico_off.jpg">

            [img]grafica/fotovoltaico_off.jpg[/img]</a>

            

            <a href="" onmouseover=image1[4].src="grafica/servizi_on.jpg" onmouseout=image1[4].src="grafica/servizi_off.jpg">

            [img]grafica/servizi_off.jpg[/img]</a>

    

            <a href="" onmouseover=image1[5].src="grafica/partners_on.jpg" onmouseout=image1[5].src="grafica/partners_off.jpg">

            [img]grafica/partners_off.jpg[/img]</a>



            <a href="" onmouseover=image1[6].src="grafica/referenze_on.jpg" onmouseout=image1[6].src="grafica/referenze_off.jpg">

            [img]grafica/referenze_off.jpg[/img]</a>

            

            <a href="contatti.html" onmouseover=image1[7].src="grafica/contatti_on.jpg" onmouseout=image1[7].src="grafica/contatti_off.jpg">

            [img]grafica/contatti_off.jpg[/img]</a>

    </div>

    

    </div>

    

    <div id="content">

    

    <div id="title">

        Renewable Energies Development     

    </div>

    <div id="line"></div>

    

    <div id="text">



    

Benvenuti in Red Studio </p>

    

Sito in Costruzione</p>

    <a href = "contatti.html" > CONTATTI </a>

     

    </div>

    

    <div id="image">

    [img]immagini/me.jpg[/img]

    </div>

    

    </div>

    





</div>

</body>

</html>

Codice PHP:


/*stili per il layout fisso*/

html,body{margin: 0;padding:0}

body

{

    background-color: #ffffff;

    font-family: arial,sans-serif;

    font-size: 76%;

    text-align: center;

}

div#container

{

    background-color: #ffffff;

    width: 1024px; 

    margin: 0 auto;

    text-align: center;

}

div#header

{

    height: 100px;

}

div#logo-menu

{

    background-color: #ffffff;

    width: 200px;

    height: 520px;

    float: left;

    text-align: center;

    border-bottom: solid 3px #ff9900;

}

div#logo 

{

    margin-top: 0px;

}

div#menu

{

    margin-top: 25px;

}

div#menu img 

{

    margin: 0;

}

div#content

{

    height: 520px;

    width: 824px;

    margin-left: 200px;

    background-color: #ffffff;

    border-bottom: solid 3px #ff9900;

}

div#line 

{

    position: relative;

    top: 40px;

    margin: 0px;

    border-bottom: solid 3px #ff9900;

    width: 824px;    

}

div#title  

{

    position: relative;

    top: 30px;

    padding: 0px;

    font-family: Trebuchet MS;

    text-align: left;

    color: #990000;

    font-size: 40px;

}

div#text

{

    color: #990000;

    font-size: 50px;

    position: relative;

    top: 68px;

    padding: 1px;

    text-align: center;

    width: 550px;

    height: 390px;

    float:left;

    background-color:#eaeaea;

}

div#text a

{

    position: relative;

    top: 0px;

    left: 0px;

}

div#contact

{

    text-align: left;

    color: #990000;

    font-size: 20px;

    position: relative;

    top: 68px;

    padding: 1px;

    width: 550px;

    height: 390px;

    float:left;

    background-color:#eaeaea;

}

div#image

{

    position: relative;

    top: 68px;

    margin-right: 0px;

    text-align: right;

}

div#footer

{    

    clear:right;

    float: bottom;

    font-weight: bold;

    margin-top: 10px;

    font-size: 12px;

    background-color: #ffffff; 

    color: #990000

}

div#footer-contact

{    

    clear:right;

    float: bottom;

    font-weight: bold;

    margin-top: 10px;

    font-size: 12px;

    background-color: #ffffff; 

    color: #990000

}

Discussione: [html] problema link in firefox e chrome

Strumenti discussione

Ricerca discussione

Visualizza

[html] problema link in firefox e chrome

Permessi di invio