Позиция на меню бекграунд ??

SLASH · 18 Януари 2010

Здравейте,
За пръв път се опитвам да направя дизайн и от няколко дена ме мъчи да задам точната позиция на градиент картинка която ползвам за бекграунд на меню и не мога да я докарам на 100%.
CSS-то което ползвам за направата е :

Код:

#menu_nav{
position:absolute;
width: 200px; /*Width of left column*/
height: 1100px;
margin: 0px 1px 1px 2px;
text-decoration: none;
background-image: url('/images/menu_background.png');
background-repeat: repeat-x; 
border-left: 1px solid #848484;
/*border: 1px solid #000;*/
}

#menu_nav a{
font: bold oblique 13px Lucida Grande;
display: block;
padding: 10px;
padding-left: 10px;
color: #292421;
text-decoration: none;
position:relative;
top:236px;
border-bottom: 1px solid #848484;
}

във всеки браузър позицията е или по на високо, или по на ниско... Работещ пример съм качил на този линк:
http://ivo.netau.net/

Ако се отвори с Опера страницата ще видите че излиза отдолу картинката. за Интернет Експлорър не знам защото съм линукс потребител, но предполагам че и с него ще е подобен проблема.

Благодаря предварително

Liberate · 18 Януари 2010

малко не бачка сайта :lol:

SLASH · 18 Януари 2010

Малко фрии-хостинг услугите са така, sorry за което

от време на време работи.

това е файла хостнат на мойта машинка ;

style.css

Код:

body{
font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica, sans-serif;
font-color: #292421;
margin:2px 50px 20px 50px;
line-height: 1.5em;
background-color: #FFF;
height:100%
}

h1 {color:#C8332A}
h3 {color:#C8332A}
b{font-size: 110%;}
em{color: red;}

#header_top{
font: 13px bold Lucida Grande;
/*border: 0px;*/
color: #FFF;
background-image: url('/var/www/djamilla/images/bg.png');
background-repeat:repeat-x;
margin:2px 2px 2px 207px;
/*margin-top: 1px;
margin-left: 207px;*/
padding: 0px;
height: 120px; /*Height of top section*/
border-right: 1px solid #848484;
}

#header_top h1{
font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica,oblique, sans-serif;
font: oblique 25px  Lucida Grande;
position:absolute;
color: #FFF;
margin:0px 2px 0px;
padding-top: 40px;
font-size: 15;
}

#menu_nav{
position:absolute;
width: 200px; /*Width of left column*/
height: 1268px;
margin: -152px 1px 4px 2px;
text-decoration: none;
background-image: url('/var/www/djamilla/images/menu_background.png');
	background-repeat: repeat-x; 
/*border: 1px solid #000;*/
}

#menu_nav a{
font: bold oblique 13px Lucida Grande;
display: block;
padding: 10px;
padding-left: 10px;
color: #292421;
text-decoration: none;
position:relative;
top:270px;
border-bottom: 1px solid #848484;
}

#menu_nav a:hover{
background-color: #f88205;
color: white;
text-shadow: black 0.1em 0.1em 0.2em;
}

#contentwrapper{
float: left;
width: 100%;
/*border: 1px solid #000;*/
}

#contentcolumn{
font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica, sans-serif;
font: bold oblique 13px Lucida Grande;
float: center;
padding: 20px;
height: auto;
margin: 0px 2px 4px 207px;
margin-left: 207px; /*Set left margin to LeftColumnWidth*/
background:#d9d9d9;
/*border: 1px solid #000;*/
border-right: 1px solid #848484;
}

#footer{
clear: center;
margin: 2px 2px 20px 2px;
padding: 4px 1px;
height: 20px;
background-image: url('/var/www/djamilla/images/bg.png');
background-repeat:repeat-x;
color: #000000;
text-align: center;
text-shadow: black 0.1em 0.1em 0.2em;
/*border: 1px solid #000;*/
}

