il sito si allarga sullo schermo largo :(

[capratelematica]

www.perlagrandenapoli.blogspot.com è il sito che ho creato sulla piattaforma di blogger.com, e fin qui, tutto bene. La sorpresa l'ho avuta ora in un internet point vedendo che sullo schermo più largo rispetto a quello mio di casa, il sito si allarga nella parte dei commenti, e chiaramente il banner di testa rimane delle stesse dimensioni.
Sono in questo momento a 7.90€ di navigazione, tutti spesi sulla pagina Help di blogger, non mi sarei mai permesso sennò di disturbarvi.... AIUTO, ma mi serve urgentemente!

PS: un tempo mi comprai pure l'intera collana CD di html.it, ma è ancora siggillata, questo è il guaio.

[panta1978]

Originariamente inviato da capratelematica
[www.perlagrandenapoli.blogspot.com è il sito che ho creato sulla piattaforma di blogger.com, e fin qui, tutto bene. La sorpresa l'ho avuta ora in un internet point vedendo che sullo schermo più largo rispetto a quello mio di casa, il sito si allarga nella parte dei commenti, e chiaramente il banner di testa rimane delle stesse dimensioni.
Sono in questo momento a 7.90€ di navigazione, tutti spesi sulla pagina Help di blogger, non mi sarei mai permesso sennò di disturbarvi.... AIUTO, ma mi serve urgentemente!

PS: un tempo mi comprai pure l'intera collana CD di html.it, ma è ancora siggillata, questo è il guaio.

Non è scrivendo più in grande che avrai più risposte...

Comunque, dovrebbe essere un problema di risìoluzione di monitor. Tu hai messo il seguente codice:

Dunque l'immagine in esame si estende per 1007px. E tutto il sito, per come è strutturato, gli va dietro.
Ora, in un PC con monitor a risoluzione 1200*800 non ci sono problemi. Se navighi a 1024*768 non ce la fai comunque (qualche px lo perdi con la barra laterale), se navighi a 800*600 peggio ancora. In un monitor widescreen, se il codice non è fatto bene, puoi avere dei problemi.

Consiglio: riduci le dimensioni dell'immagine. E, per fare le cose fatte bene, dovresti essere più rigoroso col codice.

[capratelematica]

Bravo(grazie mille per essere intervenuto), infatti questo monitor dell'internet point è a 16:9 è lascia un quadrato vuoto a fianco del banner, mentre tutto il testo del corpo sottostante si allarga. Ecco quest'ultimo è il problema mio, non il banner, forse prima mi sono spiegato male.
Nel computer di casa, dove ho costruito il sito, dovrei avere un 1024 pixel di larghezza, e va benissimo il banner così com'è ora, non vorrei quindi modificarlo. Piuttosto vorrei che il testo sottostante non vada mai oltre la larghezza del banner a prescindere dallo schermo utilizzato.
Ho notato infatti che alcuni siti così funzionano, e così vorrei anche per ilmio. Lo stesso sito di htlm.it, visualizzato con il widescreen mi lascia due campi grigi sui lati, non si adegua alla largezza dello schermo. Come pure il sito www.radicali.it resta della stessa grandezza sempre, solo che mentre a casa col 1024 mi copre la larghezza di tutto il monitor, con il widescreen invece mi lascia uno spazio inutizzato a destra come avviene al mio sito solo per il banner! Esempio invece opposto è il sito di wikipedia che si adegua totalmente alla larghezza dello schermo,come avviene sul mio sito avviene solo per il corpo sottostante il banner!

Insomma vorrei un sito a largezza fissa, precisamente a larghezza del banner.

Purtroppo il sito l'ho creato partendo dalla piattaforma di blogger.com(chemi sembra non adotti proprio un linguaggio html classico).

Vi prego aiutatemi è per una cosa importante ed ora non essendo nel mio luogo di residenza non so a chi chiedere aiuto se non a questo pur utile: http://help.blogger.com/

[capratelematica]

^
..che vi costa, voi siete esperti, mi dovete solo dire dove e quale codice html, vi prego, è importante.

[capratelematica]

^
Non mollo!

[capratelematica]

ragazzi...

[Sgro]

Devi chiedere nel forum CSS non qui.

[webdemo]

il codice interessado dovrebbe essere questo:

#header {
background:#FFEC02 none repeat scroll 0%;
border-bottom:1px dotted #FFEC02;
margin:0px;
padding:0px;
}

potresti ad esempio togliere quel giallo dallo sfondo (background:#FFEC02), mettendo bianco avresti già un effetto completamente diverso

ciak

[Mich_]

Ho visto una serie di errori di sintassi: soprattutto elementi usati non in conformita` alle regole della DTD usata.
In queste condizioni trovo difficile sistemare il CSS.

Quindi ti consiglio:
1. validatore HTML
2. validatore CSS

Inoltre un layout non si improvvisa: e` meglio copiarlo (e adattarlo) dai siti appositi.

Prova a vedere tra le innumerevoli proposte citate tra i "link utili" quella che meglio si adatta ai tuoi bisogni (indicativamente "due colonne con header"), e parti da quello.

[capratelematica]

Ringrazio molto anche Webdemo e Mich.
Ho optato per la soluzione del bianco di sfondo, non avendo conoscenze più approfondite.
Purtroppo sono fuori per lavoro,ma appena torno cercherò di abbandonare la piattaforma di blogger.com,e mi adopererò per un sito da capo utilizzando dreamweaver.
Vi ringrazio ancora, continuerò però a seguire questo spazio per un paio di settimane. Per chi volesse ancora aiutarmi lascio l'html del sito prima della sezione "body".

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
* Blogger Template Style
*
* Sand Dollar
* by Jason Sutter
* Updated by Blogger Team
*/

#navbar-iframe {
display: none !important;
}

/* Variable definitions
====================
<Variable name="textcolor" description="Text Color"
type="color" default="#000" value="#000000">

<Variable name="bgcolor" description="Page Background Color"
type="color" default="#f6f6f6" value="#ffffff">

<Variable name="pagetitlecolor" description="Blog Title Color"
type="color" default="#F5DEB3" value="#424b84">

<Variable name="pagetitlebgcolor" description="Blog Title Background Color"
type="color" default="#DE7008" value="#424b84">

<Variable name="descriptionColor" description="Blog Description Color"
type="color" default="#9E5205" / value="#424b84">

<Variable name="descbgcolor" description="Description Background Color"
type="color" default="#F5E39e" value="#ffffff">

<Variable name="titlecolor" description="Post Title Color"
type="color" default="#9E5205" value="#90afdd">

<Variable name="datecolor" description="Date Header Color"
type="color" default="#777777" value="#b3b3b3">

<Variable name="footercolor" description="Post Footer Color"
type="color" default="#444444" value="#424b84">

<Variable name="linkcolor" description="Link Color"
type="color" default="#DE7008" value="#90afdd">

<Variable name="footerlinkcolor" description="Post Footer Link Color"
type="color" default="#968a0a" value="#90afdd">

<Variable name="visitedlinkcolor" description="Visited Link Color"
type="color" default="#DE7008" value="#bfc8ff">

<Variable name="sidebarcolor" description="Sidebar Title Color"
type="color" default="#B8A80D" value="#424b84">

<Variable name="sidebarlinkcolor" description="Sidebar Link Color"
type="color" default="#999999" value="#90afdd">

<Variable name="bordercolor" description="Border Color"
type="color" default="#e0ad12" value="#ffec02">

<Variable name="bodyfont" description="Text Font"
type="font"
default="normal normal 100% 'Trebuchet MS',Trebuchet,Verdana,Sans-Serif" value="normal normal 100% Trebuchet, Trebuchet MS, Arial, sans-serif">

<Variable name="headerfont" description="Sidebar Title Font"
type="font"
default="normal bold 150% Verdana,Sans-serif" value="normal bold 150% Arial, sans-serif">

<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 105% 'Trebuchet MS',Trebuchet,Verdana,Sans-serif" value="normal bold 105% Georgia, Times, serif">

<Variable name="pagetitlefont" description="Blog Title Font"
type="font" default="normal bold 300% Verdana,Sans-Serif" value="normal bold 300% Verdana, sans-serif">

<Variable name="titlefont" description="Post Title Font"
type="font" default="normal bold 160% Verdana,Sans-Serif" value="normal bold 160% Verdana, sans-serif">
*/

body {
margin:0px;
padding:0px;
background:$bgcolor;
color:$textcolor;
font-size: small;
}

#outer-wrapper {
font:$bodyfont;
}

