Как разместить объекты в css3?

я кодирования веб, используя только HTML и CSS, и у меня возникают проблемы с размещением Div тегов в CSS это выход я хочу сделать: Image Как разместить объекты в css3?

проблема я не могу поместить эти пункты на их месте в образе. это мой код:

body{ 
 
\t background-color: red; 
 
} 
 
#container{ 
 
    \t background-image: url(http://uupload.ir/files/16md_background.jpg); 
 
    \t width: 1366px; 
 
\t height: 768px; 
 
\t margin: auto; 
 
\t position: absolute; 
 
\t top: 0; left: 0; bottom: 0; right: 0; 
 
\t border-radius: 2px; 
 
} 
 
#header{ 
 
\t background-image: url(http://uupload.ir/files/8sr2_header.png); 
 
\t width:1366px; 
 
\t height:77px; 
 
\t position: absolute; 
 
\t top: 22px; 
 
\t left: 170px; 
 

 
} 
 

 
#webdesign{ 
 
\t background-image: url(http://uupload.ir/files/k11n_untitled-1.png); 
 
\t width: 308px; 
 
\t height: 308px; 
 
} 
 
#bannerdeisgn{ 
 
\t background-image: url(http://uupload.ir/files/k11n_untitled-1.png); 
 
\t width: 308px; 
 
\t height: 308px; 
 
} 
 
#logodesign{ 
 
\t background-image: url(http://uupload.ir/files/k11n_untitled-1.png); 
 
\t width: 308px; 
 
\t height: 308px; 
 
} 
 
#carddesign{ 
 
\t background-image: url(http://uupload.ir/files/k11n_untitled-1.png); 
 
\t width: 308px; 
 
\t height: 308px; 
 
} 
 
#nav li{ 
 
\t list-style-type: none; 
 
\t position: absolute; 
 

 
} 
 
#home{ 
 
\t background-image: url(http://uupload.ir/files/orek_home.png); 
 
\t width:32px; 
 
\t height:35px; 
 
\t position: absolute; 
 
\t right: 100px; 
 
} 
 
#home { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    box-shadow: 0 0 1px rgba(0, 0, 0, 0); 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    -webkit-transition-duration: 0.3s; 
 
    transition-duration: 0.3s; 
 
    -webkit-transition-property: box-shadow, transform; 
 
    transition-property: box-shadow, transform; 
 
} 
 
#home:hover, #home:focus, #home:active { 
 
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5); 
 
    -webkit-transform: scale(1.1); 
 
    transform: scale(1.1); 
 
} 
 
#footer{ 
 
\t background-image: url(http://uupload.ir/files/ywc_footer.png); 
 
\t width: 1366px; 
 
\t height: 77px; 
 
\t float: left; 
 
\t position: absolute; 
 
\t top: 712px; 
 
\t left: 170px; 
 
}

<html> 
 
<head> 
 
\t <title>test</title> 
 
\t <link rel="stylesheet" type="text/css" href="style.css"> 
 
\t <!---\\\\\\\\\\\\\\\\\\\\\\\\\\/////////////////////////////--> 
 
\t <!---\\\\\\\\\\\\\\\\\\\\\\\\\\/////////////////////////////--> 
 
</head> 
 
<body> 
 
<div id="container"></div> 
 
<div id="header"></div> 
 
<div id="home"></div> 
 
<div id="bg"></div> 
 
<ul id="nav"> 
 
\t <a href="#"><li id="bannerdeisgn"></li></a> 
 
\t <a href="#"><li id="logodesign"></li></a> 
 
\t <a href="#"><li id="carddesign"></li></a> 
 
\t <a href="#"><li id="webdesign"></li></a> 
 
</ul> 
 
<div id="footer"></div> 
 
</div> 
 
</body> 
 
</html>

источник

2016-01-14 majid mashmool

Абсолютное позиционирование является ** очень ** беден метод выложив веб-страниц. Он чрезвычайно негибкий, и есть намного лучшие и более гибкие варианты. Проверьте [** LearnLayout.com **] (http://learnlayout.com/) –

Добавить display:inline-block в Li и удалить position: absolute

#nav li{ 
    list-style-type: none; 
    display: inline-block; 
    background: #000; 
    border-radius:200px 
}

Demo

Хотя это не рекомендуется, чтобы помочь слепым способом, здесь Demo 2 Updated

источник

2016-01-14 10:53:16 Sowmya

спасибо, а как насчет других? –

другие ?? Вы хотите, чтобы вся страница была разработана здесь? – Sowmya

нет нет, мой вопрос в том, что когда я даю тегу позицию, остальные элементы перемещаются из их текущей позиции, что мне делать? –

Как разместить объекты в css3?

ответ

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