#footer a{
color: #FFF;
text-decoration: none;
}

.innertube{
font-family: Lucida Grande,Trebuchet MS,Verdana,Helvetica, sans-serif;
font: 13px bold Lucida Grande;
margin: 0px 10px; /*Margins for inner DIV inside each column (to provide padding)*/
/*border: 1px solid #fff;*/
}

div.background
{
  width: auto;
  height: auto;
  top: 50px; 
  background: url(klematis.jpg) repeat;
  border: 1px white;
  /*border: 1px solid #000;*/
}

div.transbox
{
  width: auto;
  height: auto;
  margin: 3px 0px;
  background-color: #FFF;
  border: 1px solid #848484;
  border-style: solid ;
  border-right: 0;
  filter:alpha(opacity=60);
  opacity:0.9;
}

div.transbox p
{
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
  /*border: 1px solid #000;*/
}

.shadows{
box-shadow: 7px 7px 8px #818181;
-webkit-box-shadow: 7px 7px 8px #818181;
-moz-box-shadow: 7px 7px 8px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=7, offY=7, positive=true);
}

.curved {
-moz-border-radius:10px;
-webkit-border-radius:10px;
behavior:url(border-radius.htc);
}

.myparagraph:first-letter {
font-size:200%;
float:left top;
color: #C8332A;
}

index.html

Код:

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DF-consulting</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<link rel="shortcut icon" href="/var/www/djamilla/images/favicon.ico" type="image/x-icon">
</head>
<body>
<div id="maincontainer">
<div id="menu_nav">
<a href="#">Accueil</a>
<a href="#">Les projets de mobilité</a>
<a href="#">Le space planning</a>
<a href="#">L'outil i.Transferts®</a>
<a href="#">Former et Conseiller</a>
<a href="#">Réalisations</a>
<a href="#">Nous contacter</a>
</div>
<div id="header_top"><div class="innertube"><h1 style="text-shadow: black 0.1em 0.1em 0.2em"><strong>Les spécialistes de l'espace </h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><h1><p align="right">Présentation</h1></p></div>
<h3>  La priorité de DF Consulting</h3>
<div class="shadows">
<div class="background">
<div class="transbox">
<p class="myparagraph">Dans une période où l'Entreprise vit de profondes et rapides mutations, la mobilité des salariés contribue à la réussite des changements stratégiques engagés. La priorité de DF Consulting est de ramener les questions liées à la mobilité des salariés au même plan que toutes les actions qui visent à améliorer la productivité dans l’Entreprise.</p>
</div>
</div>
</div>
<h3>  Ses services</h3>
<div class="shadows">
<div class="background">
<div class="transbox">
<ul>
<p align="left"><font color="#f88205">Les projets de mobilité :</font>Adapter des méthodes spécifiques dans le cadre :</p>
  <li>  de locaux occupés à réorganiser</li>
  <li>  de locaux vides : en rénovation ou en construction</li>
</ul>
<ul type="circle">
<p align="left"><font color="#f88205">Le space planning :</font>Collecter, sélectionner et gérer tous les types d’informations liées:</p>
 <li>  de locaux occupés à réorganiser</li>
 <li>  de locaux vides : en rénovation ou en construction</li>
</ul>
<td align="center">
<ul type="disc">
<p align="left"><font color="#f88205">  L'outil i.Transferts® :</font>Collecter, sélectionner et gérer tous les types d’informations liées :</p>
<li>  au projet de mobilité</li>
<li>  a la gestion logistique des salariés</li>
</ul>
<ul type="upper-roman">
<p align="left"><font color="#f88205">Former et Conseiller :</font>Adapter des programmes de formation Autocad en fonction :</p>
<li>  des objectifs souhaités</li>
<li>  du niveau des stagiaires</li>
</ul>
<br />
</div>
</div>
</div>
<h3>  Ses Clients</h3>
<div class="shadows">
<div class="background">
<div class="transbox">
<ul type="lower-alpha">
<li>  Les dirigeants des entreprises PME</li>
<li>  Les responsables des services de logistique et d'informatique</li>
<li>  Les responsables des services immobiliers des entreprises</li>
<li>  Les responsables d'Asset Management: valorisation des espaces à la vente ou à la location</li>
</ul>
<br />
</div>
</div>
</div>
</div>
<div id="footer"><a href="http://www.df-consulting.fr">© 2010 DF-consulting.fr</a></div>
</div>
</body>
</html>

