Привет, ребята,
Я не программировал три года, и HTML не для меня, и когда я вернусь, мне придется начинать все сначала. Так что терпите, если я задаю глупые вопросы или слишком много.
Чего я пытаюсь добиться, так это центрировать весь веб-сайт и переместить список с левой боковой панели вправо. Результат такой же уродливый, как и прикрепленное изображение.
Вот что я пытаюсь сделать до сих пор:
Код (разметка): CSS:
Код (разметка): Заранее спасибо за помощь.
Я не программировал три года, и HTML не для меня, и когда я вернусь, мне придется начинать все сначала. Так что терпите, если я задаю глупые вопросы или слишком много.
Чего я пытаюсь добиться, так это центрировать весь веб-сайт и переместить список с левой боковой панели вправо. Результат такой же уродливый, как и прикрепленное изображение.
Вот что я пытаюсь сделать до сих пор:
Код:
*,
*:before,
*:after { box-sizing: border-box;
}
html, body {height: 100%; margin: 0px;}
#left-sidebar { margin: 0; padding: 0 0.5em 0 0; width: 4em; float: left;
}
#left-sidebar ul li {float: right;}
#content-container { margin: 0; padding: 0.5em; float: left; width: 50em; border-left: 0.08em solid #ccddee; border-right: 0.08em solid #ccddee;
}
#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;}Код (разметка): CSS:
<!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> Код (разметка): Заранее спасибо за помощь.
