Бесплатная помощь по верстке

(Ответов: 113, Просмотров: 8270)
Страница 1 из 12 12311 Последняя
  1. Дипломник Аватар для ximet
    • Регистрация: 19.09.2011
    • Сообщений: 222
    • Репутация: 28
    Заметил, что иногда бывает просто необходима мини-консультация по верстке. Верстаю я достаточно давно, так что кое что уже накопилось в опыте. А что не знаю, я всегда стараюсь нагуглить и сначала самому разобраться, чтобы повысить свой скил, а потом и человеку объяснить.

    Времени у меня естественно не много, но постораюсь отвечать по мере накопления вопросов(только на самом деле мини-вопросы, а не вопрос как сверстать макет). Видел подобные темы и по беплатной помощи по wordpress и там в принципе если нет ТопикСтартера, то отвечают и другие люди, что в принципе тоже тут поддерживается.
    p.s. спасибо за толчок к созданию темы semyon.
    • 2

    Спасибо сказали:

    kursant(03.08.2013), semyon(02.08.2013),
  2. Web-разработка Аватар для semyon
    • Регистрация: 20.06.2011
    • Сообщений: 1,781
    • Репутация: 549
    • Webmoney BL: ?
    Раз я сподвиг, то первым и задам вопрос.

    Ситуация такая. Есть 2 дива, 1 фиксированный, второй динамический, один в другом. Это что-то типа полоски заполненности (внутренняя полоска динамическая). Надо внутри этой полоски разместить текст аналог процента состояния.
    При размещении в родительском диве - дочерний смещается (текст занимает его место), при размещении в дочернем - текст выравнивается по дочернему, т.е. при 0% текста вообще нет.
    • 0
  3. Дипломник Аватар для ximet
    • Регистрация: 19.09.2011
    • Сообщений: 222
    • Репутация: 28
    Цитата Сообщение от semyon Посмотреть сообщение
    текст выравнивается по дочернему, т.е. при 0% текста вообще нет.
    Приставил бы листинг кода, было бы яснее. Что могу сказать пока на в скидку, так это проблема с позиционированием, или вы его вообще применяли? Просто при позиционировании вы можете ваш процент состояния выставить где вам будет необходимо.
    • 0
  4. Студент Аватар для kursant
    • Регистрация: 31.01.2013
    • Сообщений: 58
    • Репутация: 14
    • Webmoney BL: ?
    semyon, вообще вариантов множество. Вот к примеру:
    Код HTML:
    <div class="block-1"> <div class="block-2"> </div> <span class="text">70%</span> </div> <style>
    	body {
    		background: #777;
    	}
    	.block-1 {
    		width: 200px;
    		height: 30px;
    		background: #888;
    		border: 1px solid #fff;
    		position: relative;
    	}
    	.block-2 {
    		height: 30px;
    		width: 70%;
    		background: orange;
    	}
    	.text {
    		display: block;
    		position: absolute;
    		top: 5px;
    		left: 85px;
    	}
    </style>
    В итоге: Вложение 10938
    Так же можно сделать что бы текст внутри дочернего элемента был или без абсолютного позиционирования.
    • 1

    Спасибо сказали:

    semyon(03.08.2013),
  5. Новичок
    • Регистрация: 15.01.2013
    • Сообщений: 29
    • Репутация: 1
    Имеется вопрос по HTML верстке. Подробнее на картинке.
    http://savepic.org/4274255.png - Вот что имеется. Это html страница. Нужно сделать ещё такой же блок как на картинке, и чтобы он был справа от имеющегося блока, и они оба были выравнены по горизонтали и вертикали (центр), и между ними было расстояние 15px. Если нужно будет код страницы, оставьте свои данные, я с вами свяжусь.
    • 0
  6. Дипломник Аватар для ximet
    • Регистрация: 19.09.2011
    • Сообщений: 222
    • Репутация: 28
    kursant, я посмотрел код, там немного другая ситуация... Не в позиционировании дело. Там немного другое дело. Я потом напишу сюда результат. Пока я думаю как это.

    Stipkor, одно из решений:

    code

    html

    Код HTML:
    <link rel="stylesheet" type="text/css" href="styles.css" /> <style type="text/css">
    .className{
    	width:270px;
    	height:150px;
    	position:absolute;
    	left:50%;
    	top:50%;
    	margin:-75px 0 0 -275px;
    }
    
    .className2{
    	width:270px;
    	height:150px;
    	position:absolute;
    	left:50%;
    	top:50%;
    	margin:-75px 0 0 10px;
    	
    }
    <body id="exampleBody"> <div class="className"> <p><span lang="uk">Центриро</span><span lang="ru">вание по горизонтали и 
    	вертикали</span> (CSS)</p> </div> <div class="className2"> <p><span lang="uk">Центриро</span><span lang="ru">вание по горизонтали и 
    	вертикали</span> (CSS)</p> </div>
    [свернуть]


    styles.css

    Код HTML:
    
    .className{
    	background-color:#338BC7;
    	width:270px;
    	height:150px;
    	position:relative;
    	
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	border-radius:6px;
    }
    .className2{
    	background-color:#338BC7;
    	width:270px;
    	height:150px;
    	position:relative;
    	
    	-moz-border-radius:6px;
    	-webkit-border-radius:6px;
    	border-radius:6px;
    }
    
    .className p{
    	font-size:22px;
    	margin:45px 10px 10px;
    	color:white;
    	text-align:center;
    	position:absolute;
    }
    
    .className2 p{
    	font-size:22px;
    	margin:45px 10px 10px;
    	color:white;
    	text-align:center;
    	position:absolute;
    }
    
    [свернуть]
    [свернуть]
    • 0
  7. Web-разработка Аватар для semyon
    • Регистрация: 20.06.2011
    • Сообщений: 1,781
    • Репутация: 549
    • Webmoney BL: ?
    kursant, примерно такое же решение, но без релатива у родителя, как он встал так как нужно - не понимаю даже, но работает.
    • 0
  8. Дипломник Аватар для ximet
    • Регистрация: 19.09.2011
    • Сообщений: 222
    • Репутация: 28
    semyon, долго думал искал причину. В принципе причина в том, что обернуто было еще в спан.
    • 0
  9. Студент Аватар для kursant
    • Регистрация: 31.01.2013
    • Сообщений: 58
    • Репутация: 14
    • Webmoney BL: ?
    semyon,
    примерно такое же решение, но без релатива у родителя, как он встал так как нужно - не понимаю даже, но работает
    Что вы имеете ввиду? Не понимаете как работает мое решение? Или ещё что-то?
    • 0
  10. Дипломник Аватар для ximet
    • Регистрация: 19.09.2011
    • Сообщений: 222
    • Репутация: 28
    Цитата Сообщение от kursant Посмотреть сообщение
    Что вы имеете ввиду? Не понимаете как работает мое решение? Или ещё что-то?
    У него она точно также работает, но как ни странно, без
    .block-1 {
    position: relative;
    }
    То есть у родительского элемента у него нет position: relative; и получается всё равно работает. Проверил во всех браузерах работает, либо проблема в том, что он где-то не закрыл тег, либо я не знаю. Просто если нету у родительского элемента position: relative;, то по идее должно выравниваться по body, а тут такой вот парадокс вышел.
    • 0
Страница 1 из 12 12311 Последняя

Похожие темы

Темы Раздел Ответов Последний пост
Бесплатная помощь по wordpress
WordPress 2451 02.12.2018 02:53
Бесплатная помощь по ucoz сайтам
Создание сайтов 6 31.03.2013 14:25
Нужна помощь по верстке.
Web программирование 3 25.02.2013 11:54
Нужна не бесплатная помощь в заполнении сайта
Копирайтинг, переводы, постинг 4 22.12.2012 00:33
Нужна небольшая помощь в верстке (DLE). Вывод популярных новостей.
DLE 3 01.07.2012 17:09

У кого попросить инвайт?

Вы можете попросить инвайт у любого модератора:

Информеры