Sto creando il mio primo sito web di prova
pero ho due problemi:
Il campo di search non si allinea al bottone con la lente in tutti i browser tranne firefox.
non riesco ad aumentare lo spazio tra il footer e il contenuto con i margini
grazie a tutti per l aiuto
http://giuliano75.altervista.org/
Con quel titolo un moderatore (giustamente) si farà sentire...
Posta HTML e css solo del pezzo incriminato (nei tag code)
primo problema si allinea al bottone con la lente in tutti i browser tranne firefox.
<fieldset>
<form id="ricerca" method="post" action="#" name="ricerca">
<input type="search" tabindex="1" id="search" placeholder="search...">
<button type="submit" id="search1" ></button>
</fieldset>
</form>
#ricerca{
float:right;
margin: 15px 0;
}
#search1{
background-image: url(img/Senza-nome-1.png);
height: 37px;
width: 55px;
border: none;
cursor: pointer;
background-color: transparent;
position:relative;
top: -3px;
}
#search{
border-radius:10px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
padding:5px 0;
border:solid #999 1px;
}
non riesco ad aumentare lo spazio tra il footer e il contenuto con i margini
</section>
<section id="service">
<article class="box">
[img]img/icona1.png[/img]<h1>Profession Service</h1>
<p class="paragrafo">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</p>
[img]img/bottone.png[/img]
</article>
<article class="box">[img]img/icona2.png[/img]
<h1>design / development</h1>
<p class="paragrafo">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</p>
[img]img/bottone.png[/img]
</article>
<article class="box">[img]img/icona3.png[/img]
<h1>24/7 support</h1>
<p class="paragrafo">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English</p>
[img]img/bottone.png[/img]
</article>
</section>
</div>
<footer>
</footer>
#service{
position:relative;
margin-top:20px;
}
.box{
width:300px;
float:left;
margin-left:20px;
}
.img{
position:absolute;
top:30px;
}
.paragrafo{
font-size:1.6em;
margin:20px 0px;
}
footer{
clear:both;
background-color: #000;
background-image: url(img/fotter.png);
background-repeat: repeat-x;
background-position: top;
min-height:406px;
}
grazie per l aiuto
Ci sarebbero svariate cose da dire, una su tutte, il menu ti sembra corretto? E' del tutto disallineato, non ne parliamo poi di come si vede con IE, assolutamente inguardabile.
Perchè c'è il padding solo quando il link è attivo o sul hover?
La cosa principale che devi mettere è un DOCTYPE all'inizio del documento. Ti consiglio un doctype di tipo strict, così sarai più sicuro che i browser interpreteranno il codice in maniera più uniforme. Dopo che avrai fatto questa modifica vediamo cosa succede in riguardo all'allineamento del campo di ricerca e della lente.
Inoltre, aggiungi a #service la regola:
float:left;
e subito prima del tag di chiusura di #service aggiungi
<div style="clear:both"></div>
Il titolo della discussione non è appropriato, la prossima volta identifica un problema solo e titola la discussione in base a quel problema.
il DOCTYPE c e <!DOCTYPE html>
il float:left; sul #service cosa serve ? l ho messo ma non ho visto il cambiamento
il menu di navigazione come devo sistemarlo ???
Guardati questo:
http://www.w3schools.com/tags/tag_doctype.asp
il DOCTYPE c e e quello del html5 <!DOCTYPE html>
io personalmente non uso il doctype del 5 perchè non è ancora lo standard ufficiale e non tutti i browser lo supportano interamente indi per cui non me la sento ancora di utilizzarlo, cmq potrei sbagliare ma, viste le mille incompatibilità tra browser (soprattutto IE), per il momento vado su dove mi sento sicura ma potrebbe essere un pensiero da vecchio fossile.
Tornando al problema tuo:
menu di navigazione: uniforma la dimensione degli <a>, non è bello il modo in cui si spostano i pulsanti quando ci passi sopra il mouse. Assegna quindi una dimensione ai tag <a> di modo che cambi solo lo sfondo quando ci passi sopra col mouse.
Per quando riguarda il float in service, prova a mettere uno sfondo e a mettere/togliere il float, vedrai la differenza.
ok cosi ho risolto quasi tutti i problemi mi rimane solo Il campo di search che non si allinea al bottone con la lente in tutti i browser tranne firefox.
Metti float:left sia a #search1 che a #search.
Il menù continua a non convincermi.
Permessi di invio
Rispondi quotando