BG Development


Страници: (2) [1] 2   ( Първото ново мнение ) Reply to this topicStart new topicStart Poll

> Проблем с viewport и позициониране на елементи, Виж в мнението
Sta82
Публикувано на: 06-04-2018, 04:02
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 14
Регистриран на: 28.02.18



Здравейте. Може ли малко помощ за начинаеш Фронтендър, който се мъчи да си направи домашното с html и css? Става въпрос за ето тeзи html и css:
<!DOCTYPE html>
<html>
<head>
<title>Homework 8</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Saira+Extra+Condensed" rel="stylesheet">
<link type="text/css" href="styles/styles.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>


<nav>
<ul>
<li><a href="#" title="External URL">Home</a></li>
<li><a href="#">About</a></li>
<li>
<a href="#">Products<i class="fa fa-caret-down"></i></a>
<ul>
<li><a href="#">Product 1</a></li>
<li><a href="#">Product 2</a></li>
<li><a href="#">Product 3</a></li>
</ul>
</li>
</ul>
</nav>


<div class="firstBox">
Rotate
</div>

<div class="secondBox">
Rotate
</div>


</body>
</html>

-------------------------------------------------------------------------------------------------------------

* {
margin: 0px;
padding: 0px;
}
body {
background-color: black;
}
nav {
background-color: gray;
font-family: Arial, Helvetica, sans-serif;
}
nav ul li {
display: inline-block;
position: relative;
height:40px;
}
nav ul li:hover ul {
display:block;
}
nav ul li ul {
display:none;
position:absolute;
left:0;
top:40px;
width:89px;
background:grey;
}
nav ul li a {
color:#fff;
text-decoration:none;
height:40px;
line-height:40px;
display:inline-block;
padding-left:10px;
padding-right:10px ;
}
nav ul li a:hover {
background-color:red;
}




