Jump to content
  • 0

Плюсы и минусы верстки

zolga7

Asked by zolga7,

 Share

Question

zolga7 Explorer

zolga7

Posted
Posted

Здравствуйте. Скажите, пожалуйста, все плюсы и минусы этой верстки.

http://itmages.ru/image/view/1558163/bc9bb30a

@charset "windows-1251";/* CSS Document */body {	margin: 0px;	padding: 0px;	width: 100%;	background: #00dbfb;	font: bold 16px/30px Arial, Helvetica, sans-serif;	color: #578eb8;}.p {	line-height: 1.5;	margin: 0px;	padding: 7px 30px;}.pre {	width: 300px;	margin-left: 390px;	margin-bottom: 0px;	padding: 0px 0px 25px 0px;	font: 16px/20px bold Arial, Helvetica, sans-serif;}.leftimg {		float: left;		margin: 10px;}p {	margin: 0px;	padding: 0px;}h1 {	color: #FFFFFF;	margin: 0px;	padding: 100px 0px 0px 30px;	font-family: Verdana, Arial, Helvetica, sans-serif;}h2 {	margin: 0px;	padding: 15px;	text-align: center;}#links {	float: left;	position: absolute;}#nav, #nav ul {	margin: 0px;	padding: 0px;	list-style: none;	font: 14px/20px Arial, Helvetica, sans-serif;}#nav {	margin: 0px;	padding: 0px;	height: 27px;}#nav li {	float: left;	position: relative;}#nav a {	display: block;	color:#FFFFFF;	margin: 0px;	padding: 3px 10px;	text-align: center;	width: 120px;	background: #0072d7;	text-decoration: none;	border-radius: 20px 0px 20px 0px;}#nav a:hover {	color: #578eb8;	background: #FFFFFF;}#nav ul {	display: none;	position: absolute;	left: 0px;	top: 27px;}#nav ul a {	background: #0072d7;	border-bottom: 1px solid #ffffff;	border-radius: 0px;}#nav li:hover ul {	display: block;}#container {	padding: 0px;	margin: 30px auto;	width: 970px;	height: auto;}#haeder {	margin: 0px;	padding: 0px;	height: 433px;	width: 970px;	background: #1fc200 url(../image/header.jpg) no-repeat center top;	border-radius: 20px 20px 0px 0px;}#content {	margin: 0px;	padding: 0px;	width: 970px;	height: auto;	background: #ffffff;}#footer {	margin: 0px;	padding: 0px;	height: auto;	width: 970px;	background: #0072d7;	border-radius: 0px 0px 20px 20px;}#footer p {	margin: 0px 0px;	padding: 10px 0px;	text-align: center;	color: #FFFFFF;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" /><title>Натали</title><link rel="stylesheet" type="text/css" href="../css/style.css" /></head><body><div id="container"><div id="haeder"><h1>Натали</h1></div><div id="links">    <ul id="nav">      <li><a href="../index.html">О Наташе</a></li>      <li><a href="#">Мой стихи</a>         <ul>       	   <li><a href="page.html">Осень</a></li>           	<li><a href="page1.html">Воспоминания</a></li>            <li><a href="page2.html">***</a></li>            <li><a href="page3.html">***</a></li>            <li><a href="page4.html">ЛЮБОВЬ</a></li>            <li><a href="page5.html">***</a></li>            <li><a href="page6.html">ЛЮБИМОМУ</a></li>         </ul>      </li></ul><div id="content"><h2>Осень</h2><pre class="pre">Осень пришла и тыСнова пришел ко мнеСнова вместе я и тыКак во снеСнова даришь мне теплоСнова ты со мнойСловно хочешь мне сказатьПросто я инойЯ не знаю, как мне бытьТы ведь не со мнойМожет быть тебя проститьНу а ты с другойОсень пришла и тыСнова пришел ко мнеСнова вместе я и тыКак во сне</pre></div><div id="footer"><p>© 2014г. Web мастер </p></div></div></div></body></html>

Скажите, пожалуйста, как еще можно отформатировать стихотворение с помощью css, чтобы оно было строго по центру?

Link to comment
Share on other sites

11 answers to this question

Recommended Posts

  • 0
ModMaker Explorer

ModMaker

Posted
Posted (edited)

 

 

Для выравнивания стихотворения ровно по центру для 

#content

 задайте значение 

{    margin: 0 auto;}

Спасибо за ответ и за помощь. Я сделала как вы сказали, но что не очень.

 

Конечно, потому что для применения маргин 0 авто, должна быть задана фиксированная ширина блока.

В вашем случае можете сделать так , 

#content { display:inline; text-align:center;}

Edited by ModMaker
Link to comment
Share on other sites
  • 0
zolga7 Explorer

zolga7

Posted
  • Author
Posted (edited)

 

Конечно, потому что для применения маргин 0 авто, должна быть задана фиксированная ширина блока.

В вашем случае можете сделать так , 

#content { display:inline; text-align:center;}

 

у меня #container #content и даже .pre имеют фиксированную ширину.

 

Сделала как вы посоветовали, пропал белый фон и строчки стали строга по центру. А мне нужно, чтобы само стихотворения было по центру.

в менюшке надо подразделы писать в нижнем регистре и трансформировать в верхний.

Источник: курсы Специалист 

Как спомошью css можно трансформировать из нижнего регистра в верхний?

Edited by zolga7
Link to comment
Share on other sites
  • 0
ModMaker Explorer

ModMaker

Posted
Posted (edited)

Простите, не обратил внимания на ваш код внимательно.
Сейчас покопался, он ээ нерационален, советую больше времени уделить теории и разбору других шаблонов.
 

 

Вот ваше решение - 

<h2>Осень</h2>

Переносим внутрь div class="pre"

 

Убираем у h2{text-align:center;}
Убирем у .pre {margin-left:390px;}
Добавляем в правило .pre {margin:0 auto}


А по хорошему переписываем весь код с нуля, я сам новичёк, но уже привык разбирать чужие шаблоны, то что творится в вашем - караул.

Edited by ModMaker
Link to comment
Share on other sites
  • 0
DivMan Explorer

DivMan

Posted
Posted

 

в менюшке надо подразделы писать в нижнем регистре и трансформировать в верхний.

Источник: курсы Специалист 

Как спомошью css можно трансформировать из нижнего регистра в верхний?

 

text-transform: uppercase;
Link to comment
Share on other sites
  • 0
zolga7 Explorer

zolga7

Posted
  • Author
Posted (edited)

Простите, не обратил внимания на ваш код внимательно.

Сейчас покопался, он ээ нерационален, советую больше времени уделить теории и разбору других шаблонов.

 

 

Вот ваше решение - 

<h2>Осень</h2>

Переносим внутрь div class="pre"

 

Убираем у h2{text-align:center;}

Убирем у .pre {margin-left:390px;}

Добавляем в правило .pre {margin:0 auto}

А по хорошему переписываем весь код с нуля, я сам новичёк, но уже привык разбирать чужие шаблоны, то что творится в вашем - караул.

Я думала у меня хорошо написан код. Спасибо.

 

 

в менюшке надо подразделы писать в нижнем регистре и трансформировать в верхний.

Источник: курсы Специалист 

Как спомошью css можно трансформировать из нижнего регистра в верхний?

 

text-transform: uppercase;

Спасибо.

Edited by zolga7
Link to comment
Share on other sites
  • 0
ModMaker Explorer

ModMaker

Posted
Posted (edited)
@charset "windows-1251";

 

Караул

body { margin: 0px; padding: 0px;

 

Используйте normalize.css

 

.p

 

Класс п?

padding: 0px 0px 25px 0px;

Не надо в нулевых значений использовать пиксели. В даном случае должно выглядить вот так - 0 0 25px;

h1 {  h2 {

 Плохо, а если у вас будет много заголовков? 

#nav, #nav ul { margin: 0px; padding: 0px; list-style: none; font: 14px/20px Arial, Helvetica, sans-serif; } #nav { margin: 0px; padding: 0px; height: 27px;

 

 Дважды задаёте тому же айди падинги и маргины, вообще почему айди? должен быть класс.

 

border-radius: 20px 0px 20px 0px;

 

Достаточно 20px 0;

 

 

Доктайп - достаточно <!DOCTYPE html>

 

<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

 

Зачем всё это? Выбор кодировки тоже не ясен, достаточно <meta charset="utf-8">

 

<div id="haeder">

 

Во первых - header, во вторых не айди а класс, в третьих <header></header>

<div id="links"><ul id="nav">

Какой смысл в диве линкс? Тем более вы его не закрыли.

PS я сам новичёк, поэтому наверняка многое не досмотрел. Ну и это касательно ошибок в коде, а не методов вёрстки.

Edited by ModMaker
Link to comment
Share on other sites
  • 0
zolga7 Explorer

zolga7

Posted
  • Author
Posted

все равно стих не строго по центру.


<div id="links"><ul id="nav">

Какой смысл в диве линкс? Тем более вы его не закрыли.

PS я сам новичёк, поэтому наверняка многое не досмотрел. Ну и это касательно ошибок в коде, а не методов вёрстки.

 

dreamweaver показывает, что линкс закрыт. Короче я в нокауте! Кто-нибудь еще может, что-нибудь добавить?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Mondeus
      Вёрстка футера на движке Xenforo
      By Mondeus
      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение. 
      .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  

    • Mix9
      див уходит за границу экрана
      By Mix9
      есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 
      .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>
    • Andy_Code
      Проблема с обработкой стилей Gulp
      By Andy_Code
      Здравствуйте! Проблема заключается в следующем: есть стартовый шаблон от "Фрилансера по жизни" версии 2021 года, открываю в VSCode, ввожу в терминале npm i затем gulp, все срабатывает как и должно, создается папка с результатом, начинаю прописывать стили для header, задаю ограничивающий контейнер и при проверке работоспособности данного контейнера выясняется, что стили, прописанные мной перекрывают стили медиа-запросов, прописанных в шаблоне и по итогу адаптив не работает, получается что итоговый css собирается в не правильном порядке! Подскажите, пожалуйста, как подобную проблему можно исправить?)
    • vladdvin
      Неотображаемый текст в шапке сайта.
      By vladdvin
      Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал
      CSS
      В результате отображается следующая картинка

      в режиме инструментов разработчика. А вне режима вообще отображает

      Подскажите как добиться отображения текста как на макете.
    • RaiderCoder
      Проблема при верстке кнопки
      By RaiderCoder
      Здравствуйте , сделал макет сайта для интернет магазина . Но столкнулся с проблемой при верстке кнопок на главной странице и не нашел информации как можно уместить текст + несколько картинок в одну кнопку. Знает кто решение и реалезуемо оно вообще ?

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept