xhtml & css : bu kadar mı?

oxigen · 07.02.2008

arkadaşlar belki hatırlarsınız, http://forum.zoque.net/tasarim-asama...e-eskisehir-v2 adreste AEGEE-Eskişehir 'in yeni websitesinin taslak tasarımı vardı.
Tasarım son halini aldı ve ben artık HTML-ASP kodlamasına geçmek istiyorum.
XHTML-CSS yapmak istiyorum, önceden CSS 'yi sadece stil vermek için kullanıyordum (editörlerde hazırlıyorum), şimdi biraz kafam karıştı, araştırma yaptım ama emin olmak istiyorum...
XHTML - CSS olarak hazırladığımızda kodlar bu şekilde tamamı ? sanki birşeyler yanlışmış yada eksikmiş gibi geliyor

, sanırım tablolarda oluşan fazla kodlar olmadığı için öyle düşünüyorum

HTML Code:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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" />
<title>AEGEE-Eskişehir / Anadolu Üniversitesi Avrupa Öğrencileri Forumu Kulübü</title>
<link rel="stylesheet" type="text/CSS" href="assets/CSS/style_1.CSS">
</head>

<body>
<div id="container">
      <div id="menu"></div>
      <div id="mesaj"></div>
</div>
</body>
</HTML>

Kod:

@charset "utf-8";
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	background-color: #64BE48;
	background-image: url(../images/style_1/back_main.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	margin-top: 0px;
	margin-left: 0px;
}
#container {
	float: left;
	height: 640px;
	width: 100%;
	margin-top: 0px;
	margin-left: 0px;
}

#menu {
	font-size: 10pt;
	font-style: normal;
	font-weight: bold;
	background-image: url(../images/style_1/back_menu.jpg);
	height: 290px;
	width: 194px;
	background-repeat: no-repeat;
	margin-top: 106px;
	margin-left: 19px;
	float: left;

}

#mesaj {
	background-image: url(../images/style_1/back_mesaj.jpg);
	background-repeat: no-repeat;
	height: 215px;
	width: 194px;
	margin-top: 407px;
	margin-left: 19px;

}

tasarımda Dreamweaver kullanıyorum, dolayısıyla CSS kodlarını kendisi hazırlıyor ve DIVlere uyguluyor.
Buarada menu ve mesaj isimli divlerde position:absolute olayını yapmasamda yerlerini belirttiğim için sabit kalıyor, kullanmama gerek var mı? bu divlerin 1px. bile şaşmaması lazım, çünkü tasarımda görmüş olduğunuz gibi panelleri şeffaf olarak tasarladım ve background ile birleşik bir hal aldı, o nedenle kayması durumunda tüm tasarım karmaşık bir hal alır...

bgul · 07.02.2008

xhtml icin Google'da verification linki aratirsan cikar eminim. O sekilde emin olabilirsin ki muhtemelen sorun cikmayacaktir.

div'lerin oynama konusunda da herhangi bir sorun olacagini sanmiyorum zira sol ust koseye sabitlemissin.

covani · 07.02.2008

Selam,

XHTML ve CSS 2.0'da en çok üzerinde durulan özellik position herhalde.Bu konuda bana en çok yardımcı olan kaynağı paylaşmak istiyorum:

http://www.barelyfitz.com/screencast...s/positioning/

10 adımda "position:static, position:relative, position:absolute, and float." özelliklerini anlatmaya çalışıyor.
İngilizce bilmeyenlerin de rahatlıkla anlayabileceği bir şekilde anlatılmış.
Faydası olacağını düşünüyorum.

İyi çalışmalar.

>>Buarada menu ve mesaj isimli divlerde position:absolute olayını yapmasamda yerlerini belirttiğim için sabit kalıyor, kullanmama gerek var mı?
menu ve mesaj divlerini kapsayan (container) div'de relative özelliği kullanılmadığı için absolute kullanılmasına gerek yok.

oxigen · 08.02.2008

Kod:

<link rel="stylesheet" type="text/CSS" href="assets/CSS/style_1.CSS">

satırının sonunda / eklediğimde valid olarak gösteriyor, öteki türlü hata veriyor

zaten şuanda başka kod olmadığı için sorun yok.

metsatöll · 08.02.2008

CSS dosyanizdaki kodlarinizi daha da azaltmaniz mümkün. CSS Shorthand rules

oxigen · 08.02.2008

Alıntı:

metsatöll tarafından gönderilen mesaj:

CSS dosyanizdaki kodlarinizi daha da azaltmaniz mümkün. CSS Shorthand rules

teşekkür ederim.

temmuzss · 09.02.2008

birkaç fikir de benden olsun.

şeffaf panellerinizi png ile yapabilirsiniziz. exporer için png destekleme kodları var. hem ilerde yerlerini değiştirmek, sığmayan içerik için uzatıp, çekmek kolay olur.

ya da isterseniz şeffaf panelleri flash ile yaparsınız!!! dosya boyutunda mükemmel bir avantaj sağlar. tek yapmanız gereken trasparan flashınızın üzerine div katman ile yazılarınızı yazmak. internette örneği olmasa da ben sıkça kullanırım. işe yarar emin olun.

