- Home
- Categorie
- Coding e Sistemistica
- HTML e CSS
- Problema tabella in css sito web
-
Problema tabella in css sito web
Salvea a tutti ragazzi sto realizzando un sito per un'azienda, divinisapori.it in home si vedono le 2 colonne left e right, ok...ma poi in pagina divinisapori.it/prova.html non mi riesce allargare tutta la colonna left in modo che riempia tutta la pagina, sapete aiutarmi? vi posto anche il css in modo che potete vedere cosa c'è dentro. Grazie per ora.
body{ margin:0; padding:0; background:#4b4a4a url(../img/bg-body.png) repeat-x 0 0; font:62.5%/1.4 Verdana, Tahoma, sans-serif; } img{border:none;} form,fieldset{margin:0;padding:0;border:0;} #page{ width:942px; overflow:hidden; margin:0 auto; padding:0 0 45px; font-size:1.2em; } /* header */ #header{ width:100%; height:374px; overflow:hidden; background:url(../img/bg-header-transparent.png) no-repeat 0 0; } .background{ width:100%; height:374px; overflow:hidden; background:url(../img/bg-header.png) no-repeat 27px 0; } h1{margin:0;} h1 a{ width:236px; height:36px; margin:15px 0 0 45px; float:left; background:url(../img/bg-logo.png) no-repeat 0 0; text-indent:-9999px; overflow:hidden; } /* navigation */ ul{ float:right; margin:15px 0 0; padding:0 41px 0 0; list-style:none; } ul li{ float:left; display:inline; height:44px; margin:0 0 0 10px; background:url(../img/bg-nav-link.png) no-repeat 0 0; } ul li a{ float:left; height:29px; padding:6px 10px 0 11px; font-size:1.33em; font-weight:bold; text-decoration:none; color:#69644D; background:url(../img/bg-nav-link-right.png) no-repeat 100% 0; } ul li a:hover{ color:#AFBD76; } ul li.active{ background:url(../img/bg-nav-link-active.png) no-repeat 0 0; } ul li.active a, ul li.active a:hover{ height:38px; color:#2D3C18; background:url(../img/bg-nav-link-active-right.png) no-repeat 100% 0; } /* content */ #content{ width:100%; overflow:hidden; margin:9px 0 0; color:#90AF94; } /* left column */ #leftcol{ width:634px; float:left; padding:0 0 0 14px; } .block{ width:100%; overflow:hidden; margin:2px 0 0; } .block .block-top{ width:1081px; height:33px; background:url(../img/bg-leftblock-top.png) repeat-x 0 0; } .block .block-content{ width:522px; overflow:hidden; padding:15px 56px; background:url(../img/bg-leftblock.png) repeat-y 0 0; } .block .block-bottom{ width:1081px; height:33px; background:url(../img/bg-leftblock-bottom.png) repeat-x 0 0; } .block h2, #rightcol .block h3{ margin:0; padding:0 0 4px; font:bold 2.09em 'Trebuchet MS', Arial, sans-serif; color:#A4C0A8; background:url(../img/bg-h2.gif) repeat-x 0 100%; } .block h2 span, .block h3 span{ color:#C0D765; } .block-content p{ margin:12px 0 0; } .block-content p strong{ color:#C0D766; } .block-content img.cake{ float:right; display:inline; margin:-6px -14px -11px 0; } a.yellow-button{ float:left; color:#4A3915; font-weight:bold; text-decoration:none; margin:14px 0 0; background:url(../img/bg-yellow-button.png) no-repeat 0 0; } a.yellow-button span{ float:left; height:22px; padding:5px 9px 0 10px; cursor:pointer; background:url(../img/bg-yellow-button-right.png) no-repeat 100% 0; } .block .clear{ width:100%; overflow:hidden; margin:14px 0 0; } .block .border-left-top{ float:left; background:#213223 url(../img/bg-border-left-top.gif) no-repeat 0 0; } .block .border-right-top{ float:left; background:url(../img/bg-border-right-top.gif) no-repeat 100% 0; } .block .border-left-bottom{ float:left; background:url(../img/bg-border-left-bottom.gif) no-repeat 0 100%; } .block .border-right-bottom{ float:left; padding:5px; background:url(../img/bg-border-right-bottom.gif) no-repeat 100% 100%; } .block .border-left-top img{ display:block; } .block .image-left{ margin:2px 18px 0 0; } .clear p{ margin:0; } .links{ width:560px; margin:0 -8px 0 18px; overflow:hidden; padding:14px 0; } .links ul{ float:left; display:inline; width:170px; margin:0; padding:0; list-style:none; } .links ul li{ float:left; width:100%; margin:7px 0 0; } .links ul li a{ float:left; padding:0 0 0 20px; color:#90B094; background:url(../img/bg-link-bullet.png) no-repeat 0 4px; } .links ul li a:hover{ text-decoration:none; } #contact-form ul{ width:100%; float:left; margin:0; padding:0 0 12px; list-style:none; } li{ float:left; width:100%; margin:13px 0 0; } label, #signup-form label{ float:left; width:100%; padding:0 0 3px; font-weight:bold; } label span{ color:#F47C2A; } input, textarea, input{ float:left; font:1em Verdana, Tahoma, sans-serif; border:0; color:#90AF94; background:#1C2B1E; } input, input{ width:295px; margin:0; padding:6px 5px 5px; height:17px; } textarea{ width:380px; height:85px; margin:0; padding:0 0 0 5px; background:#1C2B1E; } li.submit{ margin:0; } p{ margin:0; float:left; font-size:0.84em; } p span{ font-size:1.2em; font-weight:bold; color:#F47C2A; } li.submit input, input.submit{ float:right; width:112px; height:27px; padding:0; margin:6px 137px 0 0; font-weight:bold; color:#4A3915; background:url(../img/bg-submit.png) no-repeat 0 0; } /* right column */ { width:276px; float:left; padding:0 0 0 0px; } .block{ width:100%; overflow:hidden; margin:2px 0 0; } .block .block-top{ width:100%; height:33px; background:url(../img/bg-rightblock-top.png) no-repeat 0 0; } .block .block-content{ width:166px; overflow:hidden; padding:15px 55px 20px; background:url(../img/bg-rightblock.png) repeat-y 0 0; } .block .block-bottom{ width:100%; height:33px; background:url(../img/bg-rightblock-bottom.png) repeat-x 0 0; } ul{ width:100%; overflow:hidden; margin:10px 0 0; padding:0; list-style:none; line-height:1.42em; } li{ float:left; width:100%; padding:5px 0 6px; margin:0 0 -1px; background:url(../img/bg-h2.gif) repeat-x 0 100%; } li a{ float:left; color:#90AF94; text-decoration:none; } li a:hover{ color:#fff; } li strong{ float:right; color:#C0D765; }{ margin:12px 0 0; } input{ width:155px; } input.submit{ width:72px; margin:7px 0 0; padding:0 0 1px; background:url(../img/bg-submit-signup.png) no-repeat 0 0; } .free-cake{ width:100%; overflow:hidden; margin:9px 0 0; } .free-cake img{ float:left; margin:0 17px 0 0; } .free-cake p{ float:left; margin:0; font-weight:bold; } .free-cake p strong{ display:block; color:#D3EAD6; } .free-cake a.yellow-button{ margin:11px 0 0; } /* footer */ #footer{ width:860px; overflow:hidden; margin:12px 24px 0; padding:16px 17px 14px; font-size:0.84em; line-height:1em; background:#333333; color:#8D8D8D; } p{ float:left; margin:0; line-height:1.1em; } p a{ color:#B3B3B3; } ul{ float:right; display:inline; overflow:hidden; margin:0 -8px 0 0; padding:0 0 3px; list-style:none; } li{ float:left; padding:0 8px 0 7px; margin:0 0 0 -1px; border-left:1px solid #8D8D8D; } ul a{ color:#8D8D8D; position:relative; } a{ text-decoration:none; } a:hover{ text-decoration:underline; }
-
Ciao, il tuo
#leftcol ha la proprietà width**:634px****;**Per questo non potrà mai allargarsi oltre quella dimensione.
Inoltre l'immagine background di .blocktop è a larghezza fissa, e qualora ingrandissi il div ci sarebbe un errore di visualizzazione.
-
quindi come posso risolvere? Saluti e grazie per ora