Как обеспечить правильное выравнивание всех изображений в разных браузерах/разрешениях?

-1

Во-первых, есть 3 отдельных изображения. Цыпленок, слово «доставка» и «продовольствие», я хотел бы выровнять их таким образом -> Существуют ли какие-либо методы для такого позиционирования, которые позволяют неизменную позицию, несмотря на изменение размера окна браузера и, возможно, разрешение?Как обеспечить правильное выравнивание всех изображений в разных браузерах/разрешениях?

Оба абсолютного и относительного позиционирования работают, но изменение размера браузера забивает все. Поля, похоже, не могут сделать трюк. Или я просто менее квалифицирован.

HTML код следующим образом: Код

<!doctype html> 

<html> 
<head> 
    <meta charset="UTF-8"/> 
    <title> Foodstant Delivery </title> 
    <link rel="stylesheet" type="text/css" media="screen" href="stylo.css" /> 
    <link rel="shortcut icon" href="favicon.ico" /> 
</head> 

<body> 

<figure> 
<img id="del" src="images/delivery12.png" alt="Delivery" /> 
<img id="foo" src="images/foostant2.png" alt="Foodstant" /> 
<img id="chi" src="images/logochick.png" alt="Chick" /> 
</figure> 

<nav id="hnavbar"> 
    <ul id="hli"> 
     <li><a id="home" href="index.html">Home</a></li> 
     <li><a id="menu" href="menu.html">Menu</a></li> 
     <li><a id="cu" href="ContactUs.html">Contact Us</a></li> 
     <li><a id="au" href="aboutus.html">About Us</a></li> 
     <li><a id="tc" href="TC.html">Terms & Conditions</a></li> 
     <li><a id="job" href="jobs.html" target="_blank">Jobs</a></li> 
     <li><a id="yo" href="order.html">Your Order</a></li> 
    </ul> 
</nav> 

</body>

CSS следующим

/* Foodstant Delivery */ 

* { 
margin: 0; 
padding:0; 
    } 
body { font-family: 'Comic Sans MS',Verdana,Helvetica,Courier New,sans-serif; 
background:url("images/bg.jpg");  
    } 
    /* home page */ 
    #hnavbar{ 
font-size:2em; 
margin-top:-13em; 
} 
    #hnavbar ul li { 
    list-style-type:none;  
    width:325px; 
    display:inline; 
    padding:0 13px 0 13px; 
    } 
    #chi { 
position:relative; 
top:-30em; 
left:10em; 
     } 
    #foo { 
position:relative; 
top:1em; 
left:-11em; 
    } 
    #del { 
position:relative; 
top:10.5em; 
left:26em; 
} 
/* home page */

Большое спасибо заранее.

источник

2012-05-23 TheKraven

Укажите значения для верхнего и левого уровней в процентах, а не для «em». Эти проценты будут относиться к родительскому элементу, содержащему это изображение. ИЛИ просто используйте одно изображение вместо 3 и используйте карту изображения. Вот с к онлайн-инструментов, пара, чтобы сделать это:

http://www.mobilefish.com/services/image_map/image_map.php
http://www.image-maps.com/

источник

2012-05-23 17:18:06 walmik

Родительский элемент для изображений, в данном случае является

? – TheKraven

Это элемент HTML5 для маркировки изображений, иллюстраций и т. Д. – walmik

Мне недавно пришлось сделать что-то очень похожее на это, и через некоторое время я решил использовать абсолютное позиционирование для каждой ссылки. Проблема с вашим кодом заключается в том, что кажется, что вы не совсем понимаете, как работает относительное и абсолютное позиционирование. Абсолютные объекты всегда относятся к его ближайшему родительскому набору к «относительной позиции». Таким образом, вы должны попробовать это:

#hnavbar { position: relative; } //all "absolute" children will be relative to this hnavbar 
#home, #menu, ... { position: absolute; }

И после этого, вы должны установить положение каждого абсолютной позиционированной ссылки меню с верхними/левыми или нижними/правыми свойствами.

Для изображения, если у вас нет ссылок на «Foodstant» и «Delivery», я бы действительно использовал одно изображение.

Надеюсь, это поможет!

источник

2012-05-23 17:12:40 rafaelbiten

Как обеспечить правильное выравнивание всех изображений в разных браузерах/разрешениях?

ответ

Смежные вопросы