3mr3 » CSS http://www.3mr3.com Sanal Dünyamdaki Blog Wed, 08 Sep 2010 12:30:00 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Tasarım için Navbar Elementi Eklemek http://www.3mr3.com/tasarim-icin-navbar-elementi-eklemek/ http://www.3mr3.com/tasarim-icin-navbar-elementi-eklemek/#comments Fri, 06 Feb 2009 22:11:08 +0000 admin http://www.3mr3.com/?p=168 Önceki konumuzda CSS tasarımı ve Tipik Web Sayfa Yapısını işlemiştik. Bu sefer önceki konumuzdaki haritaya bakarak navbar kısmını açıklayacağız. Bunun için default.css ve index.php dosyamıza aşağıdaki kodlarımızı yapıştıralım;

1. İlk önce CSS dosyası, Yapmış olduğumuz CSS klasörün içine default.css dosyasını açıyoruz ve aşağıdakileri ekliyoruz;

/* ——————————
SAYFA YAPISI
——————————– */

/*
#container (sayfa yapımızın genişliği pixel olarak 780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, solve an issue with #container height */
in css 2 column layout.
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}

/* ——————————
SAYFA ELEMENTLERİ #NAVBAR
—————————— */
#navbar ul, #navbar ul li{padding:0; margin:0; list-style:none; float:left;}
#navbar a{color:#FFFFFF; font-weight:bold;}
#navbar a:hover{background:#777777;}
#navbar li a:link, #navbar li a:visited {background:#444444; text-decoration:none; height:24px; line-height:24px; display:inline; float:left; width:auto; padding:0px 10px;}

sonra dosyamızı kaydediyoruz.

2. Sonraki dosyamız index.php ve aşağıdaki gibi kodları ekleyip kaydediyoruz;

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio nal.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8″ />
<link href=“css/default.css” rel=“stylesheet” type=“text/css” />
<title>page title</title>
</head>

<body>
<div id=“container”>
<div id=“topbar”> …topbar content… </div>
<!– #navbar –>
<div id=“navbar”>
<ul>
<li><a href=“index.php?home”>Home</a></li>
<li><a href=“index.php?signup”>Signup</a></li>
<li><a href=“index.php?login”>Login</a></li>
<li><a href=“index.php?about”>About</a></li>
</ul>
</div>
<!– the main section where all pages will be loaded using URL variables and PHP include() function –>
<div id=“main”>
<div id=“column_left”>
<?php
//If is defined URL variable ‘signup’
if(isset($_GET['signup'])){
// include page signup
include(‘include/in-signup.php’);
//else if is defined URL variable ‘login’
} else if(isset($_GET['login'])){
// include page login
include(‘include/in-login.php’);
//else if is defined URL variable ‘about’
} else if(isset($_GET['about'])){
// include page ‘about’
include(‘include/in-about.php’);
// in all other cases include the home page
} else {
include(‘include/in-home.php’);
}
?>
</div>
<div id=“column_right”> …column right content… </div>
<!– this layer solve some issue about the css design, forced the #main layer height equal to height of two column layer (#columnt_left and #column_right) inside itself –>
<div class=“spacer”></div>
<!– close #main content –>
</div>
<!– close #container –>
</div>
</body>
</html>

Kaynak: http://woork.blogspot.com/2007/10/add-navbar-elements-to-defaultcss-file.html

]]> http://www.3mr3.com/tasarim-icin-navbar-elementi-eklemek/feed/ 2 Tipik Bir Web Site Yapısı http://www.3mr3.com/tipik-bir-web-site-yapisi/ http://www.3mr3.com/tipik-bir-web-site-yapisi/#comments Thu, 05 Feb 2009 23:14:29 +0000 admin http://www.3mr3.com/?p=152 Bu benim benim ağ projelerimde kullandığım tipik bir website yapısıdır. Bu yapıyı Dreamweaver’e yapmak istiyorsanız,

Windows > Files ve PHP sayfaları ve dosyalarınızı ekleyebilirsiniz.

-index.php dosyası, bizim ilk “kapı“mızdır. Bu sayfanın içine biz, sayfanın başlıca kısımlarını tanımlayacağız. (üstbar, navigasyon barı, ana içerik, alt yazı);

