Лента залепена най-отгоре на сайта - как

[perer]

Здравейте!
Искам да направя една лента, която е залепена най-отгоре на сайта. В нея искам да има часовник, логин и търсачка. Ето и снимка. http://store.picbg.net/pubpic/2C/75/06fca51ca68a2c75.jpg
Пробвах да я направя с таблица, с дивове, но явно не правя нещо както трябва, защото все не става. Първо не ми излиза фона и второ не мога да ги наместя така, както искам.
Помогнете, моля!

Благодаря!

 

[emagi]

ЗА целта ти трябва един див, на когото е зададен стил:

#myDiv {
position:absolute;
margin-top:0;
margin-left:0;
width:1000px;
height:50px;
background:#414141; /* тука си слагаш каквото искаш */
}

Така,, остава да си сложиш дива в сайта:

<div id="myDiv">

</div>

 

[emagi]

В стила добави и :

z-index:99;

за да си сигурен,че този див ще е най-отгоре

#myDiv {
position:absolute;
margin-top:0;
margin-left:0;
width:1000px;
height:50px;
z-index:99;
background:#414141; /* тука си слагаш каквото искаш */
}

 

[alex95_bg_2]

 width:1000px;

аз ли се бъркам или това е лош подход
ами 100%?

 

[perer]

Това го напраих на width, но така на Firefox ми излиза скрол на страни, а при IE няма проблем.
Но имам друг проблем. Като сложа за фон картинка и тя не излиза, но сложа ли цвят си излиза без проблем.
Другото, което е, че ако сложа трите неща в двове и те стават на стълбичка, а като ги направя с таблица те се долепват едно за друго. Как да го направя. Нещо не мога да го измисля.

Благодаря!

 

[proba]

значи за картинка е следното

background: url(пътя-до-картинката);

Успех !

 

[emagi]

аз ли се бъркам

Даже много!!!
НА width="100%" под Mozilla Firefox излизам хоризонтален скрол?А и човек малко трябва да пробва!Това че съм дал ширина 1000px, не значи че трябва да вземе точно тази стойност.ТРябва малко да се мисли!КОето давам е само образец, perer трябва да си го направи според неговите нужди!
Ето и един образец, с таблици(който иска може да си го направи и чрез DIV-ве)

<!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>Untitled Document</title>
<style type="text/css">
#myDiv {
position:absolute;
margin-top:0;
margin-left:0;
width:960px;
height:50px;
z-index:99;
background:#414141; /* тука си слагаш каквото искаш */
} 
</style>
</head>

<body>
<div id="myDiv">
<table width="960" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="320"><?php echo date("H:i:s"); ?></td>
<td>
<form method="post" action="">
<input type="text" name="name"  />
<input type="password" name="pass" />
<input type="submit" name="submit" value="Влез"  />
</form>
</td>
<td>
<form method="post" action="">
<input type="text" name="name"  />
<input type="submit" name="submit" value="Търси"  />
</form>
</td>
</table>
</div>
</body>
</html>

 

[alex95_bg_2]

според мен ти още повече се бъркаш
не си ли чувал за различни резолюции??

ето това според мен е кода, който ти трябва:

<div style="width: 100%; height: 50px; position: absolute; top: 0px; left: 0px; z-index: 100; background-color: #ddd; text-align: center; font-size: 15px;">SLAGAI TUK :)</div>

text-align: center; font-size: 15px;

може да ги махнеш

п.с. я ми покажи хоризонталния скруул там, emagi
пробвал съм го този код

едит: точно, усети се за падинг-а
но защо ползваш таблици??
нито е xhtml пък и е излишно точно в този случаи....

впрочем при мен стана да е с картинка за фон..

 

[emagi]

Грешката на моя скрипт е в това, че не задавам следното:

<!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>Untitled Document</title>
<style type="text/css">
#myDiv {
position:absolute;
margin-top:0;
margin-left:0;
width:100%;
height:50px;
z-index:99;
background:#414141; /* тука си слагаш каквото искаш */
}
* {
padding:0;
margin:0;
}
</style>
</head>

<body>
<div id="myDiv">
<table width="960" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="320"><?php echo date("H:i:s"); ?></td>
<td>
<form method="post" action="">
<input type="text" name="name" />
<input type="password" name="pass" />
<input type="submit" name="submit" value="Влез" />
</form>
</td>
<td>
<form method="post" action="">
<input type="text" name="name" />
<input type="submit" name="submit" value="Търси" />
</form>
</td>
</table>
</div>
</body>
</html>

 

[alex95_bg_2]

ето с фон, за да не редактирам 100 пъти старото ми мнение

<div style="width: 100%; height: 50px; position: absolute; top: 0px; left: 0px; z-index: 100; background: url(http://web-tourist.net/new/images/fona.jpg);  text-align: center; font-size: 15px;">SLAGAI TUK :)</div>

background: url(http://web-tourist.net/new/images/fona.jpg);
:wink:

 

[perer]

@emagi е прав за скрола. Колкото и процента да сложа на width във Firefox се получава хоризонтален скрол, а той не е много приятен.
Как да го направя на цял екран за всички резолюции?

 

[alex95_bg_2]

току що пробвах този:

<div style="width: 100%; height: 100px; position: absolute; top: 0px; left: 0px; z-index: 100; background: url(http://web-tourist.net/new/images/fona.jpg); text-align: center; font-size: 15px;">SLAGAI TUK </div>

и не видях скруулбар под ФФ3

 

[perer]

Да, сега няма.