Liberate · 18 Януари 2010

малко ми убягват изображенията :lol

SLASH · 18 Януари 2010

1 bg
background-image: url('/var/www/djamilla/images/bg.png');
background-repeat:repeat-x;

2 background menu
background-image: url('/var/www/djamilla/images/menu_background.png');
background-repeat: repeat-x;

второто изображение е това което ползвам за бекграунд на менюто .

Liberate · 18 Януари 2010

SLASH каза:
1 bg
background-image: url('/var/www/djamilla/images/bg.png');
background-repeat:repeat-x;

2 background menu
background-image: url('/var/www/djamilla/images/menu_background.png');
background-repeat: repeat-x;

второто изображение е това което ползвам за бекграунд на менюто .

аз ги нямам тези изображения бе човек :Д как да ги видя като ги няма на моето пц...

SLASH · 18 Януари 2010

хаха, нещо издухвам вече днес

извинявай Liberate.

Ето ги изображенията

) не те разбрах че искаш изображенията....

Качвам ги в imagebanana защото тук няма опция за качване на файлове.

http://www.imagebanana.com/code/un2w73v/menu_background.png
http://www.imagebanana.com/code/djqvem3m/bg1.png

Liberate · 18 Януари 2010

1. може да се качват изображения в личната папка
2. откажи се от този темплейт

виж как изглежда под 4 различни браузъра като съм сложил мишката над едно от менутата и открий 101-те разлики

Opera
Google Chrome
Internet Explorer
Mozilla Firefox

SLASH · 18 Януари 2010

Не искам да се отказвам от него, този съм го започнал и мисля да го довърша... изглежда някакъв проблем с енкодинга се получава при тебе.

shterev · 18 Януари 2010

добре де, ползваш абсолют ,ами къде ти е лефт и топ - примерно?

SLASH · 18 Януари 2010

Сега ще погледна какво съм трил и слагал в кода

SLASH · 18 Януари 2010

дори с
left: 50px
top: 50 px или 1px

промяна няма (

shterev · 18 Януари 2010

#maincontainer сложи му position:relative;

SLASH · 18 Януари 2010

не се получава нищо дори ако сложа тази позиция ( ...

shterev · 18 Януари 2010

качи някаде демо, щото тай играем на сляпа баба

SLASH · 18 Януари 2010

Демо УЖ съм качил в първия ми пост на фрии хостинг ама ония решили че трябва да се проверяват сайтовете за нелегални глупости. Кажи някой друг фрии хост и веднага ще го кача.

Liberate · 18 Януари 2010

хит.бг :lol:

SLASH · 18 Януари 2010

http://free.hit.bg/slash/index.html това е линка

shterev · 18 Януари 2010

Аз катогледам нямаш проблем с бекгранда ами със цялата структура на сайта. Отвприла сам го с Модзила ие6 ие7, навсякаде е различно.
Пълна каша е структурата. По-добре го направи като хората и тогава няма да имаш проблеми с бекграунда, та и после да се чудиш защо не се вижда добре под ие.

Ползвай float и съответно изчистването му.

SLASH · 19 Януари 2010

Сега ще погледна за float, и как да преподредя структурата

дано стане нещо щото не имам голямо желание да го направя като хората.
Опитах с float и резултата беше менюто на първа линия и всичко друго под него (.

Позиция на меню бекграунд ??

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered