Blok Hizalama - R10.net

21-06-2010, 22:27:36

Şöyle bir HTML çıktım var:

<!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=utf-8" /> 
	<script type="text/javascript" language="javascript" src="jquery-1.4.2.min.js"></script> 
	<script type="text/javascript" language="javascript" src="jquery.countdown.js"></script> 
	<script type="text/javascript" language="javascript" src="ajax.js"></script> 
	<link type="text/css" rel="stylesheet" href="Themes/default/style.css" /> 
	<title>Başlık Yok</title> 
</head> 
 
<body> 
<div id="container"> 
	<div id="menu"> 
		<ul> 
			<li><a href="http://127.0.0.1:8080/blog/">Anasayfa</a></li> 
			<li class="active"><a href="http://127.0.0.1:8080/blog/?action=postarticle">Makale Gönder</a></li> 
			<li><a href="http://127.0.0.1:8080/blog/?action=logout">Çıkış Yap</a></li> 
		</ul> 
	</div> 
	<br /> 
	<div id="content"> 
		<form action="http://127.0.0.1:8080/blog/?action=postarticle2" method="post"> 
			<input type="text" name="title" style="width: 419px" /><br /> 
			<textarea name="body" rows="5" cols="50"></textarea><br /> 
			<select name="cat"> 
				<option value="1">Genel Kategori</option> 
			</select> 
			<input type="submit" value="yolla" /> 
		</form> 
	</div> 
	<div id="footer">Blog Sistemi &copy; 2010, Hakan Aktaş</div> 
	<div id="right-panel"> 
		<h4 class="title">Son 10 Yorum <a style="float: right;" onClick="javascript: ajax_reload('last-comments.source.php', '#last-comments');"><img src="Themes/default/images/arrow_refresh.png" width="12px" height="12px" /></a></h4> 
		<div class="content" id="last-comments"> 
			<ul> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-14">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-13">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-12">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-11">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-10">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-9">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-8">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-7">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=3#comment-6">3. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-5">2. Yazı</a> (Hakan)</li> 
			</ul> 
		</div> 
		<h4 class="title">Son 10 Üye <a style="float: right;" onClick="javascript: ajax_reload('last-members.source.php', '#last-members');"><img src="Themes/default/images/arrow_refresh.png" width="12px" height="12px" /></a></h4> 
		<div class="content" id="last-members"> 
			<ul> 
				<li><a href="http://127.0.0.1:8080/blog/?action=member&id=1">Hakan</a></li> 
			</ul> 
		</div> 
	</div> 
</div> 
</body> 
</html>

CSS de böyle:

body
{
	font-family: Verdana, Sans Serif;
	font-size: 9pt;
	padding: 10px 0;
}

a
{
	outline: none;
	color: #ddd;
	text-decoration: none;
}

img
{
	border: 0;
}

code
{
	display: block;
	border: 1px #666 solid;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	padding: 5px;
}

.imglink
{
	display:inline;
	padding-top: 3px;
	background: url(images/arrow_refresh.png) center center no-repeat;
	width: 16px;
	height: 16px;
}

#container
{
	width: 980px;
	margin: 0 auto;
}

#menu ul
{
	padding: 0;
}

#menu ul li
{
	display: inline;
}