kolay gelsin.

oxigen · 10.02.2008

Alıntı:

temmuzss tarafından gönderilen mesaj:

birkaç fikir de benden olsun.

şeffaf panellerinizi png ile yapabilirsiniziz. exporer için png destekleme kodları var. hem ilerde yerlerini değiştirmek, sığmayan içerik için uzatıp, çekmek kolay olur.

ya da isterseniz şeffaf panelleri flash ile yaparsınız!!! dosya boyutunda mükemmel bir avantaj sağlar. tek yapmanız gereken trasparan flashınızın üzerine div katman ile yazılarınızı yazmak. internette örneği olmasa da ben sıkça kullanırım. işe yarar emin olun.

kolay gelsin.

teşekkür ederim, hem sana hemde fikirlerini paylaşan diğer arkadaşlara.
fakat şöyle bir durum var, paneller tam olarak şeffaf değil aslında, beyazdan maviye yada beyazdan yeşile bir geçiş var panellerde.
içerik taşma olayı sanırım menüde meydana gelebilir ilerleyen zamanlarda ama onada bi çözüm bulmaya çalışıcam.

buarada sormak istediğim başka bir konu, aslında bunu Dreamweaver kullanırken gördüm (daha önce frontpage vb. kullanıyordum), harici CSS dosyasını

Kod:

<link rel="stylesheet" type="text/CSS" href="assets/CSS/style_1.CSS">

şeklinde eklemekle

Kod:

<style type="text/CSS" media="screen">
<!--
@import url("assets/CSS/style_1.CSS");
-->
</style>

bu şekilde import etmenin bir farkı varmı işleyiş açısından?

bgul · 10.02.2008

Soyle ki, farkli kullanicilara farkli CSS uygulamasi gerekirse o yolla istedigini sectirebilirsin.
Misal kullanicilarin gordukleriyle admin'lerin dikkat ettikleri seyler farklidir. Ben admin'lerin sorunlu mesajlari kirmizi gormesini istiyorum dersen, onlar icin theme_2.CSS hazirlarsin, farkli gorurler.
Ayrica bu farkli tema isteyen kullanicilar icin de gecerli.

oxigen · 10.02.2008

Alıntı:

bgul tarafından gönderilen mesaj:

Soyle ki, farkli kullanicilara farkli CSS uygulamasi gerekirse o yolla istedigini sectirebilirsin.
Misal kullanicilarin gordukleriyle admin'lerin dikkat ettikleri seyler farklidir. Ben admin'lerin sorunlu mesajlari kirmizi gormesini istiyorum dersen, onlar icin theme_2.CSS hazirlarsin, farkli gorurler.
Ayrica bu farkli tema isteyen kullanicilar icin de gecerli.

bu dediklerini

Kod:

<link rel="stylesheet" type="text/CSS" href="assets/CSS/style_1.CSS">

kodunu kullanarak, döngü içinde de yapmak mümkün aslında, yani ben genelde bu şekilde kullanıyordum. dediğim gibi @import olayını yeni keşfettim

07.02.2008	#1 (permalink)
oxigen Üyelik Tarihi: 21.08.2004 Yer: istanbul, eskişehir Yaş: 25 Mesaj: 361	xhtml & css : bu kadar mı? arkadaşlar belki hatırlarsınız, http://forum.zoque.net/tasarim-asama...e-eskisehir-v2 adreste AEGEE-Eskişehir 'in yeni websitesinin taslak tasarımı vardı. Tasarım son halini aldı ve ben artık HTML-ASP kodlamasına geçmek istiyorum. XHTML-CSS yapmak istiyorum, önceden CSS 'yi sadece stil vermek için kullanıyordum (editörlerde hazırlıyorum), şimdi biraz kafam karıştı, araştırma yaptım ama emin olmak istiyorum... XHTML - CSS olarak hazırladığımızda kodlar bu şekilde tamamı ? sanki birşeyler yanlışmış yada eksikmiş gibi geliyor , sanırım tablolarda oluşan fazla kodlar olmadığı için öyle düşünüyorum HTML Code: <%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%> <!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" /> <title>AEGEE-Eskişehir / Anadolu Üniversitesi Avrupa Öğrencileri Forumu Kulübü</title> <link rel="stylesheet" type="text/CSS" href="assets/CSS/style_1.CSS"> </head> <body> <div id="container"> <div id="menu"></div> <div id="mesaj"></div> </div> </body> </HTML> Kod: @charset "utf-8"; body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; background-color: #64BE48; background-image: url(../images/style_1/back_main.jpg); background-repeat: no-repeat; background-position: left top; margin-top: 0px; margin-left: 0px; } #container { float: left; height: 640px; width: 100%; margin-top: 0px; margin-left: 0px; } #menu { font-size: 10pt; font-style: normal; font-weight: bold; background-image: url(../images/style_1/back_menu.jpg); height: 290px; width: 194px; background-repeat: no-repeat; margin-top: 106px; margin-left: 19px; float: left; } #mesaj { background-image: url(../images/style_1/back_mesaj.jpg); background-repeat: no-repeat; height: 215px; width: 194px; margin-top: 407px; margin-left: 19px; } tasarımda Dreamweaver kullanıyorum, dolayısıyla CSS kodlarını kendisi hazırlıyor ve DIVlere uyguluyor. Buarada menu ve mesaj isimli divlerde position:absolute olayını yapmasamda yerlerini belirttiğim için sabit kalıyor, kullanmama gerek var mı? bu divlerin 1px. bile şaşmaması lazım, çünkü tasarımda görmüş olduğunuz gibi panelleri şeffaf olarak tasarladım ve background ile birleşik bir hal aldı, o nedenle kayması durumunda tüm tasarım karmaşık bir hal alır... __________________ your KEY to EUROPE : AEGEE-Eskişehir (v2.0) \| MCPD adayı

