problema di dimensione e allineamento cn i css!!

**punkettaro** · 15-06-2010, 16:57

salve ragazzi...stavo preparando un sito x gli esami....xò mi sn imbattuto in un problema...ho creato il menu a tendina...ma ci sn troppe voci principali e quindi vanno a capo....chiedo a voi come posso ripararlo???

questo è il css

codice:

body { margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #787878; background-color: #F7F7F7; background-image: url(immagini/img010PROVA.jpg); background-repeat: repeat-x; background-position: left top; } h1, h2, h3 { margin: 0; padding: 0; font-weight: normal; color: #000000; } h1 { font-size: 2em; } h2 { font-size: 2.4em; } h3 { font-size: 1.6em; } p, ul, ol { margin-top: 0; line-height: 180%; } ul, ol { } a { text-decoration: none; color: #BC1B32; } a:hover { } #wrapper { width: 960px; margin: 0 auto; padding: 0; } /* Header */ #header { width: 940px; height: 102px; margin: 0 auto; background-image: url(immagini/prova.gif); } /* Menu */ div#container{ width:900px; margin:0 auto; background: #000000; height: 42px; } ul#nav{ font: 13px; Arial, Helvetica, sans-serif } ul#nav,ul#nav li,ul#nav ul,ul#nav ul li{ margin:0; padding:0; list-style-type:none } ul#nav{ height:36px; margin-left:0px; background: #000000; color: #fff } ul#nav a{ display:block; padding: 0 15px; text-decoration: none; color:#FFF; text-align: center; width:auto; line-height: 42px; height: 42px; } ul#nav li{ float: left; position: relative; border-right: 1px solid #E2E2E2; } ul#nav li li{ float: none; line-height: 34px; display:block; } ul#nav ul{ position: absolute; top: 41px; left: -9999px; width: 150px; background: #fff; color: #BC1B32; } ul#nav ul,ul#nav li li a{ background-color: #000000; color: #FFF; width: 150px; } ul#nav li:hover,ul#nav a:hover{ background-color: #BC1B32; color: #FFF; } ul#nav li:hover ul,ul#nav li.sfhover ul{ left: -1px; z-index: 100; } /* Page */ #page { width: 940px; margin: 0 auto; padding: 0; } #page-bgtop { padding: 20px px; } #page-bgbtm { } /* Content */ #content { float: left; width: 620px; padding: 0; } .post { border-bottom: 1px solid #E2E2E2; padding-bottom: 56.5%; } .post-bgtop { } .post-bgbtm { } .post .title { height: 38px; margin-bottom: 10px; padding: 12px 0 0 17px; letter-spacing: -.5px; color: #000000; } .post .title a { color: #000000; border: none; } .post .entry { padding: 0px 0px 20px 18px; padding-bottom: 20px; text-align: justify; } /* Footer */ #footer { height: 50px; background: #ECECEC; border-top: 1px solid #DEDEDE; font-family: Arial, Helvetica, sans-serif; margin-top: auto; margin-right: auto; margin-bottom: 0; margin-left: auto; padding-right: 0px; padding-bottom: 15px; padding-left: 0px; } #footer p { margin: 0; padding-top: 20px; line-height: 25%; font-size: 9px; text-transform: uppercase; text-align: center; color: #A0A0A0; } #footer a { color: #8A8A8A; }

questo è il linguaggio

codice:

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> <!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=utf-8" /> <title>La Nascita Del Web</title> <link href="../sito esami/sito esami.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <div id="header"> </div>  <div id="container"> <ul id="nav">[*] Home[*] Informatica <ul>[*]La nascita Di Internet <li class="sep">Primi Database Online<span></span>[/list][*] Storia <ul> <li class="icon settings">Secondo Dopoguerra <li class="icon privacy">La Guerra Fredda[/list][*] Italiano <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][*] Tecnica <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][*] Inglese <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][*] Diritto <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][*] Scienze Delle Finanze <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][*] Ragionria <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][*] Matematica <ul> <li class="icon settings">Montale <li class="icon privacy">Ermetici[/list][/list]</div>  <div id="page"> <div id="page-bgtop"> <div id="page-bgbtm"> <div class="post"> <h2 class="title">Programma</h2> <div class="entry"> 

Tesina Di Bellini Cosimo</p> </div> </div> <div style="clear: both;"></div> </div> </div> </div> </div> <div id="footer"> 

Tesina Powered By Bellini Cosimo </p> 

Design By Bellini Cosimo</p> </div> </body> </html>

**punkettaro** · 16-06-2010, 10:04

nessun aiuto???

**ResianTaxidrive** · 16-06-2010, 10:30

Potresti specificare meglio il problema estrapolando solo la parte di codice incriminata e formattandola in maniera più leggibile?

**punkettaro** · 16-06-2010, 12:49

il problema è che ho un menu con varie voci...e x ogni voce, al passaggio del mouse si apre un sottomenu...ora ho creato una barra di 900px e in questa barra ci devono essere 10 voci...solo che l'ultima voce mi va a capo di questa barra!!
vi chiedo come posso metterle tutte su un unica linea??

ecco qui, questo è il css della parte che mi interessa

codice:

div#container{
	width:900px;
	margin:0 auto;
	background: #000000; 
	height: 42px;
	}
ul#nav{
	font: 13px; Arial, Helvetica, sans-serif;
}
ul#nav,ul#nav li,ul#nav ul,ul#nav ul li{
	margin:0;
	padding:0;
	list-style-type:none;
	}
