CSS float - clear yardımı. Sayfa barı en altta kalıyor :(

s5prin · 07.01.2007

İyi sabahlar;

Yaklaşık 2 gündür aralıksız uğraşıyorum. Almak istediğim görüntü çok basit gibi gözüküyor;
content.gif

Ama gel gelelim iş CSS tasarımına gelince bizim "sayfa 1..2" navigation barımız sayfanın en altına oturup duruyor. clear tag'larından tutunda display=block, relative, absolute hepsini hatim ettim ama temiz ve istediğim görüntüyü elde eden bir CSS tasarımı yapamadım efendim.

#content div'inin dışarısına çıkarınca bütün elementleri muhtemelen olur ama sayfada başka bölümler de olduğundan (header, footer vs) o gördüğünüz pencereler ve nav bar'ın tek bir div içerisinde kalması gerekiyor, yoksa bütün içerik karışıyor. Ayrıca pencere sayılarının değişken olduğunu söylememe gerek yok sanırım.

Buyrun bu da hazır HTML vs CSS kodu:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
<title>Untitled Document</title>
<style type="text/CSS">
<!--
#leftcol {
	float: left;
	width: 12em;
	background-color: #CCCCCC;
	height: 100em;
}
#content {
	margin-left: 12.5em;
	border: 1px solid #FF9900;
}
.window {
	float: left;
	height: 10em;
	width: 23%;
	margin-right: 1.5%;
	margin-bottom: 20px;
	background-color: #0099FF;
}
#nav {
	text-align: center;
	clear: both;
	background-color: #00CC00;
	display: block;
}
-->
</style>
</head>

<body>
<div id="leftcol">sol kolon </div>
<div id="content">
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div id="nav">sayfa 1 2 3 vs </div>
</div>
</body>
</HTML>

Yardım edecek, en azından fikir yürütecek arkadaşlara minnettar olurum.

klarkkent · 07.01.2007

Bence aynı div içinde hem contenti hem de navbarı kullanmak yerine navbarın yerini deiştrebilirsin.

biraz garip olucak ama navbarı footer areanın headeri olarak atarsan en alta oturması lazım. tabi görünümü biraz garip olucak

ne garip cümle ya.. pardon

s5prin · 07.01.2007

Yanlış anlaşıldım galiba verdiğim HTML-CSS kodlarında zaten en alta oturuyor, benim istediğim şey resmini verdiğim gibi bir görüntü, yani ürünlerin bitiminden hemen sonra nav bar.

Bu arada o resim şu anki sayfanın görünümü değil, ne istediğimi anlatmak amacıyla Photoshop'ta çizdiğim resim

Yine de teşekkürler.

metsatöll · 07.01.2007

Istedigin sonucu elde eden kod asagida. Rastgele genislik degerleri atadim, sen istedigin degerleri atayarak istedigin sekilde degistirebilirsin. Content kutucugunun bir width degeri olmasi gerekmekte, aksi halde tasarim firefoxta dagiliyor.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
<title>Untitled Document</title>
<style type="text/CSS">
<!--

#leftcol {
	float: left;
	width: 12em;
	background-color: #CCCCCC;
	height: 100em;
}
#content {
        padding: .5em;
        width: 48em;
        float:left;
	border: 1px solid #FF9900;
}
.window {
	float:left;
	height: 10em;
	width: 10em;
	margin-right: 1em;
	margin-bottom: 20px;
	background-color: #0099FF;
}
#nav {
	text-align: center;
	clear: both;
	background-color: #00CC00;
	display: block;
}
-->
</style>
</head>

<body>

<div id="leftcol">sol kolon </div>
<div id="content">
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
  <div class="window">pencere</div>
 <div id="nav">sayfa 1 2 3 vs </div>
</div>

</body>
</HTML>

Update; Fazladan bir wrap kodu eklemisim, düzelltim.

s5prin · 07.01.2007

#content kısmını dinamik genişlikte yapmak için veridiğin kodlarla biraz uğraştıktan sonra (birkaç saat) uluslararası bir css grubuna mail attım. Elemanın biri halen daha mantığını kavrayamadığım bir şekilde çözmüş olayı:

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
<title>Untitled Document</title>

<style type="text/CSS">
<!--
#leftcol {
	float: left;
	width: 12em;
	background-color: #CCCCCC;
	height: 100em;
	margin-right: .5em;
}
#content {
	border: 1px solid #FF9900;
	height: 1%;
	overflow: hidden;
}

* HTML #content {
  overflow: visible;
}

.window {
	float: left;
	height: 10em;
	width: 23%;
	margin-right: 1.2%;
	margin-bottom: 20px;
	background-color: #0099FF;
}
#nav {
	text-align: center;
	clear: both;
	background-color: #00CC00;
	display: block;
}
-->
</style>
</head>

<body>
<div id="leftcol">left col </div>
<div id="content">
  <div class="window">window</div>
  <div class="window">window</div>
  <div class="window">window</div>
  <div class="window">window</div>
  <div class="window">window</div>
  <div class="window">window</div>
  <div id="nav">page 1 2 3 etc </div>
</div>
</body>
</HTML>

Tekrar tekrar teşekkür ederim.

gameover · 08.01.2007

Merhaba,

Ayrıca sayfalarınızı default olarak artık; HTML 4.0 yerine, XHTML 1.0 olarak çalışmak da çoğu anlamsız görünen sorunun çözülmesine yardımcı olacaktır.

JavaScript yorumundan CSS yorumuna kadar oldukça farklılık gösteriyor.

s5prin · 08.01.2007

Yukarıda ki şablon'u gelişi güzel hazırlamıştım, genelde XHTML 1.0 STRICT kullanıyorum.
Uyarı için teşekkürler.

s5prin · 15.01.2007

Benzer bir soru ;

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<head>
<meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9">
<title>Untitled Document</title>

<style type="text/CSS">
<!--
#middle {
	width: 768px;
	margin-right: auto;
	margin-left: auto;
}
#leftcol {
	float: left;
	width: 12em;
	background-color: #CCCCCC;
	height: 100em;
	margin-right: 0.5em;
}
#content {
	border: 1px solid #FF9900;
	height: 1%;
	overflow: hidden;
}

* HTML #content {
  overflow: visible;
}

.window {
	float: left;
	height: 10em;
	width: 10em;
	margin-right: 1em;
	margin-bottom: 20px;
	background-color: #0099FF;
}
#nav {
	text-align: right;
	background-color: #00CC00;
	height: 10em;
}
-->
</style>
</head>

<body>
<div id="middle">
  <div id="leftcol">left col </div>
  <div id="content">
    <div class="window">window</div>
    <div class="window">window</div>
    <div class="window">window</div>
    <div class="window">window</div>
    <div id="nav">ekstra hoooooo </div>
  </div>
</div>
</body>
</HTML>

.window sayısı değişken, #ekstra kısmının IE'deki gibi gözükmesine uğraşıyorum yani son window'dan kalan yere sağ tarafa kaplayacak şekilde. Eğer tüm satır window'la dolmuşsa (3'ün katı) aşağıya itelemesi ve tam satır göstermesi lazım doğal olarak. (İlk defa Explorer bir şeyi istediğim gibi görüntülüyor bu arada)

Yanlış anlaşılmasın tasarım kararsızlığından değil, farklı sayfalar üzerinde çalışıyorum. Şimdiden teşekkürler.

ie 6, ff 1.5, opera 9.

