2015-12-07 3 views
0

image demonstrate the problemКак отредактировать для всех браузеров?

У меня возникли проблемы с тем, что сайт выглядит по-разному на более чем разрешении.

/* CSS Document */ 
 

 
a{ 
 
\t text-decoration:none; 
 
} 
 

 
body{ 
 
\t background-color:#F2F2F2; 
 
\t font-family:Arial, Helvetice, sans-serif; 
 
\t font-size:14px; 
 
\t margin:0 auto; 
 
\t line-height:1.5; 
 
\t width:100% 
 
} 
 
#body{ 
 
\t width:90%; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
} 
 
#wrap{ 
 
\t height:auto; 
 
} 
 

 
.logo{ 
 
\t margin-left:2%; 
 
\t margin-top:5%; 
 
\t float:left; 
 
\t width:auto; 
 
} 
 

 
.kuka{ 
 
\t margin-left:39.5%; 
 
\t width:auto; 
 
} 
 

 
#nav{ 
 
\t background-color:#3394e1; 
 
\t color:#FFF; 
 
\t box-shadow: 0px 5px 0px #00377c; 
 
\t width:90%; 
 
} 
 

 
#nav ul{ 
 
\t list-style:none; 
 
\t margin:0 auto; 
 
} 
 

 

 
#nav ul li{ 
 
\t display:inline; 
 
} 
 

 
#nav a:link, .siteheader a:visited { 
 
\t display:inline-block; 
 
\t padding:1.4% 0.3%; 
 
\t font-weight:bold; 
 
\t font-size:12px; 
 
\t margin-left:auto; 
 
\t margin-right:auto; 
 
} 
 

 
#nav a:hover, .siteheader a:active, 
 
#nav .active a:link .siteheader .active a:visited { 
 
\t background-color:#FFF; 
 
\t color:#000; 
 
\t text-shadow:none; 
 
} 
 

 
#nav ul li a { 
 
\t position:relative; 
 
\t color:#FFF; 
 
}

Я не думаю, что проблема в CSS, Я думаю, что проблема легко, но я не могу решить.

HTML код

<div id="wrap"> 
 
     \t <div id="header"> 
 
      \t <div class="logo"> 
 
       \t <img src="image/logo.png" alt="Logo" width="230" height="105"> 
 
       </div> 
 
       <div class="kuka"> 
 
       \t <img src="image/Website-Banner-final.png" alt="kuka" width="736" height="190"> 
 
       </div> 
 
       <div id="nav"> 
 
       \t <ul class="nav"> 
 
        \t <li><a href="index.html">Home</a></li> 
 
      \t \t \t <li><a href="company_profile.html">Company Profile</a></li> 
 
      \t \t \t \t <li><a href="about_robotics.html">About Robotics</a></li> 
 
      \t \t \t \t <li><a href="solutions.html">Solutions</a></li> 
 
      \t \t \t \t <li><a href="automation.html">Automation</a></li> 
 
      \t \t \t \t <li><a href="used_machines.html">Used Machines</a></li> 
 
      \t \t \t \t <li><a href="partners.html">Partners</a></li> 
 
      \t \t \t \t <li><a href="technical_support.html">Technical Support</a></li> 
 
      \t \t \t \t <li><a href="send_an_enquiry.html">Send An Enquiry</a></li> 
 
      \t \t \t \t <li><a href="join_our_team.html">Join Our Team</a></li> 
 
      \t \t \t \t <li><a href="downloads.html">Downloads</a></li> 
 
      \t \t \t \t <li><a href="contact_us.html">Contact US</a></li> 
 
        </ul> 
 
       </div> 
 
    \t \t </div>

я надеюсь, что эта проблема будет объяснено

+0

Вы также должны поделиться своим HTML. Используйте http://jsfiddle.net/ –

+0

нет изображения - вы должны создать ** [пример] (http://stackoverflow.com/help/mcve) ** проблемы, с которой вы столкнулись - разные браузеры отображают элементы разные , вы должны использовать фреймворк, который включает или включает себя ** [normalize] (https://necolas.github.io/normalize.css/) ** и/** [сброс] (http: // meyerweb. com/eric/tools/css/reset /) ** – justinw

+0

Просьба немного рассказать о том, что пойдет не так и что вы ожидаете. Кроме того, чтобы исправить ваш сайт, нам, вероятно, понадобится ваш HTML. – GolezTrol

ответ

0

Использование Viewport ширины и высоты для С & высоты. Как и ширина: ## vw;

+0

Я не могу понять, какую иллюстрацию может показать код –

+0

С моей точки зрения это происходит потому, что вы определяете ширину изображения с фиксированным значением. – CapeStar