ul#nav{
	height:36px;
	margin-left:0px;
	background: #000000;
	color: #fff;
		
}
ul#nav a{
	display:block;
	padding: 0 15px;
	text-decoration: none; 
	color:#FFF; 
	text-align: center; 
	width:auto; 
	line-height: 42px;
	height: 42px;
	padding-left:20px;
}
ul#nav li{
	float: left;
	position: relative;  
	border-right: 1px solid #E2E2E2;
}
ul#nav li li{
	float: none;
	line-height: 34px;
	display:block;
}
ul#nav ul{
	position: absolute;
	top: 41px;
	left: -9999px; 
	width: 150px; 
	background: #fff;
	color: #BC1B32;
}
ul#nav ul,ul#nav li li a{
	background-color: #000000;
	color: #FFF; 
	width: 150px;
}
ul#nav li:hover,ul#nav a:hover{
	background-color: #BC1B32;
	color: #FFF; 
	}
ul#nav li:hover ul,ul#nav li.sfhover ul{
	left: -1px;
	z-index: 100;
}

mentre questa è la parte del linguaggio

codice:

<div id="wrapper">
	<div id="header">
 	</div>
    
<div id="container">
<ul id="nav">[*]
    Home
[*]
    Informatica
    <ul>[*]La nascita Di Internet
        <li class="sep">Primi Database Online<span></span>[/list]
[*]
    Storia
    <ul>
        <li class="icon settings">Secondo Dopoguerra
        <li class="icon privacy">La Guerra Fredda[/list]
[*]
    Italiano
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[*]
  	Tecnica
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[*]
  	Inglese
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[*]
  	Diritto
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[*]
  	Scienze Delle Finanze
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[*]
  	Ragioneria
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[*]
  	Matematica
    <ul>
        <li class="icon settings">Montale
        <li class="icon privacy">Ermetici[/list]
[/list]
</div>

**ResianTaxidrive** · 16-06-2010, 13:20

riduci il font di un punto e magari anche il padding di ul#nav a

**punkettaro** · 16-06-2010, 14:12

grazie mille....ora xò c'è un altro problemino.... sto riempiendo il sito...solo che vorrei che il footer rimanga fisso in fondo alla pagina (mmm vorrei che non ci fosse nemmeno la barra di spostamento)...e sotto al testo che ho inserito ci ho inserito una barra che va qualchhe pixel sopra il footer....ora alla home page non ho bisogno di scendere giù con la barra....mentre ad un altra pagina che ho riempito devo per forza scendere con la barra per vedere il footer.
come posso fare, per farlo tutto uguale???

codice:

.post {
	border-bottom: 1px solid #E2E2E2;
	padding-bottom: 56.5%;
}



.post .title {
	height: 38px;
	margin-bottom: 10px;
	padding: 13px 0 0 18px;
	letter-spacing: -.5px;
	color: #000000;
}

.post .title a {
	color: #000000;
	border: none;
}



.post .entry {
	padding-bottom: 20px;
	text-align: justify;
	padding-top: 0px;
	padding-right: 21px;
	padding-left: 20px;
}


#footer {
	height: 50px;
	background: #ECECEC;
	border-top: 1px solid #DEDEDE;
	font-family: Arial, Helvetica, sans-serif;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-right: 0px;
	padding-bottom: 15px;
	padding-left: 0px;
}

#footer p {
	margin: 0;
	padding-top: 20px;
	line-height: 25%;
	font-size: 9px;
	text-transform: uppercase;
	text-align: center;
	color: #A0A0A0;
}

#footer a {
	color: #8A8A8A;
}

Questa qui è la pagina che mi compare la barra di navigazione (forse perchè questa è riempita??? bho)

codice:

<div id="page">
    <div id="page-bgtop">
    <div id="page-bgbtm">
    	<div class="post">
        	<h2 class="title">Database</h2>
            <div class="entry">
            	

A Database is a collection of information (records) organised so that a computer program can quickly select the desired pieces of data. A database can be considered as an electronic filing system.</p>


When you collect data and organize them so that you can easily select each of them, you create a database.
There are two kind of Database: Operative Database and Analytic Database.</p>


An operative database concern in particular the management of any firm. It includes dynamic information. For example, the list of spare parts at mechanic’s that must be continuously replaced.</p>
           </div>
         </div>
         <div style="clear: both;"></div>
      </div>
      </div>
      </div>
</div>
	<div id="footer">
    

Tesina Powered By Bellini Cosimo
    </p>
    

Design By Bellini Cosimo</p>
	</div>

**ResianTaxidrive** · 16-06-2010, 14:28

beh certo, se hai del contenuto, da qualche parte dovrà pur stare e ti apre la pagina facendoti comparire la barre di scorrimento. O organizzi i contenuti delle pagine in modo che ti stiano in una schermata oppure riempi anche la home così la barra è dappertutto e non vedi strani movimenti navigando da una pagina all'altra. (meglio la seconda)

**punkettaro** · 16-06-2010, 14:47

proverò a riempire tutto dai! speriamo che vada!! ti faccio sapere! e grazie!!!

**punkettaro** · 16-06-2010, 14:59

mmm niente nn va...il footer ora che è tutto riempito va troppo sopra e al di sotto ci sono una 10ina di cm di spazio vuoto ...c'è un modo per farlo rimanere li fisso per ogni pagina???

Discussione: problema di dimensione e allineamento cn i css!!

Strumenti discussione

Ricerca discussione

Visualizza

problema di dimensione e allineamento cn i css!!

Permessi di invio