Secondo Progetto,ennesimo problema position

**Caponaxuell** · 04-09-2011, 01:43

Salve ragazzi,sto facendo l'ennesimo progetto per cercare di migliorare le mie capacità in coding ma montando questo mini-sito ho riscontrato un problema: (le posizioni degli elementi finalmente non sballano al cambio risoluzione) non riesco a centrare il tutto,nonostante abbia creato una sorta di container denominato #tutto { margin : 0 auto; } che contenesse tutti i vari div .

il sito è visibile -> http://underdogrescue.altervista.org

Potete aiutarmi?

(vi ricordo che sono una new entry nel coding,quindi siate pazienti

)

**Prill** · 04-09-2011, 09:51

Per centrare un div nella pagina occorre definirne la larghezza. Bisognerebbe evitare i posizionamenti assoluti e per affiancare logo e menu ricorrere al float, restando però con quelli (inutile sul content il posizionamento assoluto, che ho rimosso), ecco cosa potresti avere:

codice:

<!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=iso-8859-1" />
<title>titolo</title>
<style type="text/css">


body {
background-color: #000;
background-image: url(BG.jpg);
}
#tutto {
width: 992px;
margin: 0 auto;
}
#int {
position: relative;
height: 179px;
}

#logo {
width: 169px;
height: 169px;
background: url(LOGO.png) no-repeat center center;
position: absolute;
top: 10px;
left: 30px;
}

#menu {
width: 770px;
height: 76px;
background: url(MENU.png) no-repeat center center;
position: absolute;
top: 90px;
left: 200px;
}

#content {
width: 992px;
height: 505px;
background-image: url(CONTENT.png);
}
</style>
</head>

<body>
<div id="tutto">

<div id="int">
<div id="logo"></div>
<div id="menu"></div>
</div>
<div id="content"></div>

</div>
</body>

</html>

evitando soprapposizioni di elementi come era prima. Andrei a ritagliare anche le immagini di sfondo eliminando la parte trasparente in eccesso (inutile avere un logo di 194 pixel se la parte utile è inferiore a 169 pixel e se poi imposto un div logo largo 169, fra l'altro l'immagine l'inserirei direttamente nel div e non come sfondo, a meno che tu non voglia mettere dell'altro in quel div. Anche l'immagine del menu può essere ritagliata)

**Caponaxuell** · 04-09-2011, 16:13

Oh,wow,come sempre funziona perfettamente!

Ti ringrazio!

**Caponaxuell** · 04-09-2011, 18:02

Scusatemi ultima domanda,ho finito quasi tutto,ho solo un dubbio. Ho trovato su google la parte di webkit per modificare la scrollbar ma è possibile applicare l'effetto solo al box nero? E non a tutta la pagina? Vi ringrazio

**Prill** · 05-09-2011, 14:22

Non mi è chiara la domanda, a cosa ti riferisci esattamente?

**Caponaxuell** · 05-09-2011, 15:28

Allora,se clicki sul menù il rescue ti appare nel box il testo,ecc ecc. La scrollbar di questo box l'ho cambiata con il webkit che leggi nel sorgente,il problema è che quel webkit cambia la scrollbar anche del browser (ho fatto una prova rendendo la pagina scrollabile) si può modificare il webkit affinchè modifichi la scrollbar solo nel box?

E un'altra cosa,ho notato che con Internet Explorer il sito non si visualizza,come mai?!

Grazie per il supporto

**Prill** · 05-09-2011, 18:01

Sulla scrollbar non so dirti, converrà che aspetti altre risposte.

Con ie, almeno ie6, non sono trovate le immagini di sfondo: non scrivere i percorsi come http: //underdogrescue@underdogrescue.altervista.org/MENU.png ma invece http: //underdogrescue.altervista.org/MENU.png.

Poi i tuoi box a comparsa andrebbero ridimensionati perché vanno oltre il box centrale, ad esempio:

codice:

#IlRescue, #Underdogs, #News, #Aiutaci, #Contatti{
width: 740px;
height: 330px;
position: absolute;
top: 250px;
left:160px;
font-size: 15px;
font-family: tahoma;
font-weight: bold;
color: #6c6b6b;
text-shadow: 1px 1px #000;
text-align:justify;
border-left: 5px solid #2b2a2a;
padding-left: 15px;
padding-right: 25px;
overflow:auto;
display:none;
}

togliendo il display:none; nelle dichiarazioni di stile in linea (quelle all'interno dei vari div). Passa anche la pagina al validatore per correggere alcuni errori

**Caponaxuell** · 05-09-2011, 22:01

Perfetto,tutto validato se non la parte del webkit,se qualcuno sa aiutarmi per il problema mi faccia sapere,grazie!

@@grazie tante Prill!

**Caponaxuell** · 05-09-2011, 23:11

Prill ho trovato una scrollbar in jquery e css,il problema è che se metto ai blocchi display:none quando clicko sul menu lei non si attiva,infatti se guardi adesso ho tolto il display:none e vedi che funziona anche se mi incasina il testo.. puoi aiutarmi? O qualcun'altro?!

**Caponaxuell** · 06-09-2011, 21:57

Qualcuno può aiutarmi? Ho questo problema con la scrollbar custom,se metto ai box lo style display:none essa non funziona,se invece non metto lo style display:none si vede correttamente ma purtroppo mi sballa il testo,qualcuno può aiutarmi?

Discussione: Secondo Progetto,ennesimo problema position

Strumenti discussione

Ricerca discussione

Visualizza

Secondo Progetto,ennesimo problema position

Permessi di invio