LINUX.ORG.RU
решено Форум — Web-development  

Автоширина блока

 ,


0

1

Туплю. Жестоко туплю.

Два блока: 

			<div class = "dheaderlogo blocke yelly">
			</div>
			<div class = "dheaderlogin blocke yelly">
			</div>
Пытаюсь заполнить ими всю ширину с отступами в 10 пкс друг от друга и от краев: 
div.dheaderlogin
{
	display : block;
	
	width : 200px;
	height : 130px;
	
	margin-top : 10px;
	margin-right : 10px;
}

div.dheaderlogo
{
	display : block;
	
	width : auto;
	height : 130px;
	
	margin-left : 10px;
	margin-right : 220px;
	margin-top : 10px;
}
login появляется на «второй строке». Использую inline-block - схлопывается logo.

Как вылечить?

★★★

Последнее исправление: AlexCones (всего исправлений: 1)
← [svg] «вырезать» содержимое по маске
Подстановка значения в SQL запрос →
Ответ на: комментарий от Deleted

Они и так в одном диве-контейнере лежат, а если вложить login в logo, то будет не айс с выделением logo.

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

то будет не айс с выделением logo.

непонял в чем будет неайс, тыб всю страничку привел, лучше чтоб ее можно было потыкать

Deleted
()
Ответ на: комментарий от Deleted

Просто не люблю такого рода извраты.

непонял в чем будет неайс, тыб всю страничку привел, лучше чтоб ее можно было потыкать

Пжалста: 

<html>
	<head>
		<link rel = "stylesheet" type = "text/css" href = "styles/main.css">
	</head>
	<body class = "pattern1">
		<div class = "dheadercontainer blocke pinky">
			<div class = "dheaderlogo blocke yelly">
			</div>
			<div class = "dheaderlogin blocke yelly">
			</div>
		</div>
		<div class = "dcontentcontainer blocke pinky">
			<div class = "dcontentmenu blocke yelly">
			</div>
			<div class = "dcontentcontent blocke yelly">
			
			</div>
		</div>
	</body>
</html>

/* MAIN RULES */

html,
body
{
	width : 100%;
	height : 100%;
	
	padding : 0;
	margin : 0;
}

/* TEMPLATES */

.pinky
{
	background:
		linear-gradient(180deg, rgba(255, 128, 255, 0.7), rgba(255, 128, 255, 0.2) 50%),
		linear-gradient(90deg, rgba(255, 128, 255, 0.7), rgba(255, 128, 255, 0.2) 50%),
		rgba(255, 255, 255, 1);
}

.yelly
{
	background:
		
		linear-gradient(180deg, rgba(255, 255, 128, 0.7), rgba(255, 255, 128, 0.2) 50%),
		linear-gradient(90deg, rgba(255, 255, 128, 0.7), rgba(255, 255, 128, 0.2) 50%),
		rgba(255, 255, 255, 1);
}


.turqy
{
	background:
		linear-gradient(180deg, rgba(128, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 50%),
		linear-gradient(90deg, rgba(128, 255, 255, 0.7), rgba(255, 255, 255, 0.2) 50%),
		rgba(255, 255, 255, 1);
}

.blocke
{	
	border-radius : 5px;
	
	border-width : 1px;
	border-color : rgba(255, 255, 255, 0.9);
	border-style : solid;
	
	box-shadow : 0 0 5px rgba(0, 0, 0, 0.3);
}

.pattern1
{
	background:
		url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAF0lEQVQImWNgYGBgePbs2X8GGEDhwAAAv9AHYx0omsYAAAAASUVORK5CYII=);
}

/* CONTAINERS */

div.dheadercontainer
{
	display : block;
	
	width : 90%;
	height : 150px;
	
	min-width : 800px;
	
	margin : auto;
	margin-top : 10px;
}

div.dcontentcontainer
{
	display : block;
	
	width : 90%;
	height : auto;
	
	min-width : 800px;
	min-height : 600px;
	
	margin : auto;
	margin-top : 10px;
	margin-bottom : 10px;
}

/* HEADER */

div.dheaderlogin
{
	display : block;
	position : relative;
	
	width : 200px;
	height : 130px;
	
	margin-top : 10px;
	margin-right : 10px;
	
	float : left;
}

