#html #css #css-float #css-position
#HTML #css #css-float #css-позиция
Вопрос:
Я создавал это разными способами, и каждый раз я хотел, чтобы панель навигации находилась в левой части страницы. Каждый раз я пытаюсь сделать это по-другому, но я знаю, что чего-то не хватает. Пожалуйста, помогите. Я создаю тело, а затем надеюсь переместить навигацию вдоль левой части тела.
Чего я не понимаю?? Спасибо. Код ниже.
* {
margin: 0px;
padding: 0px;
}
main,
nav {
display: block;
}
#container {
width: 760px;
margin-right: auto;
margin-left: auto;
margin-top: 10px;
position: relative;
}
main {
width: 850px;
height: 1200px;
border: 5px solid black;
border-radius: 15px;
background-color: lightgreen
}
h1 {
width: 350px;
height: 30px;
padding: 5px;
margin-left: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
}
#paraFirst {
width: 550px;
height: 200px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 150px;
}
#listSomething {
width: 150px;
height: 150px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 150px;
}
.orderedList {
padding: 5px;
position: relative;
left: 15px;
}
#rest {
width: 400px;
height: 780px;
padding: 5px;
border: 1px solid black;
border-radius: 5px;
position: relative;
left: 315px;
bottom: 155px;
}
nav {
margin-right: auto;
margin-left: auto;
width: 70px;
height: 250px;
float: left;
border: 5px solid black;
border-radius: 10px;
position: relative;
left: 0px;
}
ul {
list-style-type: none;
}
<div>
<main id="container">
<div>
<h1>Pixel Art</h1>
</div>
<div id="paraFirst">
<p>Pixel art is a form of digital art, created through the use of software, where images are edited on the pixel level. The aesthetic for this kind of graphics comes from 8-bit and 16-bit computers and video game consoles, in addition to other limited
systems such as graphing calculators. In most pixel art, the color palette used is extremely limited in size, with some pixel art using only two colors. Creating or modifying pixel art characters or objects for video games is sometimes called
spriting, a term that arose from the hobbyist community. The term likely came from the term sprite, a term used in computer graphics to describe a two-dimensional bitmap that is used in tandem with other bitmaps to construct a larger scene.</p>
</div>
<div id="listSomething">
<h5>Somethings just gotta be listed . . . .</h5>
<ol>
<li class="orderedList">Cool Pixel Art</li>
<li class="orderedList">Eh Pixel Art</li>
<li class="orderedList">Dodo pixel art</li>
</ol>
</div>
<div id="rest">
<h3>History</h3>
<p>The earliest counterparts of modern pixel art could be found in the electronic advertising displays of New York City during the early 20th century, with simple monochromatic light bulb matrix displays extant circa 1937.[1] Pixel art as it is known
today largely originates from classic video games, particularly classic arcade games such as Space Invaders (1978) and Pac-Man (1980), and 8-bit consoles such as the Nintendo Entertainment System (1983) and Sega Master System (1985). The term
pixel art was first published by Adele Goldberg and Robert Flegal of Xerox Palo Alto Research Center in 1982.[2] The concept, however, goes back about 11 years before that, for example in Richard Shoup's SuperPaint system in 1972, also at Xerox
PARC.[3] Some traditional art forms, such as counted-thread embroidery (including cross-stitch) and some kinds of mosaic and beadwork, are very similar to pixel art. These art forms construct pictures out of small colored units similar to the
pixels of modern digital computing. A similar concept on a much bigger scale can be seen in the North Korean Arirang Festival.</p>
<h4>Definition</h4>
<p>Although the definition of the medium is not concrete, the majority of pixel artists agree that an image can be categorized as pixel art when the artist is manipulating the image with deliberate control over the placement of each individual pixel.[4]
When purposefully editing in this way, changing the position of a few pixels can have a drastic effect on the image. Most pixel artists do not consider images that have had filters applied to them which cause the image to look pixellated to be
the same as pixel art, as the pixels that make up the image were not consciously placed by the artist, and usually do not hold much importance to the bigger picture. A common characteristic in pixel art is the low overall colour count in the image.
Pixel art as a medium mimics a lot of traits found in older video game graphics, rendered by machines which were capable of only outputting a limited number of colours at once. Additionally, many pixel artists are of the opinion that in most cases,
using a large number of colours, especially when very similar to each other in value, is unnecessary, and detracts from the overall cleanliness of the image, making it look messier. Many experienced pixel artists recommend not using more colours
than necessary.</p>
</div>
</main>
<nav>
<ul>
<li>Home</li>
<li>Slidell</li>
<li>ATL</li>
<li>Family</li>
<li>About Me</li>
</ul>
</nav>
Комментарии:
1. Вы пробовали перемещать навигацию выше main? Кроме того, не имеет смысла иметь плавающий левый, а затем автоматический переход влево / вправо. Float разместит вашу навигацию слева, поля разместят навигацию по центру, что означает, что они будут переопределены вашим стилем float. Удалите все три и переместите навигацию выше основной
2. 1 спасибо. Это сработало. Но я все еще надеюсь узнать, как перенести его из нижней части HTML-документа в верхний левый угол с помощью CSS. Я смотрю, как другие делают это, просто чтобы показать float: left; работает, но когда я его использую, работает не так, как у них. Я смотрел видео Стефана Мишука.
3. Представьте HTML как скелет, то, что вы помещаете сверху, находится сверху, а то, что вы помещаете ниже, находится ниже. Когда вы перемещаетесь влево, вы указываете элементу, чтобы он перемещался слева от своего контейнера. Для большей читаемости вашего кода потребуются некоторые корректировки. Если вы создаете весь веб-сайт на основе поплавков, у вас будет много проблем. Изучите и прочитайте немного больше о html и css, и вы в конечном итоге получите это.
Ответ №1:
HTML Переместите раздел навигации ниже над вашим main
тегом
<nav>
<ul>
<li>Home</li>
<li>Slidell</li>
<li>ATL</li>
<li>Family</li>
<li>About Me</li>
</ul>
</nav>
<main>
.
.
.
CSS
Не имеет смысла иметь плавающее левое, а затем автоматическое изменение поля влево / вправо. Float разместит вашу навигацию слева, поля разместят навигацию по центру, что означает, что они будут переопределены вашим стилем float. Вам также не нужен position: relative
или left:0px
.
nav {
width: 70px;
height: 250px;
border: 5px solid black;
border-radius: 10px;
}