[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Элемент выпадает из блока
Stasonix
<DIV id="main_block">MAIN BLOCK

<div class="wrapper">
<img
class="mainfoto" src="#">
<div
class="links"> LINKS </div>
</div>

</DIV>




#main_block {
position: absolute; left: 0; top: 1%;
width: 100%;
height: 99%;
background-color: blue;
}
.wrapper {
position: absolute; left: 10%; top: 10%;
border: 1px solid white;
width: 80%;
height: 80%;
display: block;
}

.mainfoto {
position: relative;
width: 40%;
height: 99%;
border: 1px solid white;
display: block;
}

.links {
position: relative;
top: 0;
width: 10%;
height: 85%;
border: 1px solid white;
}


да, и еще желательно сделать чтобы все по левому краю было, float: left, используйте fiddle, очень хорошая штука: test1



Спустя 2 минуты, 8 секунд (6.10.2011 - 14:32) TranceIT написал(а):
Что, куда и как выпадает? Может проще скрин показать?

Спустя 2 минуты, 18 секунд (6.10.2011 - 14:34) Stasonix написал(а):
Цитата (TranceIT @ 6.10.2011 - 11:32)
Что, куда и как выпадает? Может проще скрин показать?

блок LINKS ушол вниз, а должен слева от MAINFOTO стать, там же видно

Спустя 8 минут, 35 секунд (6.10.2011 - 14:43) Stasonix написал(а):
только еще раз!!! лучше через float: left как-то это проделать, а не отступами left: 20... и т.п., чтоб все элементы были в главном блоке, и больше к левому краю прилегались

Спустя 4 минуты, 45 секунд (6.10.2011 - 14:47) TranceIT написал(а):
<style>
body {
padding-top: 10%;
}
.container {
width: 80%;
height: 80%;
margin: 0 auto;
background-color: #eaeaea;
}

img {
width: 400px;
height: 400px;
float: left;
}

.links {
width: 100px;
height: 100px;
background-color: #a1a1a1;
float: left;
}
</style>

<body>
<div
class="container">
<img
src="#">
<div
class="links">
LINKS
</div>
</div>
</body>

Спустя 18 минут, 11 секунд (6.10.2011 - 15:06) Stasonix написал(а):
все "от и до" должно быть в процентах! см. скрин:

правильно:

user posted image

твой вариант:

user posted image

надеюсь все понятно

Спустя 7 минут, 10 секунд (6.10.2011 - 15:13) TranceIT написал(а):
Тогда так

<style>
body {
padding-top: 10%;
}
.container {
width: 80%;
height: 80%;
margin: 0 auto;
background-color: #eaeaea;
}

.img {
width: 90%;
height: 100%;
float: left;
}

.links {
width: 10%;
height: 100%;
background-color: #a1a1a1;
float: left;
}
</style>

<body>
<div
class="container">
<div
class="img">
<img
src="#">
</div>
<div
class="links">
LINKS
</div>
</div>
</body>


Спустя 39 минут, 14 секунд (6.10.2011 - 15:52) Stasonix написал(а):
да! спасибо! Как-то так, в общем получилось!
Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.