CSS, float

salatovij
10 лет, 1 месяц назад (отредактировано 10 лет, 1 месяц назад)
Темы: 20
Сообщения: 87
Участник с: 16 июля 2012
Помогите перенести нужный блок, на скриншоте думаю всё понятно.


style.css
#auth
{
	margin:18px 18px 0px 0px;
	padding:3px;
	float:right;
	font-size:12px;
	background-color:#fff;
	color:#333;
	border:1px solid #911;
	border-radius:3px;
}
bobart
10 лет, 1 месяц назад
Темы: 38
Сообщения: 2537
Участник с: 28 ноября 2009
Ты уверен, что тебе нужен именно float, а не margin?
salatovij
10 лет, 1 месяц назад
Темы: 20
Сообщения: 87
Участник с: 16 июля 2012
bobart
Ты уверен, что тебе нужен именно float, а не margin?
Думаю да, к сожалению margin тут бессилен.
edevyatkin
10 лет, 1 месяц назад
Темы: 0
Сообщения: 13
Участник с: 16 июля 2012
Код страницы в студию! :) Хотя бы без контента, а лишь дивы и их css.
Ширина у #other и #system железно прописана или в процентах?
salatovij
10 лет, 1 месяц назад
Темы: 20
Сообщения: 87
Участник с: 16 июля 2012
edevyatkin
Код страницы в студию! :) Хотя бы без контента, а лишь дивы и их css.
Ширина у #other и #system железно прописана или в процентах?
У #other и #system ширина явно вообще не указана.

index.php
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/default.css" />
<title>Salatovij • Блог</title>
<div id="main">
	<?php 
		if(isset($_GET['exit']))
		{
			setcookie("id", "", time()-3600*24*30*12, "/");
			setcookie("hash", "", time()-3600*24*30*12, "/");
		}
	?>
	<div id="logo"><a href="/#" title="Salatovij Блог">#</a> Салатовый Блог</div>
	<div id="desc">Салатовый - это как зелёный, только светлее.</div>
	<?php include "core.php"; ?>
	<div id="copy">Copyleft 2012 Salatovij</div>
</div>
<?php include "inc/auth_form.php"; ?>

style.css:
body
{
	margin:8px 0px;
	padding:0px;
	background-image:url(bg.png);
}
a:link, a:visited
{
	text-decoration:none;
	color:#369;
}
a:active { color:lime; }
#main
{
	max-width:60%;
	margin:0px auto;
	text-align:center;
	font-family:Tahoma;
}
#logo
{
	font-weight:bold;
	font-size:16px;
	color:#eee;
}
#desc
{
	font-size:small;
	color:#eee;
}
#auth
{
	margin:0px;
	padding:3px;
	float:right;
	font-size:12px;
	background-color:#fff;
	color:#333;
	border:1px solid #911;
	border-radius:3px;
}
.title_post
{
	font-weight:bold;
	color:#161;
}
.title_post:hover
{
	text-decoration:underline;
	color:#191;
}
.post1
{
	margin:2px;
	padding:8px;
	text-align:left;
	font-size:14px;
	background-color:#ffc;
	color:#333;
	border-radius:5px;
}
.post2
{
	margin:2px;
	padding:8px;
	text-align:left;
	font-size:14px;
	background-color:#ffe;
	color:#333;
	border-radius:5px;
}
.info_post
{
	font-size:10px;
	color:#999;
}
#copy
{
	font:10px Verdana;
	text-align:left;
	color:#eee;
	border-radius:5px;
}
#error
{
	margin:0px;
	padding:0px;
	background-color:#eaa;
	color:#333;
	border-radius:5px;
}
.other
{
	font-size:12px;
	background-color:#ccc;
	color:#fff;
	border-radius:5px;
}
.system
{
	font-size:12px;
	background-color:#911;
	color:#fff;
	border-radius:5px;
}
edevyatkin
10 лет, 1 месяц назад
Темы: 0
Сообщения: 13
Участник с: 16 июля 2012 
<div style="width: 800px; margin: 0 auto; border:1px solid gray; height: 400px">
	<div style="width: 650px; float: left; border: 1px solid black; height: 100px">Пост 1</div>
	<div style="width: 140px; float: right; border: 1px solid black; margin-left:5px">Меню</div>
	<div style="width: 650px; float: left; border: 1px solid black; height: 100px">Пост 2</div>
