Проблем при различните резолюции

Msecurity · 17 Юли 2013

Здравейте колеги
Защо при различните резолюции имам проблеми при положение че всичко е в % ...
Ето скриин и CSS на проблемите блокове...

Код:

Ето как трябва да изглежда:

Код:

А ето и как изглежда под друга резолюция:

А ето и CSS на блоковете:
Това е основният блок във който са другите
[css]#overlay {
width: 100%;
height: 100%;
position: fixed;
top: 0px;
left: 0px;
background: url(images/dotted.png);
}[/css]

А ето и самите блокове:
[css].showbanner {
width: 13%;
height:32%; /* 300px */
background-color: #000000;
margin-top:10%; /* 120px */
border-bottom:5px solid #3399FF;
border-top:5px solid #3399FF;
display: block;
margin-right: 5px;
margin-left: 5%;
font-color: #ffffff;
opacity: 0.4;
}

.showbanner:hover {
width: 13%;
height:32%; /* 300px */
background-color: #000000;
margin-top:10%; /* 120px */
border-top:5px solid #3399FF;
border-top:5px solid #3399FF;
display: block;
margin-right: 5px;
margin-left: 5%;
font-color: #ffffff;
opacity: 1;
}

.shownews {
width: 31%;
height:23.4%; /* 220px */
background-color: #000000;
padding:5px;
margin-top:-18.8%; /* 240px */
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-left: 20%;
color: #0B75AF;
text-align: justify;
opacity: 0.4;
}

.shownews:hover {
width: 31%;
height:23.4%; /* 220px */
background-color: #000000;
padding:5px;
margin-top:-18.8%; /* 240px */
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-left: 20%;
color: #0B75AF;
text-align: justify;
opacity: 0.9;
}

.showevent {
width: 39.5%;
height:23.4%; /* 220px */
background-color: #000000;
padding:5px;
margin-top:-18.7%; /* 240px */
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-left: 54%;
color: #0B75AF;
opacity: 0.4;
}

.showevent:hover {
width: 39.5%;
height:23.4%; /* 220px */
background-color: #000000;
padding:5px;
margin-top:-18.7%; /* 240px */
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-left: 54%;
color: #0B75AF;
opacity: 0.9;
}

.showcars {
border: solid 0px red;
width: 35%;
height: 29%; /* 270px */
background-color: #000000;
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-left: 5%;
display: block;
margin-top: 2%;
color: #0B75AF;
opacity: 0.4;
}

.showcars:hover {
border: solid 0px red;
width: 35%;
height: 29%; /* 270px */
background-color: #000000;
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-left: 5%;
display: block;
margin-top: 2%;
color: #0B75AF;
opacity: 0.9;
}

.showacademy {
border: solid 0px red;
width: 25%;
height: 29%; /* 270px */
background-color: #000000;
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-top:-281px;
margin-left: 42%;
opacity: 0.4;
}

.showacademy:hover {
border: solid 0px red;
width: 25%;
height: 29%; /* 270px */
background-color: #000000;
border-bottom: 5px solid #3399FF;
border-top: 5px solid #3399FF;
margin-top:-275px;
margin-left: 42%;
opacity: 0.9;
}

.showuser {
border: solid 0px red;
width: 25.5%;
height: 270px;
background-color: #000000;
border-bottom: 5px solid #3399FF;
margin-top:-275px;
margin-left: 69%;
opacity: 0.4;
}

.showuser:hover {
border: solid 0px red;
width: 25.5%;
height: 270px;
background-color: #000000;
border-bottom: 5px solid #3399FF;
margin-top:-275px;
margin-left: 69%;
opacity: 0.9;
}
[/css]

deam0n · 17 Юли 2013

Това предполагам е при по-малка резолюция. Можеш с media queries да направиш примерно блоковете да са block, а не inline-block и да падат един под друг примерно.

Msecurity · 17 Юли 2013

Да при по малка се получава така, а няма ли друг вариант?

syneidesys · 17 Юли 2013

Някои са ти във проценти ,някои са в пиксели!

Msecurity · 17 Юли 2013

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

Msecurity · 17 Юли 2013

И освен разместването - и текста излиза извън блоковете?!?

deam0n · 18 Юли 2013

Msecurity каза:
И освен разместването - и текста излиза извън блоковете?!?

Там където са ти повечето height-ове ги направи на min-height

щот те са в процент и затова излиза текста. Слагаш ги min-height и height си е auto по default.

Msecurity · 18 Юли 2013

А разместването - как трябва да се оправи ... че какво ли не пробвах и няма и няма...

syneidesys · 18 Юли 2013

Защо не пренапишеш CSS със position absolute!
http://www.w3schools.com/cssref/pr_class_position.asp

Msecurity · 18 Юли 2013

Хмм не съм се сещал за това.
Ще пробвам и дано да има ефект

Msecurity · 19 Юли 2013