07.01.2007	#1 (permalink)
s5prin Üyelik Tarihi: 16.12.2006 Yer: istanbul Yaş: 26 Mesaj: 464	CSS float - clear yardımı. Sayfa barı en altta kalıyor :( İyi sabahlar; Yaklaşık 2 gündür aralıksız uğraşıyorum. Almak istediğim görüntü çok basit gibi gözüküyor; content.gif Ama gel gelelim iş CSS tasarımına gelince bizim "sayfa 1..2" navigation barımız sayfanın en altına oturup duruyor. clear tag'larından tutunda display=block, relative, absolute hepsini hatim ettim ama temiz ve istediğim görüntüyü elde eden bir CSS tasarımı yapamadım efendim. #content div'inin dışarısına çıkarınca bütün elementleri muhtemelen olur ama sayfada başka bölümler de olduğundan (header, footer vs) o gördüğünüz pencereler ve nav bar'ın tek bir div içerisinde kalması gerekiyor, yoksa bütün içerik karışıyor. Ayrıca pencere sayılarının değişken olduğunu söylememe gerek yok sanırım. Buyrun bu da hazır HTML vs CSS kodu: HTML Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <head> <meta http-equiv="Content-Type" content="text/HTML; charset=iso-8859-9"> <title>Untitled Document</title> <style type="text/CSS"> <!-- #leftcol { float: left; width: 12em; background-color: #CCCCCC; height: 100em; } #content { margin-left: 12.5em; border: 1px solid #FF9900; } .window { float: left; height: 10em; width: 23%; margin-right: 1.5%; margin-bottom: 20px; background-color: #0099FF; } #nav { text-align: center; clear: both; background-color: #00CC00; display: block; } --> </style> </head> <body> <div id="leftcol">sol kolon </div> <div id="content"> <div class="window">pencere</div> <div class="window">pencere</div> <div class="window">pencere</div> <div class="window">pencere</div> <div class="window">pencere</div> <div class="window">pencere</div> <div id="nav">sayfa 1 2 3 vs </div> </div> </body> </HTML> Yardım edecek, en azından fikir yürütecek arkadaşlara minnettar olurum. __________________ imzaya sponsor

07.01.2007	#2 (permalink)
klarkkent Üyelik Tarihi: 06.01.2007 Yer: ankara Yaş: 29 Mesaj: 2	Re: CSS float - clear yardımı. Sayfa barı en altta kalıyor :( Bence aynı div içinde hem contenti hem de navbarı kullanmak yerine navbarın yerini deiştrebilirsin. biraz garip olucak ama navbarı footer areanın headeri olarak atarsan en alta oturması lazım. tabi görünümü biraz garip olucak ne garip cümle ya.. pardon

07.01.2007	#3 (permalink)
s5prin Üyelik Tarihi: 16.12.2006 Yer: istanbul Yaş: 26 Mesaj: 464	Re: CSS float - clear yardımı. Sayfa barı en altta kalıyor :( Yanlış anlaşıldım galiba verdiğim HTML-CSS kodlarında zaten en alta oturuyor, benim istediğim şey resmini verdiğim gibi bir görüntü, yani ürünlerin bitiminden hemen sonra nav bar. Bu arada o resim şu anki sayfanın görünümü değil, ne istediğimi anlatmak amacıyla Photoshop'ta çizdiğim resim Yine de teşekkürler. __________________ imzaya sponsor

08.01.2007	#6 (permalink)
gameover Üyelik Tarihi: 24.07.2001 Yer: Istanbul Yaş: 25 Mesaj: 797	Re: CSS float - clear yardımı. Sayfa barı en altta kalıyor :( Merhaba, Ayrıca sayfalarınızı default olarak artık; HTML 4.0 yerine, XHTML 1.0 olarak çalışmak da çoğu anlamsız görünen sorunun çözülmesine yardımcı olacaktır. JavaScript yorumundan CSS yorumuna kadar oldukça farklılık gösteriyor. __________________ ♥ SiberKültür.com, css'in hastası, web'in ustasıyız

08.01.2007	#7 (permalink)
s5prin Üyelik Tarihi: 16.12.2006 Yer: istanbul Yaş: 26 Mesaj: 464	Re: CSS float - clear yardımı. Sayfa barı en altta kalıyor :( Yukarıda ki şablon'u gelişi güzel hazırlamıştım, genelde XHTML 1.0 STRICT kullanıyorum. Uyarı için teşekkürler. __________________ imzaya sponsor