</div>
border, высоту и ширину поставил ради примера. Также можно попробовать в процентах, подобрать нужное сочетание отступов и ширины рамки.
Стили, конечно, надо вынести в css.
salatovij
10 лет, 1 месяц назад
Темы: 20
Сообщения: 87
Участник с: 16 июля 2012
Копирайт сместился, а менюшка так и осталась на том месте :(


index.php:
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/default.css" />
<title>Salatovij • Блог</title>
<div id="main">
	<?php 
		if(isset($_GET['exit']))
		{
			setcookie("id", "", time()-3600*24*30*12, "/");
			setcookie("hash", "", time()-3600*24*30*12, "/");
		}
	?>
	<div id="logo"><a href="/#" title="Salatovij Блог">#</a> Салатовый Блог</div>
	<div id="desc">Салатовый - это как зелёный, только светлее.</div>
	<?php include "core.php"; ?>
	<div id="copy">Copyleft 2012 Salatovij</div>
</div>
<?php include "inc/auth_form.php"; ?>

style.css:
body
{
	margin:8px 0px;
	padding:0px;
	background-image:url(bg.png);
}
a:link, a:visited
{
	text-decoration:none;
	color:#369;
}
a:active { color:lime; }
#main
{
	width: 800px;
	margin: 0 auto;
	height: 400px
}
#logo
{
	font-weight:bold;
	font-size:16px;
	color:#eee;
}
#desc
{
	font-size:small;
	color:#eee;
}
#auth
{
	width: 140px;
	float: right;
	border: 1px solid black;
	margin-left:5px
}
.title_post
{
	font-weight:bold;
	color:#161;
}
.title_post:hover
{
	text-decoration:underline;
	color:#191;
}
.post1
{
	width: 650px;
	float: left;
	height: 100px
}
.post2
{
	width: 650px;
	float: left;
	height: 100px
}
.info_post
{
	font-size:10px;
	color:#999;
}
#copy
{
	font:10px Verdana;
	text-align:left;
	color:#eee;
	border-radius:5px;
}
#error
{
	margin:0px;
	padding:0px;
	background-color:#eaa;
	color:#333;
	border-radius:5px;
}
.other
{
	font-size:12px;
	background-color:#ccc;
	color:#fff;
	border-radius:5px;
}
.system
{
	font-size:12px;
	background-color:#911;
	color:#fff;
	border-radius:5px;
}
salatovij
10 лет, 1 месяц назад
Темы: 20
Сообщения: 87
Участник с: 16 июля 2012
Сделал, спасибо :)

# UPD

Ан-нет.
Как то так получилось.


index.php:
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style/default.css" />
<title>Salatovij • Блог</title>
<div id="main">
	<?php 
		if(isset($_GET['exit']))
		{
			setcookie("id", "", time()-3600*24*30*12, "/");
			setcookie("hash", "", time()-3600*24*30*12, "/");
		}
	?>
	<div id="logo"><a href="/#" title="Salatovij Блог">#</a> Салатовый Блог</div>
	<div id="desc">Салатовый - это как зелёный, только светлее.</div>
	<?php include "core.php";
		include "inc/auth_form.php"; ?>
</div>
<div id="copy">Copyleft 2012 Salatovij</div>

style.css
body
{
	margin:8px 0px;
	padding:0px;
	background-image:url(bg.png)
}
a:link, a:visited
{
	text-decoration:none;
	color:#369
}
a:active { color:lime; }
#main
{
	width:800px;
	height:460px;
	margin:0 auto
}
#logo
{
	font-weight:bold;
	font-size:16px;
	color:#eee
}
#desc
{
	font-size:small;
	color:#eee
}
#auth
{
	width: 140px;
	float: right;
	margin-left:5px
}
.title_post
{
	font-weight:bold;
	color:#161
}
.title_post:hover
{
	text-decoration:underline;
	color:#191
}
.post1
{
	width:650px;
	margin:2px;
	padding:3px;
	float:left;
	height:200px;
	background-color:#ffc;
	border-radius:3px
}
.post2
{
	width:650px;
	margin:2px;
	padding:3px;
	float:left;
	height:200px;
	background-color:#fff;
	border-radius:3px
}
.info_post
{
	font-size:10px;
	color:#999
}
#copy
{
	max-width:800px;
	margin:0 auto;
	font-size:9px;
	text-align:left;
	color:#eee;
	border-radius:5px
}
#error
{
	margin:0px;
	padding:0px;
	background-color:#eaa;
	color:#333;
	border-radius:5px
}
.other
{
	font-size:12px;
	background-color:#ccc;
	color:#fff;
	border-radius:5px
}
.system
{
	font-size:12px;
	background-color:#911;
	color:#fff;
	border-radius:5px
}

P.S. Я в вёрстке не силён, поэтому буду благодарен за помощь.
edevyatkin
10 лет, 1 месяц назад
Темы: 0
Сообщения: 13
Участник с: 16 июля 2012
Попробуйте убрать справа отступ у .post1 и .post2.
Вместо
margin: 2px;
написать
margin: 2px 0px 2px 2px;
А еще лучше сделать #main немного пошире или #auth чуть поуже. Пикселов на 10.
Они просто рядышком не влезают, поэтому “Привет, гость” и лепится ниже.
salatovij
10 лет, 1 месяц назад
Темы: 20
Сообщения: 87
Участник с: 16 июля 2012
edevyatkin
Попробуйте убрать справа отступ у .post1 и .post2.
Вместо
margin: 2px;
написать
margin: 2px 0px 2px 2px;
А еще лучше сделать #main немного пошире или #auth чуть поуже. Пикселов на 10.
Они просто рядышком не влезают, поэтому “Привет, гость” и лепится ниже.
О, получилось, спасибо :)
А по поводу отступа что можете сказать?
 
Зарегистрироваться или войдите чтобы оставить сообщение.

© 2006-2022, Русскоязычное сообщество Arch Linux.
Название и логотип Arch Linux ™ являются признанными торговыми марками.
Linux ® — зарегистрированная торговая марка Linus Torvalds и LMI.