И та все пак някои ще даде ли цял отговор за 2-та проблема
- Как да оправя това разместване да е**
- Как текста да не излиза от блоковете...

syneidesys · 19 Юли 2013

Сложи му на текста overflow:hidden или :
http://www.w3schools.com/cssref/pr_pos_overflow.asp

ventsi34 · 20 Юли 2013

Какво имаш предвид под различни резолюции? Искаш да излиза на таблети и смартфони ли или бъгва на десктоп устройства и там го мъчиш? Хубаво си направил проценти ама то не е само това слагат се едни мета тагове

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

и се донатъманява с media-queries. Това ти е филма за да стане нещото. Добре е да използваш и някакви грид системи като

http://twitter.github.io/bootstrap/

защото те правят точно това ти пълниш съдържанието в кутии, а те наместват кутиите (разбирасе имаш контрол върху тях). Има много видео по темата в youtube и материали в нета започни да четеш за да го разбереш. Това мога да ти кажа като за общо.

Msecurity · 20 Юли 2013

На десктоп устройства е проблема, за телефони и таблети ще има друг дизайн лек и опростен

Мерси ще погледна

Msecurity · 3 Август 2013

Проблема частично го оправих:
благодарение на

Код:

position: absolute 
min-height:

Но в момента разместването е само или малко по нагоре или малко по надолу и се застъпват с малко блоковете?
Как може да се реши и този проблем :S

Msecurity · 5 Август 2013

Никои ли не знае защо блоковете се качват малко по нагоре с около 2-3% /всичко ми е в % / и се застъпват....

Fakeheal · 5 Август 2013

Position - NOPE.
Margin-top: -(INT) - NOPE.

Дай live демо, ако може.

Според картинката ти ето ти layout - floats, margins (без отрицателни) и без positions.

Кутийките отговарят на подредбата на твоя дизайн от първия пост.

Ето и live demo:
http://jsfiddle.net/PfY5Q/

Това ти е CSS:

Код:

.top {
    width: 980px;
    /*Например*/
    background-color: #E0E0E0;
}
.left_banner {
    width: 165px;
    height: 300px;
    background-color: #B3D3FC;
    float: left;
    margin: 5px;
}
.menu {
    width: 790px;
    height: 70px;
    float: right;
    background-color: #F5B3FC;
    margin: 5px;
}
.box-1 {
    width: 350px;
    height: 220px;
    float: left;
    background-color: #FCB3C1;
    margin: 5px 25px 5px 10px;
}
.box-2 {
    width: 350px;
    height: 220px;
    float: left;
    background-color: #B3FCFB;
    margin: 5px;
}
.bottom {
    width: 980px;
    /*Например*/
    background-color: #D8FCB3;
}
.box-3 {
    width: 360px;
    height: 270px;
    background-color: #B3FCB9;
    margin: 5px;
    float: left;
}

.box-4,
.box-5 {
    width: 280px;
    height: 270px;
    margin: 5px;
    float: left;
    background-color: #FAF8B6;
}

.box-5 {
    background-color: #F2B296;
}

.clear {
    clear: both;
}

Това е HTML:

Код:

<div class="top">
    <div class="left_banner">Ляв банер</div>
    <div class="menu">Меню</div>
    <div class="box-1">Кутийка №1</div>
    <div class="box-2">Кутийка №2</div>
    <div class="clear"></div>
</div>
<div class="bottom">
    <div class="box-3">Кутийка №3</div>
    <div class="box-4">Кутийка №4</div>
    <div class="box-5">Кутийка №5</div>
    <div class="clear"></div>
</div>

Msecurity · 7 Август 2013

LIVE DEMO
Ето и път до CSS който иска да го разгледа...
@Fakeheal - бях преработил кода и нямаше отрицалтени стойности, но предполагам че след като видите лайф демото и css ще ви бъде по лесно да видите къде допускам грешка...
ПП: блоковете са от .showbanner надолу в CSS

ventsi34 · 7 Август 2013

В момента съм от служебния ми комп и в конферентната зала на плазмата излиза много добре довечера ще гледам да ти помогна малко ама ще трябва да ти задавам и някой въпроси ако можеш стой тук на линия за да имам връзка с теб. Друго, което ми направи впечатление е че прозрачността на кутиите е много голяма и е доста трудно за разбиране какво пише и си стилизирай стиловете на title-лите на линковете, че така са много куци. Това за сега тук резолюциите са големи (1920x1080) но като се прибера на лаптопа е малка и ще видя. Въпреки, че и тук като си свия браузъра се бъгва жестоко.

syneidesys · 7 Август 2013

Темплейта vivid foto !

:twisted:
Не ти ли е по лесно със дивове отколкото таблици?

Проблем при различните резолюции

Registered

Moderator

Registered

Registered

Registered

Registered

Moderator

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Registered

Super Moderator

Registered

Registered

Registered