07.02.2008	#2 (permalink)
bgul Üyelik Tarihi: 06.07.2006 Yer: İstanbul Yaş: 22 Mesaj: 199	Re: xhtml & css : bu kadar mı? xhtml icin Google'da verification linki aratirsan cikar eminim. O sekilde emin olabilirsin ki muhtemelen sorun cikmayacaktir. div'lerin oynama konusunda da herhangi bir sorun olacagini sanmiyorum zira sol ust koseye sabitlemissin.

07.02.2008	#3 (permalink)
covani Üyelik Tarihi: 06.02.2008 Yer: Istanbul Yaş: 31 Mesaj: 2	Re: xhtml & css : bu kadar mı? Selam, XHTML ve CSS 2.0'da en çok üzerinde durulan özellik position herhalde.Bu konuda bana en çok yardımcı olan kaynağı paylaşmak istiyorum: http://www.barelyfitz.com/screencast...s/positioning/ 10 adımda "position:static, position:relative, position:absolute, and float." özelliklerini anlatmaya çalışıyor. İngilizce bilmeyenlerin de rahatlıkla anlayabileceği bir şekilde anlatılmış. Faydası olacağını düşünüyorum. İyi çalışmalar. >>Buarada menu ve mesaj isimli divlerde position:absolute olayını yapmasamda yerlerini belirttiğim için sabit kalıyor, kullanmama gerek var mı? menu ve mesaj divlerini kapsayan (container) div'de relative özelliği kullanılmadığı için absolute kullanılmasına gerek yok.

08.02.2008	#4 (permalink)
oxigen Üyelik Tarihi: 21.08.2004 Yer: istanbul, eskişehir Yaş: 25 Mesaj: 361	Re: xhtml & css : bu kadar mı? Kod: <link rel="stylesheet" type="text/CSS" href="assets/CSS/style_1.CSS"> satırının sonunda / eklediğimde valid olarak gösteriyor, öteki türlü hata veriyor zaten şuanda başka kod olmadığı için sorun yok. __________________ your KEY to EUROPE : AEGEE-Eskişehir (v2.0) \| MCPD adayı

08.02.2008	#5 (permalink)
metsatöll Üyelik Tarihi: 11.07.2001 Yer: Tallinn Yaş: 27 Mesaj: 504 Görsel: 9	Re: xhtml & css : bu kadar mı? CSS dosyanizdaki kodlarinizi daha da azaltmaniz mümkün. CSS Shorthand rules __________________ Gabfire - Talkntravel

09.02.2008	#7 (permalink)
temmuzss Üyelik Tarihi: 12.04.2007 Yer: İstanbul Mesaj: 37	Re: xhtml & css : bu kadar mı? birkaç fikir de benden olsun. şeffaf panellerinizi png ile yapabilirsiniziz. exporer için png destekleme kodları var. hem ilerde yerlerini değiştirmek, sığmayan içerik için uzatıp, çekmek kolay olur. ya da isterseniz şeffaf panelleri flash ile yaparsınız!!! dosya boyutunda mükemmel bir avantaj sağlar. tek yapmanız gereken trasparan flashınızın üzerine div katman ile yazılarınızı yazmak. internette örneği olmasa da ben sıkça kullanırım. işe yarar emin olun. kolay gelsin. __________________ karada kürek çekmek olmaz, denizde kürek bırakmak. web tasarimi

10.02.2008	#9 (permalink)
bgul Üyelik Tarihi: 06.07.2006 Yer: İstanbul Yaş: 22 Mesaj: 199	Re: xhtml & css : bu kadar mı? Soyle ki, farkli kullanicilara farkli CSS uygulamasi gerekirse o yolla istedigini sectirebilirsin. Misal kullanicilarin gordukleriyle admin'lerin dikkat ettikleri seyler farklidir. Ben admin'lerin sorunlu mesajlari kirmizi gormesini istiyorum dersen, onlar icin theme_2.CSS hazirlarsin, farkli gorurler. Ayrica bu farkli tema isteyen kullanicilar icin de gecerli.