centrare contenuti [era:Css]

**mirconinni** · 07-12-2012, 17:45

Ciao. Ho creato un index in html :http://christmastales.altervista.org/index2.html# con il seguente codice:

codice:

<HTML>
<HEAD>
<META NAME="GENERATOR" Content="AlterVista - Editor HTML">
<TITLE></TITLE>
<LINK href="mirco.css" rel="stylesheet" type="text/css"> 
 <style type="text/css"> 

DIV {
    float: left;
    margin: 0em;  
  }  
 
  #primo A {
    background: url(spenta.png);
    display: block;
    height: 636px;
    width: 231px;
  }
  #primo A:hover {
    background: url(accesa.png);
    display: block;
    height: 636px;
    width: 231px;
  }

#secondo B {
    background: url(restante.png);
    display: block;
    height: 636px;
    width: 610px;
  }
  
  #secondo B:hover {
    background: url(restante.png);
    display: block;
    height: 636px;
    width: 610px;
  }
 </style>

</HEAD>
<BODY>

 

<div id="primo">
 <a href="#">
</div><div id="secondo">
 <b href="#">
 </div>


</BODY>
</HTML>

il mio problema è che non riesco a centrarlo alla pagina, naturalmente per qualsiasi risoluzione.. Ho provato diversi css ma nulla di fatto. chiedo a voi aiuto

**Prill** · 07-12-2012, 20:19

Converrà unire le due immagini separate e impostarle come sfondo del div cui assegnerai come larghezza e altezza quelle dell'immagine di sfondo. Poi vai a posizionare i diversi link sulle parti che devono illuminarsi con un posizionamento assoluto (nell'esempio ho considerato la tua immagine accesa.png, ma potrai ritagliarla solo a contenere l'area "illuminata"). Potrai aggiungere quanti link vorrai con lo stesso metodo sulle diverse aree specificando con top e left le distanze dal margine superiore e da quello sinistro del div:

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Documento senza titolo</title>

 <style type="text/css"> 

#mioDiv {
    position:relative;
    width:831px;
    height:636px;
    margin:0 auto;
    background-image:url(completa.jpg);
    background-repeat:no-repeat;
}   

a#uno {
    display: block;
    position:absolute;
    height: 636px;
    width: 231px;
    top:0;
    left:0;
}
a#uno:hover {
    background-image:url(accesa.png);
}
a#due {
    display: block;
    height: 636px;
    width: 610px;
    position:absolute;
    top:0;
    left:231px;
}
a#due:hover {
}
 </style>

</head>
<body>

<div id="mioDiv">
  
  
</div>
</body>
</html>

P.S.: l'immagine completa.jpg nel codice è l'immagine ottenuta unendo "spenta" e "restante". Converrà anche alleggerire l'immagine (le tue sono abbastanza pesanti), magari salvandole in formato diverso

Discussione: centrare contenuti [era:Css]

Strumenti discussione

Ricerca discussione

Visualizza

Css

Permessi di invio