#menu ul li a
{
	text-decoration: none;
	color: white;
	padding: 10.5px 11px;
	background-color: #444;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#menu ul li.active a
{
	background-color: #666;
}

#menu ul li a:hover
{
	background-color: #222;
}

#content
{
	float: left;
	width: 720px;
}

#content h2
{
	font-size: 14pt;
	font-weight: bold;
	color: #ddd;
	margin-top: 0;
	padding: 15px;
	background-color: #666;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#content h2 span
{
	padding-top: 3px;
	float: right;
	font-size: 12pt;
}

#linktree, #linktree ul
{
	padding: 0;
	margin: 0;
}

#linktree ul li
{
	display: inline;
}

#linktree ul li a, #linktree ul li a:visited
{
	color: #000;
	text-decoration: none;
}

#linktree ul li a:hover, #linktree ul li a:visited:hover
{
	color: #000;
	text-decoration: none;
	text-shadow: #f00 0 1px 2px;
}

hr.article
{
	border: 1px #ddd solid;
	color: #ddd;
}

.article h3
{
	color: #000;
	padding: 4px 10px;
	margin-bottom: 0;
	background-color: #ddd;
	width: auto;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.article h3 a
{
	color: #000;
	text-decoration: none;
}

.article h3 a:hover
{
	color: #f00;
	text-decoration: none;
}

.article h3 a:visited
{
	color: #000;
	text-decoration: none;
}

.article h3 a:visited:hover
{
	color: #f00;
	text-decoration: none;
}

.article .body
{
	padding-top: 10px;
	padding: 14px;
}

.article div.info
{
	padding: 0;
	margin: 0;
	font-size: 8pt;
	color: #ddd;
}

.article .comments
{
	padding-top: 15px;
}

.article .comments .comment
{
	margin-top: 5px;
	padding: 5px;
	border: 1px #bbb solid;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

.article .comments .comment .body
{
	overflow: auto;
	font-size: 9pt;
}

.article .comments .comment .info
{
	color: #ddd;
}

#right-panel
{
	width: 230px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
	float: right;
	text-align: left;
	background-color: #ddd;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

#right-panel h4.title
{
	background-color: #666;
	color: #ddd;
	padding: 5px;
	-moz-border-radius-topleft: 5px;
	-webkit-border-radius-topleft: 5px;
	border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
	-webkit-border-radius-topright: 5px;
	border-radius-topright: 5px;
}

#right-panel div.content
{
	margin: 0;
	margin-top: -18px;
	padding: 0;
	border: 2px #666 solid;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-radius-bottomleft: 5px;
	border-radius-bottomleft: 5px;
	-moz-border-radius-bottomright: 5px;
	-webkit-border-radius-bottomright: 5px;
	border-radius-bottomright: 5px;
}

#right-panel div.content ul
{
	padding: 5px 5px;
	margin: 0;
}

#right-panel div.content ul li
{
	list-style-type: none;
	background: url(images/arrow_right.png) left center no-repeat;
	padding-left: 20px;
}

#right-panel div.content ul li a, #right-panel div.content ul li a:visited
{
	color: #333;
	text-decoration: none;
}

#footer
{
	float: left;
	width: 980px;
	margin-top: 10px;
	padding: 15px;
	background-color: #666;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	font-weight: bold;
	color: #ddd;
}

Görüntü böyle: http://i45.tinypic.com/2wftljp.jpg

Sorunumsa şu: CSS'de #right-panel'a position: absolute yazmadan menüyü olması gereken yere, yani ekran görüntüsünde durduğu yerin en üstüne alamadım bir türlü. Neden position: absolute kullanmıyorsun derseniz, ekran görüntüsünde form olan #content kısmında 1-2 satırlık yazı olduğunda #footer ve #right-panel birbirine giriyor hemen.

22-06-2010, 04:05:53

#2

mystec

Kısa cevap: position atamadan imkansız bu istediğin. Kendine işkence etme
22-06-2010, 08:58:03

#3

justices

soruyu doğru anladımmı bilmiyorum ama footer divini alta alırsan footer olması gerektiği yerde yani en altta olur, şuan için sağda altta kalan zımbırtıda formun sağına yerleşir.
22-06-2010, 13:37:07

#4

Hkan

@Justices; yerleşmiyor hocam, çok denedim.

@mystec; (örnek olarak freewebtemplates.com'daki tasarımlardan bir kaçını inceledim. Hiçbirinde position kullanılmamış sağ blok için. Ancak onlar olması gereken yerde. :\

22-06-2010, 14:23:37

justices

<body> 
<div id="container"> 
	<div id="menu"> 
		<ul> 
			<li><a href="http://127.0.0.1:8080/blog/">Anasayfa</a></li> 
			<li class="active"><a href="http://127.0.0.1:8080/blog/?action=postarticle">Makale Gönder</a></li> 
			<li><a href="http://127.0.0.1:8080/blog/?action=logout">Çıkış Yap</a></li> 
		</ul> 
	</div> 
	<br /> 
	<div id="content"> 
		<form action="http://127.0.0.1:8080/blog/?action=postarticle2" method="post"> 
			<input type="text" name="title" style="width: 419px" /><br /> 
			<textarea name="body" rows="5" cols="50"></textarea><br /> 
			<select name="cat"> 
				<option value="1">Genel Kategori</option> 
			</select> 
			<input type="submit" value="yolla" /> 
		</form> 
	</div> 

	<div id="right-panel"> 
		<h4 class="title">Son 10 Yorum <a style="float: right;" onClick="javascript: ajax_reload('last-comments.source.php', 

'#last-comments');"><img src="Themes/default/images/arrow_refresh.png" width="12px" height="12px" /></a></h4> 
		<div class="content" id="last-comments"> 
			<ul> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-14">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-13">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-12">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-11">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-10">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-9">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-8">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-7">2. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=3#comment-6">3. Yazı</a> (Hakan)</li> 
				<li><a href="http://127.0.0.1:8080/blog/?action=article&id=2#comment-5">2. Yazı</a> (Hakan)</li> 
			</ul> 
		</div> 
		<h4 class="title">Son 10 Üye <a style="float: right;" onClick="javascript: ajax_reload('last-members.source.php', 

'#last-members');"><img src="Themes/default/images/arrow_refresh.png" width="12px" height="12px" /></a></h4> 
		<div class="content" id="last-members"> 
			<ul> 
				<li><a href="http://127.0.0.1:8080/blog/?action=member&id=1">Hakan</a></li> 
			</ul> 
		</div> 
	</div> 
	<div id="footer">Blog Sistemi &copy; 2010, Hakan Aktaş</div> 
</div> 
</body>

bu şekilde olmasını kastetmiştim, bişeyin birbirine gireceğini zannetmiyorum böyleyken

22-06-2010, 14:26:57

#6

Hkan

Kodları PHP'den çıkarıp saf HTML haliyle uğraştım biraz. #Footer'ı alta alıp CSS'de position'ı kaldırıp birkaç margin oynaması yapınca oldu. Teşekkürler Justices ve mystec.