div.dheaderlogo
{
	display : block;
	position : relative;
	
	width : auto;
	height : 130px;
	
	margin-left : 10px;
	margin-right : 300px;
	margin-top : 10px;
}

/* CONTENT */

div.dcontentmenu
{
	display : block;
	
	width : auto;
	height : 50px;
	
	margin-left : 10px;
	margin-right : 10px;
	margin-top : 10px;
}

div.dcontentcontent
{
	display : block;
	
	width : auto;
	height : auto;
	
	min-height : 520px;
	
	margin-left : 10px;
	margin-top : 10px;
	margin-right : 10px;
	margin-bottom : 10px;
}

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

Тому, у которого фиксированный width. Можно login и поменять его местами с другим. Блок с float должен идти первым.

goingUp ★★★★★
()

С float всё должно работать. Возможно ты что-то делаешь не так. Забей и сделай таблицей :}

Deleted
()
Последнее исправление: Mystra_x64 (всего исправлений: 1)
Ответ на: комментарий от goingUp

к с float должен идти первым

Мерси, мсье! Solved!

AlexCones ★★★
() автор топика
Ответ на: комментарий от Deleted

Заработало. Ну, да, как-то так :)

Deleted
()
Ответ на: комментарий от AlexCones

Вот еще одно решение: http://jsfiddle.net/g7ZCw/2/ . Без таблиц, вложенных дивов и подобных извращений:

.dheaderlogin {
  height : 130px;
  margin-top : 10px;
  margin-right : 10px;
  overflow: hidden;
}

.dheaderlogo {
  width : 300px;
  height : 130px;
  margin: 10px
  float: left;
}

По поводу html:

class = "dheaderlogin blocke yelly"

Ты думаешь, лишние 2 байта на строку — это очень здорово? Веб-серверы и провайдеры думают иначе. Вот зачем делать по 2 пробела вокруг '='? Это какой-то фетишь?

CSS:

div.bla-bla {

А если ты потом захочешь применить стиль к другому элементу (например, вместо div станешь использовать, как модно в html5, какой-нибудь <section>)? Будешь копипастить? Или, может быть, напишешь 

div.bla-bla, section.bla-bla {

? А может быть, наконец, возьмешься за ум и начнешь везде писать как надо:

.bla-bla {

Кстати, что за фигня у тебя со скобками? Тебе платят за строки css кода, что ты их пишешь на новой строке? Или еще один фетиш?

Также, советую не страдать фигней, и вместо:

margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;

писать нормально? 

margin: 10px;

Тоже самое и к border:

вместо

	border-width : 1px;
	border-color : rgba(255, 255, 255, 0.9);
	border-style : solid;

можно написать красивый и аккуратный

    border: 1px solid rgba(255, 255, 255, 0.9);

Также, незачем лишний раз переопределять свойство display у div'ов. Ах да, тебе же наверное за строки кода платят...

И запомни: каждый лишний байт в css/js/html - лишняя нагрузка на канал и сервер. И там, где неудобно, некрасиво, ненужно использовать пробелы/переносы строк, прочую муть - не используй их.

PS. Критику не стоит воспринимать близко к сердцу, просто количество быдло-верстальщиков в этом треде зашкаливает, накипело :)

drakmail ★★★★
()
Ответ на: комментарий от drakmail

количество быдло-верстальщиков в этом треде зашкаливает

Ты просто илита, у них всегда бугурт, это нормально :}

Deleted
()
Ответ на: комментарий от drakmail

лишний байт в css/js/html - лишняя нагрузка на канал и сервер

Вот из-за таких как вы, убирающим разные байты в ущерб читаемости и считается, что у Си/Перла write-only синтаксис.

AlexCones ★★★
() автор топика
Ответ на: комментарий от AlexCones

Так как раз не в ущерб читабельности, а наоборот. Удобство повышается, читабельность тоже, и размер как бонус.

drakmail ★★★★
()
Ответ на: комментарий от AlexCones

Я только за использование jQuery + CoffeeScript. ИМХО, сырой JS очень убог.

drakmail ★★★★
()

Собственно, советую ознакомиться автору хотя бы с этим, чтобы не вызывать бугурт у тех, кто потом будет его css поддерживать :)

PS. Этот гайдлайн, имхо, более сжат и насыщен, но он не на русском.

drakmail ★★★★
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
← [svg] «вырезать» содержимое по маске
Web-development
Подстановка значения в SQL запрос →