-config.php dosyası, MySQL veritabanı için bağlanmayı sağlar. (Ev sahibi ismi, kullanıcı, parola);

-image dosyası, bütün grafiksel öğeleri içerir (Gif, jpeg, png);

-css dosyası, tarz çarşaf dosyalarını içerir (. Css);

-include dosyası, indekse yüklenecek olan bütün ağ sayfalarının içeriğini kapsayacak.

Kaynak: http://woork.blogspot.com/2007/10/typical-website-structure.html

CSS ile Sayfa Tasarımı Düzenleme

CSS dosyası ile sayfa tasarımı düzenlemenin nasıl olduğunu öğreneceğiz. Önceki konumuzda Tipik Bir Web Site Yapısı’nı işlemiştik. Bu konumuzda ise css dosyası ile sayfamıza tasarım yapmaya çalışacağız.

Şimdi, index.php dosyasını açıyoruz <head> etiketinin içine aşağıdaki kodu yapıştırıyoruz:

<link href=“css/default.css” rel=“stylesheet” type=“text/css” />

İşte mantık şu index.php dosyasından CSS kodlarıyla işimize şekil vermek bunun için CSS dosyası için ne yapacaz, ona bakalım.

Sayfa Tasarımı ve CSS Kodları

İşleme başlamadan önce, Sayfamız hakkında fikirler yürütmemiz gerekiyor. Ben bunun için 2 sütünlu bir sayfa tasarımı kullanacağım. Aşağıdaki haritaya bakarak sizde değişik haritalar çıkarabilirsiniz. Örnek olarak 3′lü ve 4′lü sütun gibi…

default.css dosyanıza aşağıdaki kodları kopyalayıp yapıştırınız.

/* ——————————
PAGE STRUCTURE
—————————— */

/*
#container has an absolute width (780 pixel)
The width of inner elements is set to auto,
in this way all inner elements have the same
width of the element which contains them
*/

#container{width:780px; margin:0 auto;}
#topbar{width:auto; display:block; height:80px;}
#navbar{width:auto; display:block; height:24px;}

#main{width:auto; display:block;}
#column_left{width:560px; margin-right:20px; float:left;}
#column_right{width:200px; float:left;}

/*
div.spacer, solve an issue with #container height
in css 2 column layout.
*/

div.spacer{clear:both; height:10px; display:block;}

#footer{width:auto; display:block; height:24px;}

İşte temel sayfa yapımız hazır. Güle güle kullanın.

Kaynak: http://woork.blogspot.com/2007/10/design-page-layout-using-css.html

]]> http://www.3mr3.com/tipik-bir-web-site-yapisi/feed/ 2 HTML + CSS Özelliklerini Ayıran Fonttester http://www.3mr3.com/html-css-ozelliklerini-ayiran-fonttester/ http://www.3mr3.com/html-css-ozelliklerini-ayiran-fonttester/#comments Tue, 03 Feb 2009 11:40:11 +0000 admin http://www.3mr3.com/?p=124

Font Tester

fonttester.com, CSS ve HTML‘i en iyi anlatan bir yazılım sitesidir. Çok basit arayüzü olsada ilham alınacak ve sizi başlangıç için zorlamayacaktır. Yazı tipi ve renk arasındaki farkı bu yazılım sayesinde çok iyi anlayacaksınız. Blogcuların ve Web tasarıma yeni başlayanlar için ilk adres. Size birbirinden farklı isteğe bağlı olarak sütun çalıştırması sunar. Her birini ayrı ayrı kodları ile tasarım yapmanıza olanak sağlar. Sayamadığınız kadar ayarlarla istediğinizi yapabilmek için fonttester tam size göre. Karakter haritası bile mükemmel. Siteyi yapan kişi fevkalade iş çıkarmış olmalı!

Ben bazı CSS özellikleriyle oynadım ve bu sonuç ortaya çıktı. Sıra sizde.

Font Tester Screenshot ]]> http://www.3mr3.com/html-css-ozelliklerini-ayiran-fonttester/feed/ 1