a {
color:$linkcolor;
}

a:hover {
color:$titlecolor;
}

a img {
border-width: 0;
}

#content-wrapper {
padding: 0 1em 0 1em;
}

@media all {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 31%;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
}

@media handheld {
div#main {
float:none;
width:90%;
}

div#sidebar {
padding:30px 7% 10px 3%;
}
}

#header {
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
border-bottom:dotted 1px $bordercolor;
background:$descbgcolor;
}

h1 a:link {
text-decoration:none;
color:$pagetitlecolor
}

h1 a:visited {
text-decoration:none;
color:$pagetitlecolor
}

h1,h2,h3 {
margin: 0;
}

h1 {
padding:25px 0px 10px 5%;
color:$pagetitlecolor;
background:$pagetitlebgcolor;
font:$pagetitlefont;
letter-spacing:-2px;
}

h3.post-title {
color:$titlecolor;
font:$titlefont;
letter-spacing:-1px;
}

h3.post-title a,
h3.post-title a:visited {
color: $titlecolor;
}

h2.date-header {
margin:10px 0px 0px 0px;
color:$datecolor;
font: $dateHeaderFont;
}

h4 {
color:#aa0033;
}

#sidebar h2 {
color:$sidebarcolor;
margin:0px;
padding:0px;
font:$headerfont;
}

