Ciao a tutti, ho un sito di cucina e non so bene come spiegarlo ma...vorrei realizzare una soluzione identica a quella della home page di oggi di ATCasa.
Vorrei, in poche parole, far rientrare l'header e il menu del mio sito in modo da allinearli al resto del corpo e rendere la cornice intorno cliccabile.
Potete aiutarmi se vi posto il mio style.css?
Il mio sito è Paciulina.it
Grazie mille
/*** General Styles ***/
body { font-family: 'TitilliumText22LLight'; font-size:13px; color:#333; }
a { text-decoration:none; color:#f8560e; }
a:hover { text-decoration:none; }
p { line-height:20px; }
/*** Header Styles ***/
#top-header-wrapper { background:url(images/top-header-bg.png) repeat-x; height:38px; }
#top-header { width:960px; margin:0 auto; }
#header-wrapper { background:url(images/sfondotestata.png) repeat; height:117px; }
#header { width:960px; margin:0 auto; }
#logo { padding-top:27px; float:left; }
#header-banner { float:right; padding-top:24px; }
/*** Top Navigation ***/
#top-navigation { float:left; }
#top-navigation li { float:left; margin-right:18px; padding-top:10px; text-transform: capitalize; position:relative; display:block; height:26px; }
#top-navigation li a { color:#AAA; text-shadow: 1px 1px 1px #FFF; }
#top-navigation li ul { position:absolute; padding:0; top:36px; z-index:2; left:-20000px; background:#FFF; border-bottom: 1px solid #CCC; border-left: 1px solid #CCC; border-right: 1px solid #CCC; width:170px; }
#top-navigation li:hover ul { left:0; }
#top-navigation li ul li { float:none; padding-left:12px; height:25px; width:158px; padding-top:10px; background:none;}
#top-navigation li ul li:hover { background:#f1f1f1; }
#top-navigation li ul li ul { top:2000px; }
#top-navigation li ul li:hover ul { top:0; left:170px; width:170px; border-top:1px solid #CCC; }
/*** Search ***/
#search-wrapper { float:right; position:relative; }
#searchform input { background:url(images/searchsfondo.png) repeat-x; border:0; height:43px; position:absolute; top:0; right:100px; padding-left:10px; border-left:1px solid #DDD; width:185px; font-family: 'TitilliumText22LLight'; color:#FFF; font-size:15px; text-shadow: 1px 1px 1px #9e3709;}
#searchform #search-button { right:0; border:none; width:74px; padding-left:0;}
#searchform #s:focus { outline:none; }
/*** Navigation Styles ***/
#navigation-wrapper { background:#f8560e url(images/navigation-bg.png) repeat-x; height:43px; }
#navigation { width:970px; margin:0 auto; }
#navigation ul { text-transform: capitalize; }
#navigation li { float:left; display:block; margin-right:24px; height:43px; position:relative; }
#navigation li.current-menu-item { height:49px; margin-top:1px; }
#navigation li.current-menu-item a { background:#f8560e url(images/navi-current-bg.png) repeat-x; padding:0 12px 0 14px; float:left; }
#navigation li.current-menu-item .right-line { background:#f8560e url(images/navi-line.png) repeat-y right; height:43px; width:2px; float:right;}
#navigation li ul li.current-menu-item .right-line { display:none; }
#navigation li a { color:#FFF; font-size:15px; text-shadow: 1px 1px 1px #FFF; line-height:46px; }
#navigation li ul { position:absolute; padding:0; top:50px; z-index:2; left:-20000px; background:#FFF; border-bottom: 0px solid #999; border-left: 0px solid #999; border-right: 0px solid #999; width:170px; }
#navigation li.current-menu-item ul { top:49px; }
#navigation li:hover ul { left:0; }
#navigation li ul li, #navigation li.current-menu-item ul li, #navigation li ul li.current-menu-item { float:none; padding-left:12px; height:25px; width:158px; padding-top:10px; background:none;}
#navigation li ul li:hover, #navigation li.current-menu-item ul li:hover, #navigation li ul li.current-menu-item:hover { background:#f0ad27; }
#navigation li.current-menu-item ul li a, #navigation li ul li.current-menu-item a { padding: 0; float:none; background:none;}
#navigation li ul li a { font-size:13px; color:#777; text-shadow:none; line-height:0; }
#navigation li ul li ul, #navigation li.current-menu-item ul li ul, #navigation li ul li.current-menu-item ul { top:2000px; }
#navigation li ul li:hover ul { top:0; left:170px; width:170px; border-top:1px solid #999;}
/*** Main Styles ***/
#wrapper { background:url(images/sfondomio.gif) repeat-y; width:960px; margin:0 auto; overflow:hidden; }
.wrapper-full { width:960px; margin:0 auto; overflow:hidden; }
#main { float:left; clear:both; width:637px; overflow:hidden; }
.main-full { float:left; clear:both; width:960px; overflow:hidden; }
/*** Featured slider ***/
#featured-wrapper { padding-top:25px; width:620px; margin-bottom:25px; overflow:hidden; height:400px; }
.featured-item { position:relative; margin-bottom:10px; height:300px; }
.featured-text h2 a { font-family: 'TitilliumText22LMedium'; font-size:26px; color:#FFF; text-shadow: 1px 1px 1px #000; }
.featured-text span { color:#888; text-shadow: 1px 1px 1px #000; margin-bottom:5px; display:block; text-transform: capitalize; }

Rispondi quotando