- 17, May 2024
- #1
Привет, ребята,
Я не программировал три года, и HTML не для меня, и когда я вернусь, мне придется начинать все сначала.
Так что терпите, если я задаю глупые вопросы или слишком много. Чего я пытаюсь добиться, так это центрировать весь веб-сайт и переместить список с левой боковой панели вправо.
Результат такой же уродливый, как и прикрепленное изображение. Вот что я пытаюсь сделать до сих пор:
Я не программировал три года, и HTML не для меня, и когда я вернусь, мне придется начинать все сначала.
Так что терпите, если я задаю глупые вопросы или слишком много. Чего я пытаюсь добиться, так это центрировать весь веб-сайт и переместить список с левой боковой панели вправо.
Результат такой же уродливый, как и прикрепленное изображение. Вот что я пытаюсь сделать до сих пор:
*,
*:before,
*:after {
box-sizing: border-box;
}
html, body {height: 100%; margin: 0px;}
/* Left Sidebar */
#left-sidebar {
margin: 0;
padding: 0 0.5em 0 0;
width: 4em;
float: left;
}
#left-sidebar ul li {float: right;}
/* Content Container */
#content-container {
margin: 0;
padding: 0.5em;
float: left;
width: 50em;
border-left: 0.08em solid #ccddee;
border-right: 0.08em solid #ccddee;
}
/* Right Sidebar */
#right-box {
margin: 0;
padding: 0 0 0 0.5em;
height: 100%;
float: left;
}
#right-sidebar {
padding-left: 2em;
float: left;
}
ul {list-style: none;}
.wrapper {
margin: 0 auto;
padding: 0;
}
.visuallyhidden {display: none;}
<!doctype html> <html><head> <title>mysite</title> <meta charset="utf-8" /> <link rel="canonical" href="" /> <link rel="stylesheet" type="text/css" href="/mysite/css/styles.css" media="screen" /> <meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1, область просмотра = обложка" /> </head><body> <div class="wrapper"> <ul id="left-sidebar"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <div id="right-box"> <div id="content-container"> <nav> <h1 class="visuallyhidden">MySite</h1> <h2>Home</h2> <div id="menu"></div> </nav> <div> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> <div id="right-sidebar"> <input type="text" placeholder="Поиск.." /> </div> </div> </div> <script src="./mysite/js/main.js"></script> </body></html> 
![[WP] Pace - Premium WordPress Theme](/assets/images/icons/forum3.png){kind=icon}
![[Outsource-people 2015] Selling IT Services to Silicon Valley [Eng]](/assets/images/icons/forum0.png){kind=icon}