#sidebar .widget {
margin:0px 0px 33px 0px;
padding:0px 0px 0px 0px;
font-size:95%;
}

#sidebar ul {
list-style-type:none;
padding-left: 0;
margin-top: 0;
}

#sidebar li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}

.description {
padding:0px;
margin:7px 12% 7px 5%;
color:$descriptionColor;
background:transparent;
font:bold 100% Verdana,Sans-Serif;
}

.post {
margin:0px 0px 30px 0px;
}

.post strong {
color:$textcolor;
font-weight:bold;
}

pre,code {
color:$sidebarlinkcolor;
}

strike {
color:$sidebarlinkcolor;
}

.post-footer {
padding:0px;
margin:0px;
color:$footercolor;
font-size:80%;
}
.post-footer a {
border:none;
color:$footerlinkcolor;
text-decoration:none;
}

.post-footer a:hover {
text-decoration:underline;
}

#comments {
padding:0px;
font-size:110%;
font-weight:bold;
}

.comment-author {
margin-top: 10px;
}

.comment-body {
font-size:100%;
font-weight:normal;
color:black;
}

.comment-footer {
padding-bottom:20px;
color:$footercolor;
font-size:80%;
font-weight:normal;
display:inline;
margin-right:10px
}

.deleted-comment {
font-style:italic;
color:gray;
}

.comment-link {
margin-left:.6em;
}

.profile-textblock {
clear: both;
margin-left: 0;
}

.profile-img {
float: left;
margin: 0 5px 5px 0;
border: 2px solid $pagetitlebgcolor;
}

#sidebar a:link {
color:$sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:active {
color:#ff0000;
text-decoration:none;
}

#sidebar a:visited {
color:sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:hover {
color:$sidebarcolor;
text-decoration:none;
}

.feed-links {
clear: both;
line-height: 2.5em;
}

#blog-pager-newer-link {
float: left;
}

#blog-pager-older-link {
float: right;
}

#blog-pager {
text-align: center;
}

.clear {
clear: both;
}

.widget-content {
margin-top: 0.5em;
}

/** Tweaks for layout editor preview */

body#layout #outer-wrapper {
margin-top: 0;
}

body#layout #main,
body#layout #sidebar {
margin-top: 10px;
padding-top: 0;
}
]]></b:skin>
</head>

<body>

.........continua