Положение CSS: относительный оставляет пустое пространство внизуHtml

Программисты Html
Ответить
Anonymous
 Положение CSS: относительный оставляет пустое пространство внизу

Сообщение Anonymous »

Итак, я новичок в мире HTML и CSS, и я работал над этим проектом для домашней работы, где мне пришлось использовать позицию: относительно для перемещения предметов. Фаграммы на итальянском языке, и имена класса/идентификации странные, мне очень жаль.






[*]
Ginevra's Archive





Изображение



Ginevra's Archive
Изображение
Изображение
Изображение
Chi è Ginevra?

Ginevra è una studentessa di 16 anni che frequenta l'Istituto Informatico G. Peano di Torino.

Ha la passione di collezionare hobbies,

in questa pagina li troverai tutti!

Изображение
Изображение

La mia frutta preferita..


Изображение


Изображение


Изображение



Изображение

Изображение
La Storia del Piccolo Bruco MaiSazio



Изображение


Una notte, su una foglia illuminata dalla luna, c’era un piccolo uovo.

Ma una Domenica mattina, quando si levò il sole, caldo e splendente, dall’uovo
“Crac!” uscì un piccolo bruco affamato… Subito si mise in cammino alla ricerca di cibo.

Lunedì mangiò una mela, ma non riuscì a saziarsi.

Martedì mangiò due pere, ma non riuscì a saziarsi.

Mercoledì mangiò tre prugne, ma non riuscì a saziarsi.

Giovedì mangiò quattro fragole, ma non riuscì a saziarsi.

Venerdì mangiò cinque arance, ma non riuscì a saziarsi.

Sabato mangiò un dolce al cioccolato, un gelato, un cetriolo, un pezzo di formaggio, una fetta di salame…

Alla sera aveva il mal di pancia! Il giorno dopo era di nuovo Domenica.

E il bruco si mise a mangiare una bella foglia verde.

Si sentì subito meglio…




Изображение

La mia collezione di Francobolli Digitali

Изображение
Изображение
Изображение
Изображение
Изображение
Изображение
Изображение
Изображение
Изображение
Изображение


Изображение


  • Privacy Policy
  • Cookies
  • Terms of Service
  • Language


< /code>
css: < /p>
@font-face {
font-family: Pally;
src: url(./font/Pally-Medium.otf);
}

@font-face {
font-family: Synonym;
src: url(./font/Synonym-Medium.otf);
}

#logo {
width: 100px;
height: 100px;
}

header {
background-color: #aff368;
font-family: Synonym;
position: sticky;
top:5px;
height:100px;
z-index: 1000;
}

nav {
text-align: center;
float: right;
font-size:31.25px;
padding-right: 100px;
}

nav li {
display: inline-block;
}

nav li a {
color:white;
text-shadow: 1px 1px 1px #61b00d;
padding: 10px;
text-decoration: none;
}

nav li a:hover {
background-color:#fe71a5;
color: white;
text-decoration: underline;
}

main {
padding-left:250px;
padding-right:250px;
}

h1 {
font-family: Pally;
font-size:48.83px;
color:#fe71a5;
text-align: center;

}

#orchid2 {
height: 150px;
width: 170px;
position: relative;
bottom: 120px;
left: 350px;

}

#orchid {
height: 150px;
width: 170px;
position: relative;
bottom: 120px;
left: 720px;
}

#book {
display: block;
margin: auto;
position: relative;
bottom: 160px;
}

h1 {
font-family: Pally;
font-size: 48.83px;
color: #fe71a5;
text-align: center;
}

h2 {
font-family: Pally;
font-size: 39.06px;
color: #fe71a5;
}

#chisono {
position: relative;
bottom: 710px;
left: 440px;
text-shadow: 1px 1px 1px #e40255;
font-family: Pally;
}

.me {
color: #fe71a5;
font-family: Synonym;
font-size: 25px;
position: relative;
bottom: 760px;
left: 60px;
text-shadow: 1px 1px 1px #e40255;
padding-left: 650px;
padding-right: 480px;
}

#stamp {
height: 250px;
width: 200px;
position: relative;
bottom: 1060px;
left: 460px;
}

#hr {
width: 1404px;
position: relative;
bottom: 850px;
}

#hr2 {
width: 1404px;
position: relative;
bottom: 900px;
display: block;
}

footer {
font-size: 16px;
margin-top: 50px;
padding: 10px 25px;
background-color: #aff368;
border-radius: 5px;
font-family: Synonym;
color: white;
}

.menu-foot {
font-size: 16px;
}

.menu-foot li {
display: inline;
border-left: 1px solid white;
margin: 5px;
text-shadow: 1px 1px 1px #61b00d;
}

#bruco {
height: 250px;
width: 300px;
float: left;
padding-right: 15px;
}

#gnam {
padding-top: 120px;
padding-bottom: 50px;
}

.pag2 {
position: relative;
bottom: 950px;
}

#ramo {
height: 500px;
width: 500px;
float: right;
margin: 12px;
}

#storia {
font-family: Synonym;
font-size: 25px;
color: #fe71a5;
}

.storia {
position: relative;
bottom: 910px;
}

.francobolli {
padding-left: 200px;
padding-right: 200px;
display: flex;
flex-wrap: wrap;
align-content: space-evenly;
}

.pag1 {
position: relative;
bottom: 880px;
}

.flex-direction-justify-content {
display: flex;
flex-direction: row;
justify-content: space-evenly;
}

#hk, #mm, #ppp {
width: 250px;
height: 250px;
}

.collezione {
position: relative;
bottom: 920px;
}


Подробнее здесь: https://stackoverflow.com/questions/795 ... the-bottom
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»