div non si allineano

20-11-2013, 00.59.48

Salve a tutti... spero possiate aiutarmi perchè son due giorni che sto diventando pazzo... Sono alle prime armi e sto studiando ma questa proprio non mi riesce... In prativa io vorrei che nell'header ( largo tutto schermo) ci fosse in mezzo un contenitore(chiamiamolo "mastheader") largo 960px. Dentro questo div vorrei mettere 2 div allineati( "logo" e "search" orizzontalmente al centro. Poi sotto il mastheader vorrei il <nav> per metterci la lista con dei link anche questa larga 960px. IL PROBLEMA E' CHE NON MI SI ALLINEANO I PRIMI DUE!!!!!

Ecco il codice

Codice HTML:

<body>

<header>
  <div class="mastheader">

   		     <div id="logo">
   		         QUI CI ANDRA' IL LOGO
 		     </div>
    	    
  		      <div id="search">
  		             qui vorro' metterci un campo ricerca
   		      </div>

   </div>

   <div id="wide">
   </div>

   <nav>
qui metterò la lista con i link
   </nav>

</header>

NEL CSS:

Codice:

body{
width:100%;
position:relative;
background-color:#CCC;}

/*inizio parte testa*/

header {
background-color:#F00;}

div.mastheader {
width:100%
display: inline-block;
margin:0 auto;
text-align:center;}

#wide{
clear:left;}

nav {background-color:#003;
min-height:20px;}

#logo{
height:150px;
width:300px;
margin:0 auto;
background-color:#666;
background-repeat:no-repeat;
border-bottom:#09F;}

#search {background-color:#00F;
height:150px;
margin:0 auto;
width:340px;}

Grazie intanto...

**karl94** · 20-11-2013, 01.20.52

Beh, i figli dell'elemento .mastheader dovrebbero avere display su inline-block.

**acsocmel** · 20-11-2013, 01.38.15

Originalmente inviato da karl94

Beh, i figli dell'elemento .mastheader dovrebbero avere display su inline-block.

comunque un logo in genere è un'immagine e non c'è bisogno di un div
stessa cosa per il search che sarà un form

cerca di fare le cose semplici che sono le migliori

20-11-2013, 10.41.21

cavoli... non ci credo... Display:inline-block ... ore e ore per un comando... Grazie infinite!!!!!!!!
Comunque seguo i vostri consigli e ora provo a togliere i div e a sistemare gli elementi nel modo corretto... Grazie ancora!

20-11-2013, 10.43.09

In pratica vorrei fare una header sul tipo di questa...

http://www.domoticalabs.com/

20-11-2013, 15.12.37

Ma scusate... Ho provato a fare come giustamente mi avete detto... e sembra riuscirmo... Ma a questo punto, come faccio a mettere un'immagine di background ad un determinato div? Lo so il comando (background-image:url... + opzioni) ma non mi escono immagini...!
Mi sapreste dire dove sbaglio?
ovunque lo metta non compare l'immagine... Solo nell'header il background mi funziona ma mi spinge l'immagine a sinistra estrema dello schermo... io invece la vorrei si a sinistra ma solo del div id="up"...

Il codice l'ho modificato e ora è questo:
HTML

Codice HTML:

<header>
 <div id="up">
<nav>
	  <ul id="menu">
            	<li id="nav1"><a href="News.html">Home</a></li>
				<li id="nav2"><a href="News.html">Altre cose</a></li>
				<li id="nav3"><a href="Services.html">Progetti</a></li>
				<li id="nav4"><a href="Products.html">Contatti</a>		</li>
			</ul>
    	</nav>        
   </div>
</header>

IL CSS:

Codice:

body{
width:100%;
margin:0 auto;
position:relative;
background-color:#FFF;}

/*inizio parte testa*/

header{ min-height:130px; }

#up{max-width:960px; margin:0 auto;}

#menu {float:right; padding-top:10px;}

#menu li {
	list-style: none outside none;
	float: left;
	text-align: center;
	color: #999;
	width: auto;
	margin-right: 2px;
	padding-left: 5px;}
	
#menu li:first-letter{font-size:120%;}
	
#menu li a{
	display: block;
	line-height: 1em;
	color: inherit;
	padding-bottom: 10px;
	text-transform: uppercase;
	text-decoration: none;
	height: 90px;
	font-style: normal;
	font-weight: 700;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}

#menu li a:hover, #menu .active a{color:#09F;  transition:all 1s;}

#menu #nav1 a{background:url(../images/menuicon1.png) bottom center no-repeat;
padding:10px 5px 0px 5px; width:75px;}
#menu #nav1 a:hover, #menu #nav1.active a{
	background: url(../images/menuicon1.png) bottom center no-repeat;
}
#menu #nav2 a{background:url(../images/menuicon2.png) bottom center no-repeat;
padding:10px 5px 0px 5px;}
#menu #nav2 a:hover, #menu #nav2.active a{
	background: url(../images/menuicon2.png)) bottom center no-repeat;
}
#menu #nav3 a{background:url(../images/menuicon3.png) bottom center no-repeat;
padding:10px 5px 0px 5px;}
#menu #nav3 a:hover, #menu #nav3.active a{background:url(../images/menuicon3.png) bottom center no-repeat;}
#menu #nav4 a{background:url(../images/menuicon4.png) bottom center no-repeat;
padding:10px 5px 0px 5px;}
#menu #nav4 a:hover, #menu #nav4.active a{
background: url(../images/menuicon4.png) bottom center no-repeat;}

grazie...

**karl94** · 21-11-2013, 20.42.07

Anzitutto le prossime volte usa gli appositi tag BBcode per formattare il codice in maniera appropriata (come ho fatto nel tuo primo messaggio).
Comunque, nel codice non vedo tre proprietà CSS che definiscono uno sfondo con immagine, sono quelle che di danno problemi? Se possibile indica l'indirizzo della pagina in questione, così da poter controllare meglio il tutto.

Discussione: div non si allineano

LinkBack

Strumenti discussione

Display

div non si allineano

Regole di scrittura