Css Menü Ortalama?

taraftar13 · January 7, 2013

Arkadaşlar sitemin psd dosyasını photoshop ile css kodu haline getirdim. Fakat menü sola dayalı bir şekilde duruyor bunu nasıl ortalarız. Yalnız her çözünürlükte otomatik ortalanmasını istiyorum. Örnek 1920x1080 çözünürükte bir bilgisayarda ortada görünüyor ise 1366x768 çözünürlükte bir bilgisayarda da ortalanmış olması lazım. Lütfen anlayan biri varsa yardım etsin.

Menü kodum aşağıdaki gibi

<a name="top" id="top"></a>
	<div id="shadow">
		<div id="container">
			<h1><span class="invisible">{$mybb->settings['bbname']}</span></h1>
<center>
<html>
<head>
<title>WarFace_Online_Header</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!-- Save for Web Styles (WarFace_Online_Header.psd) -->
<style type="text/css">
<!--

div.Tablo_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1268px;
	height:109px;
}

div.wfonline-01 {
	position:absolute;
	left:0px;
	top:0px;
	width:477px;
	height:55px;
}

div.wfonline-02 {
	position:absolute;
	left:477px;
	top:0px;
	width:313px;
	height:109px;
}

div.wfonline-03 {
	position:absolute;
	left:790px;
	top:0px;
	width:478px;
	height:55px;
}

div.wfonline-04 {
	position:absolute;
	left:0px;
	top:55px;
	width:175px;
	height:54px;
}

div.wfonline-05 {
	position:absolute;
	left:175px;
	top:55px;
	width:77px;
	height:54px;
}

div.wfonline-06 {
	position:absolute;
	left:252px;
	top:55px;
	width:26px;
	height:54px;
}

div.wfonline-07 {
	position:absolute;
	left:278px;
	top:55px;
	width:83px;
	height:54px;
}

div.wfonline-08 {
	position:absolute;
	left:361px;
	top:55px;
	width:12px;
	height:54px;
}

div.wfonline-09 {
	position:absolute;
	left:373px;
	top:55px;
	width:104px;
	height:54px;
}

div.wfonline-10 {
	position:absolute;
	left:790px;
	top:55px;
	width:105px;
	height:54px;
}

div.wfonline-11 {
	position:absolute;
	left:895px;
	top:55px;
	width:113px;
	height:54px;
}

div.wfonline-12 {
	position:absolute;
	left:1008px;
	top:55px;
	width:80px;
	height:54px;
}

div.wfonline-13 {
	position:absolute;
	left:1088px;
	top:55px;
	width:180px;
	height:54px;
}

-->
</style>
<!-- End Save for Web Styles -->
</head>
<body style="background-color:#FFFFFF; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px;">
<!-- Save for Web Slices (WarFace_Online_Header.psd) -->
<div class="Tablo_01">
	<div class="wfonline-01">
		<img src="images/wfonline_01.png" width="477" height="55" alt="">
	</div>
	<div class="wfonline-02">
		<a href="index.php">
			<img src="images/wfonline_02.png" width="313" height="109" border="0" alt=""></a>
	</div>
	<div class="wfonline-03">
		<img src="images/wfonline_03.png" width="478" height="55" alt="">
	</div>
	<div class="wfonline-04">
		<img src="images/wfonline_04.png" width="175" height="54" alt="">
	</div>
	<div class="wfonline-05">
		<a href="index.php">
			<img src="images/wfonline_05.png" width="77" height="54" border="0" alt=""></a>
	</div>
	<div class="wfonline-06">
		<img src="images/wfonline_06.png" width="26" height="54" alt="">
	</div>
	<div class="wfonline-07">
		<a href="http://www.warfaceonline.com/forum/forumdisplay.php?fid=3">
			<img src="images/wfonline_07.png" width="83" height="54" border="0" alt=""></a>
	</div>
	<div class="wfonline-08">
		<img src="images/wfonline_08.png" width="12" height="54" alt="">
	</div>
	<div class="wfonline-09">
		<a href="memberlist.php">
			<img src="images/wfonline_09.png" width="104" height="54" border="0" alt=""></a>
	</div>
	<div class="wfonline-10">
		<a href="showteam.php">
			<img src="images/wfonline_10.png" width="105" height="54" border="0" alt=""></a>
	</div>
	<div class="wfonline-11">
		<a href="http://www.warfaceonline.com/forum/forumdisplay.php?fid=2">
			<img src="images/wfonline_11.png" width="113" height="54" border="0" alt=""></a>
	</div>
	<div class="wfonline-12">
		<a href="search.php">
			<img src="images/wfonline_12.png" width="80" height="54" border="0" alt=""></a>
	</div>
	<div class="wfonline-13">
		<img src="images/wfonline_13.png" width="180" height="54" alt="">
	</div>
</div>
<!-- End Save for Web Slices -->
</body>
</html>
</center>	
<br/>
		<div id="content">
			<hr class="hidden" />
			<div id="panel">
				{$welcomeblock}
			</div>
		<hr class="hidden" />
		<br class="clear" />
			{$pm_notice}
			{$bannedwarning}
			{$bbclosedwarning}
			{$unreadreports}
			{$pending_joinrequests}
			<navigation>		

</br>
<head>
<link rel="SHORTCUT ICON" href="images/favicon.ico">
</head>

Edited January 7, 2013 by KintaRo

carysma1 · January 7, 2013

menü eğer bir div içerisindeyse genişlik belirtip margin ile ortalayabilirsin. çözünürlük ne olursa olsun kendini ortalar.

örnek css:

div#menu { 

    width: 960px; 

    margin: 0 auto; 

}

Edited January 7, 2013 by carysma1

Lastman · January 7, 2013

kodları deniyorum 60sn de bir sayfa yenileniyor.öyle bişey niye yaptın ki? :)

div.Tablo_01 {
width:100%;
margin:0 auto;
}

taraftar13 · January 7, 2013

kodları deniyorum 60sn de bir sayfa yenileniyor.öyle bişey niye yaptın ki? :)
div.Tablo_01 {
width:100%;
margin:0 auto;
}

:D Valla çok aktif ya forum yeni yorum yazılınca genel bakış kısmı yenilensin diye.

Bu arada bende yaptığım çözümü yazayım diye konuya girdim sende mesaj atmışsın, seninkini deneyemeyceğim bunun yüzünden. Yinede uğraştığın için ilgilenip yorum attığın için teşekkürler.

    position:absolute;
   top:0;
    left:50%;
   width:1268px;
   height:109px;
    margin-left:-640px;
    z-index:100;
    vertical-align:top;

Böyle yaptım oldu. Her çözünürlükte ve sayfa penceresi falan daraltıldığında hep ortada kalıyor.

Edited January 7, 2013 by taraftar13

Sign In

Css Menü Ortalama?

Recommended Posts

taraftar13

Link to comment

Share on other sites

carysma1

Link to comment

Share on other sites

Lastman

Link to comment

Share on other sites

taraftar13

Link to comment

Share on other sites

Join the conversation

Recently Browsing 0 members

Browse

Activity