Въпрос за CSS div

DevNull

Registered
Здравейте.
Използвам xHTML Strict изцяло изграден от <div> . За хедър ползвам

<div id="header">
<div class="user">

</div>
</div>
Код:
div#header {
	position:relative;
	margin:0 auto;
	width:99%;
	padding-top:140px;
        height:60px;
}
div.user {
	background:#000000;
	position:absolute;
	top:30px;
        left:10px;
	padding:15px 25px 15px 40px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;		
	width:94%;
	overflow:hidden;
         height:50px;
         opacity:0.6;
         filter:alpha(opacity=60); /* For IE8 and earlier */
}

Въпроса ми е как в тези два дива да добавя още три които да са на 1 ред през определено разстояние. т.е.

Код:
<div id="header">
<div class="user">	
<a id="logo"></a>
<nav>
MENU
</nav>
<a id="social icons"></a>
</div>
</div>

Без позициониране с top и left защото при минаване от fullscreen към window става боза идеята е да не се местятна *** а да се нагаждат спрямо екрана.
 
http://jsfiddle.net/FakeHeal/xkWPG/

[css]div#header {
position:relative;
margin:0 auto;
width:99%;
padding-top:140px;
height:60px;
}
div.user {
background:#000000;
position:absolute;
top:30px;
left:10px;
padding:15px 25px 15px 40px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
width:94%;
overflow:hidden;
height:50px;
opacity:0.6;
filter:alpha(opacity=60);
/* For IE8 and earlier */
}
* {
color: #fff;
}

.logo { float: left; }
.social_icons {float: right;}
.menu { float: left; margin-left: 18%;}[/css]

HTML:
<div id="header">
    <div class="user">
        <div class="logo">
<a id="logo">HERE IS THE LOGO</a>

        </div>
        <nav class="menu">MENU</nav>
        <div class="social_icons">
<a id="social icons"> SOME SOCIAL ICONS</a>

        </div>
    </div>
</div>
 
Перфектно.
Имам един въпрос.

От къде мога да намеря подобно меню

http://filavtev.wix.com/filavtev


То всъщност това е идеята за разположението.
 
DevNull каза:
Перфектно.
Имам един въпрос.

От къде мога да намеря подобно меню

http://filavtev.wix.com/filavtev


То всъщност това е идеята за разположението.

Подобен ефект :
Демо: http://wt-tutorials.hit.bg
Урок: http://web-tourist.net/login/login/view.php?st=2979
 
Благодаря ще ми бъде от ползва. Основния ми въпрос беше за менюто в хедъра

Home,About и тн.
 
[css]* {
color: #fff;
}[/css]

колеги тази * сваля перформънса на кода не я използвайте
 

Back
Горе