@-webkit-keyframes rotating /* Safari and Chrome */ {
from {
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-webkit-transform: rotate(-1440deg);
-o-transform: rotate(-1440deg);
transform: rotate(-1440deg);
}
0% {left:0px; top:0px;}
25% {left:200px; top:0px;}
50% {left:200px; top:200px;}
75% {left:0px; top:200px;}
100% {left:0px; top:0px;}
}
@keyframes rotating {
from {
-ms-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
to {
-ms-transform: rotate(-1440deg);
-moz-transform: rotate(-1440deg);
-webkit-transform: rotate(-1440deg);
-o-transform: rotate(-1440deg);
transform: rotate(-1440deg);
}
0% {left:0px; top:0px;}
25% {left:100vw; top:0px;}
50% {left:100vw; top: 100vh;}
75% {left:0px; top:100vh;}
100% {left:0px; top:0px;}
}
div.firstBox, div.secondBox {
-webkit-animation: rotating 6s linear infinite;
-moz-animation: rotating 6s linear infinite;
-ms-animation: rotating 6s linear infinite;
-o-animation: rotating 6s linear infinite;
animation: rotating 6s linear infinite;
animation-name: rotating;
-animation-duration: 6s;
animation-iteration-count: infinite;
position: fixed;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: yellow;
color: red;
}
div.secondBox {
background-color: red;
color: yellow;
animation-delay: 3s;
}

Имам два проблема: първият е свързан с началното позициониране на кутийките, които се въртят по височината и широчината на екрана. Както се вижда и двете кутийки започват под менюто и при стартиране на анимацията директно минават над менюто, по ръба на viewport-а. Как да направя така, че да стартират от най-горе вляво, над менюто? И другото, което ме интересува е защо при движението на тези кутийки, вдясно и долу на екрана излизат почти целите извън видимата част на браузъра? Как може да се фиксне това? Много моля за адекватни отговори единствено с html и css, javascript за момента не ми е позволен, защото не съм започнал да го изучавам. Най-добре ще е, ако ми дадете коригирани html и css кодчетата, които съм пуснал за ориентир. Мерси в аванс!
PMEmail Poster
Top
flame
Публикувано на: 06-04-2018, 05:25
Quote Post



Име:
Група: Потребител
Ранг: Старо куче

Мнения: 733
Регистриран на: 27.08.04



За първия въпрос към div.firstBox, div.secondBox добави top:0;
За втория нямам представа icon_smile.gif.


--------------------
be good
PM
Top
Sta82
Публикувано на: 06-04-2018, 06:34
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 14
Регистриран на: 28.02.18



QUOTE (flame @ 06-04-2018, 05:25)
За първия въпрос към div.firstBox, div.secondBox добави top:0;
За втория нямам представа icon_smile.gif.

Мерси много. Чакам отговор за втория от някой, който е наясно icon_smile.gif
PMEmail Poster
Top
relax4o
Публикувано на: 06-04-2018, 12:19
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2074
Регистриран на: 04.04.07



Понеже винаги top-left ти е главния ъгъл на позициониране на елемента, когато стигнеш 100% на viewport-а ти остава само единия ъгъл отвън, а всичко останало излиза.
При 25% и 50% намали стойностите на left на 95vw и си донастрой top стойностите по същия начин.


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
Sta82
Публикувано на: 06-04-2018, 14:06
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 14
Регистриран на: 28.02.18



QUOTE (relax4o @ 06-04-2018, 12:19)
Понеже винаги top-left ти е главния ъгъл на позициониране на елемента, когато стигнеш 100% на viewport-а ти остава само единия ъгъл отвън, а всичко останало излиза.
При 25% и 50% намали стойностите на left на 95vw и си донастрой top стойностите по същия начин.

Да, ама като zoom out-на браузъра на 25 % и тогава се вижда, че кутийките не се движат по ръба на видимата част на браузъра. Тоест получава се обратен ефект и кутийките идват навътре. Идеята е и при зумване да се получава, както се получава вляво и горе при каквото и да било зумване.
PMEmail Poster
Top
Sta82
Публикувано на: 06-04-2018, 14:09
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 14
Регистриран на: 28.02.18



Ааа, и да е responsive също, тоест като свия браузъра, пак да няма проблеми с изгледа на въртящите се кутийки и по четирите краища на браузъра.
PMEmail Poster
Top
relax4o
Публикувано на: 06-04-2018, 17:00
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2074
Регистриран на: 04.04.07



QUOTE (Sta82 @ 06-04-2018, 14:09)
Ааа, и да е responsive също, тоест като свия браузъра, пак да няма проблеми с изгледа на въртящите се кутийки и по четирите краища на браузъра.

Някакви други рикуести да имаш за без пари? Звучиш, сякаш си шеф и даваш заповеди какво да се направи.

И защо аджеба ще зуум аутваш на 25% браузъра.

Това мнение е било редактирано от relax4o на 06-04-2018, 17:02


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
Sta82
Публикувано на: 06-04-2018, 18:37
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 14
Регистриран на: 28.02.18



QUOTE (relax4o @ 06-04-2018, 17:00)
QUOTE (Sta82 @ 06-04-2018, 14:09)
Ааа, и да е responsive също, тоест като свия браузъра, пак да няма проблеми с изгледа на въртящите се кутийки и по четирите краища на браузъра.

Някакви други рикуести да имаш за без пари? Звучиш, сякаш си шеф и даваш заповеди какво да се направи.

И защо аджеба ще зуум аутваш на 25% браузъра.

Не зная как звучи шеф, който дава заповеди за изпълненине на код , ама просто си питам, защото ми трябва, а сам не се справям. Затова и любезно попитах в началото. Виждам, че има форум за безплатно споделяне и за разрешаване на фронт-енд проблеми и го използвам. Не задължавам никой да ми помогне. Също ако видя, че на някой му трябва помощ и знам отговора на въпроса, също бих помогнал фор фрии. icon_smile.gif За зуумването - ами за компютри с по-висока резолюция.
PMEmail Poster
Top
relax4o
Публикувано на: 06-04-2018, 19:37
Quote Post



Име:
Група: Потребител
Ранг: Почетен член

Мнения: 2074
Регистриран на: 04.04.07



Прочети си последното мнение. Звучиш като клиент, който иска да му бъде свършена работата, както трябва да е, а не като човек, който иска да му се помогне. За първия ти коментар нищо не казвам, за това и споделих мнение.

Това за училище ли е? Имаш ли право да използваш calc() в CSS? Ако имаш, просто на местата, които ти посочих горе ги замени с:

CODE

calc(100% - 100px)


100px е всъщност размера на квадратчетата.
Задължително спазвай разстоянията.


--------------------
Бисери :D

QUOTE (oveRLuckEd)
Ползваш някоя нова версия на PHP, която е вече ооп ориентирана и заради това ти я изкарва тази грешка.


QUOTE (nbacool2)
Щом няма input полета, значи няма откъде да се направи SQL инжекция Very Happy
PM
Top
Sta82
Публикувано на: 06-04-2018, 19:47
Quote Post



Име:
Група: Потребител
Ранг: Новопостъпил

Мнения: 14
Регистриран на: 28.02.18



QUOTE (relax4o @ 06-04-2018, 17:00)
QUOTE (Sta82 @ 06-04-2018, 14:09)
Ааа, и да е responsive също, тоест като свия браузъра, пак да няма проблеми с изгледа на въртящите се кутийки и по четирите краища на браузъра.

Някакви други рикуести да имаш за без пари? Звучиш, сякаш си шеф и даваш заповеди какво да се направи.

И защо аджеба ще зуум аутваш на 25% браузъра.

Трети път се пробвам да публикувам ново мнение, ама нещо мисли дълго-дълго и накрая се прецаква и нищо не излиза. Исках да кажа, че ще съм искрено благодарен, ако успееш да ми помогнеш и имаш времето за тази работа, разбира се, но не мога да ти платя, за съжаление. Много ли код има още да се напише, за да се случи, както трябва да го направя по домашно? Та питам си във форум, защото знам, че по форумите се решават подобен род проблеми, особено когато са свързани с темата. Гледам да не спамя много, за да не наруша правилата на форума, защото разбрах, че раздават червени точки, а аз не се чувствам като калинка. icon_lol.gif Единствено бих могъл да те почерпя виртуално с една бира (тоя лаф скоро го чух, та да се направя на оригинален), стига да знам емотикона какъв е. icon_lol.gif
PMEmail Poster
Top
0 потребители преглеждат тази тема в момента (0 гости, 0 анонимни потребители)
Потребители, преглеждащи темата в момента:

Topic Options Страници: (2) [1] 2  Reply to this topicStart new topicStart Poll

 


Copyright © 2003-2018 | BG Development | All Rights Reserved
RSS 2.0