lostyazilim
tr.link

Html - Css Yardım Konusu Gönüllü Yardımseverler

6 Mesajlar 1.694 Okunma
acebozum
tr.link

MehmetAliATLI MehmetAliATLI WM Aracı Kullanıcı
  • Üyelik 13.04.2011
  • Yaş/Cinsiyet 39 / E
  • Meslek Muhasebe
  • Konum Antalya
  • Ad Soyad M** A**
  • Mesajlar 759
  • Beğeniler 161 / 84
  • Ticaret 9, (%100)
Merhaba arkadaşlar. Konunun acemi wm arkadaşlarımız için kaynak teşkil edeceğini düşünmekteyim.

Css ve Html konusunda pek bilgi sahibi olmayan ancak kendi başına bişeyler yapmak için çabalayan arkadaşlarımız için sordukları veya takıldıkları yerlerde yardımcı olabilecek vardır diye düşünmekteyim. Konuyu da bu sebeple buraya açtım.


İlk sorunum ile ben bu konuya yardımcı olabilecek bir arkadaş beklemekteyim. Şimdiden teşekkürler.

Sorunum; resimde de görüldüğü gibi logo ve banneri bir türlü yan yana oturtamıyorum. Psd to Css yapmaya çalışıyorum http://wmaraci.com/forum/projeler-fikirler-ortaklik/psdyi-css-yapin-bende-wordpresse-duzenleyeyim-7837.html bu konudaki psd çalışmaları üzerinde kendimi geliştirmek için.
Acaba nerede hata yapıyorum ki bu iki faktör yan yana gelmiyor.




index.html dosyam


Psd To Css

























style dosyam
/*
psd to css Ucli.Net
*/

body {margin: auto; font-size: 14px; font-family: calibri;}
a {text-decoration: none;}

/* Logo ve Banner */

#logo {
width:240px;
height:105px;
padding: 0px 700px 0px 0px;
}
#ustreklam {
width:468px;
height:60px;
padding: 0px 0px 0px 700px;
}

/* Üst Menü */

#header-menu-ust {
background: url(images/menu-bg-ust.png) repeat-x;
width: 1009px; height: 41px;
text-align: left;
}
.header-menu-ust a {
color: #e4e2e2;
padding: 10px;
}
.header-menu-ust {
padding: 10px 10px 10px 81px;
}
.secili {
background: url(images/menu-buton.png) no-repeat;
width: 64px; height: 30px;
background-position: bottom;
}

/* Alt Menü */

#header-menu-alt {
background: url(images/menu-bg-alt.png) repeat-x;
width: 876px; height: 39px;
text-align: left;
}
.header-menu-alt a {
color: #0c2d38;
padding: 10px;
}
.header-menu-alt {
padding: 10px 10px 10px 60px;
}

/* Header Arama */

#header-arama {background: url(images/arama.png); border: 0; width: 140px; height: 26px;float:right;}
.ara {background: url(images/ara.png) ; border: 0; width: 50px; height: 26px;float:right;}

/* Sidebar */

#sidebar {background: url(images/sagmenu.png); width:323px; height:1352px;}
 

 

🔒 http://mcmyazilim.com
elektronikssl
webimgo

bd bd WM Aracı Kullanıcı
  • Üyelik 26.10.2010
  • Yaş/Cinsiyet 35 / E
  • Meslek 2
  • Konum Manisa
  • Ad Soyad B** D**
  • Mesajlar 4926
  • Beğeniler 784 / 3954
  • Ticaret 18, (%100)
HTML'de logoyu ve banner'ı bir div içine alıp bu div'e genişlik vermelisin. Daha sonra logo ve banner'ın divlerine float ile sola ve sağa almalısın.

Yani HTML kısmımız şu şekilde:








CSS kısmımızı da şu şekilde kodlamamız gerekiyor:

/* Logo ve Banner */

#ustkisim{
margin-top: 50px;
width: 1009px;
}

#logo {
width:240px;
height:105px;
float: left;
}

#ustreklam {
width:468px;
height:60px;
float: right;
}


Burada HTML bölümünde ustkisim div'ini kapattıktan sonra şöyle bir kod kullandım:



Bu kodda float'ı temizlememize yarıyor.
 

 

MehmetAliATLI MehmetAliATLI WM Aracı Kullanıcı
  • Üyelik 13.04.2011
  • Yaş/Cinsiyet 39 / E
  • Meslek Muhasebe
  • Konum Antalya
  • Ad Soyad M** A**
  • Mesajlar 759
  • Beğeniler 161 / 84
  • Ticaret 9, (%100)
Teşekkürler hocam. Bu işi sökeceğim sayenizde.
 

 

🔒 http://mcmyazilim.com

MehmetAliATLI MehmetAliATLI WM Aracı Kullanıcı
  • Üyelik 13.04.2011
  • Yaş/Cinsiyet 39 / E
  • Meslek Muhasebe
  • Konum Antalya
  • Ad Soyad M** A**
  • Mesajlar 759
  • Beğeniler 161 / 84
  • Ticaret 9, (%100)
Merhabalar tekrardan. Bir sorunum mevcut acaba nerde eksiğim var. Üst kısım (Anasayfa ile başlayan kısım) sorunsuz. Ancak hemen altındaki kısımda (Güncel ile başlayan kısım) bir türlü renk tonu margin-left olayını oturtamadım. Benim hazırladığım çalışma aşağıdaki resimdedir.



Olmasını istediğim resim ise aşağıdaki görüntüdedir.



Html Dökümüm


Css Dökümüm

/* Header */


#menu{
background: url(images/menubg.png) repeat-x;
width: 1009px;
height: 75px;
text-align: left;
}
#menu ul {
margin: 0;
padding: 10;
float: left;
margin-left:60px;
}
#menu ul li {
float: left;
margin: 0px 0px 0px 15px;
font-size: 12pt;
cursor: pointer;
}
#menu ul li a {
color: #e4e2e2;
padding: 10px;
}

ul.alt_menu {
float: left;
width: 900px;
height: 33px;
}
ul.alt_menu li {
float: left;
line-height: 17px;
padding: 0 0px 0 15px;
}
ul.alt_menu li a {
font-size: 12px;
color: #7D7D7D;
font-weight: 1000;
}

a.secili {
background: url(images/menu-buton.png) no-repeat;
width: 64px;
height: 30px;
background-position: bottom;
color:#e4e2e2;
}
a.secili span{
background:url(images/menu-buton.png) right top no-repeat;
color:#074d63}
.secili1 {
background: url(images/sagtabbutton.png) no-repeat;
width: 92px;
height: 22px;
background-position: bottom;
}

/* Header Arama */
#arama {
}
.submit {
background: transparent;
border: 0;
width: 50px;
height: 26px;
float:right;
margin-right:138px;
margin-top:9px;
}
.input {
width: 137px;
height: 26px;
border: 0px;
font-size: 10pt;
color: #0c2d38;
background: transparent;
line-height: 15px;
float: right;
margin-top:9px;
}
 

 

🔒 http://mcmyazilim.com
wmaraci
wmaraci

NorthKinG NorthKinG YAYGARA.NET Kullanıcı
  • Üyelik 05.09.2011
  • Yaş/Cinsiyet 39 / E
  • Meslek Yönetici
  • Konum Ankara
  • Ad Soyad M** Ö**
  • Mesajlar 126
  • Beğeniler 4 / 37
  • Ticaret 1, (%100)
alt_menu class style css de yok bence u1 lerden önce alt_menu classını koy steyle.css'ye

ul.alt_menu {
float: left;
width: 900px;
height: 33px;
}
ul.alt_menu li {
float: left;
line-height: 17px;
padding: 0 0px 0 15px;
}
ul.alt_menu li a {
font-size: 12px;
color: #7D7D7D;
font-weight: 1000;
}


html deki classın style.css de yok kısacası htmldeki alt_menu classını steyle.css tanımla
ul.alt_menu li a olan classlarınıda alt_menu li a şekline devam ettir
 

 

MecazYazar.CoM

MehmetAliATLI MehmetAliATLI WM Aracı Kullanıcı
  • Üyelik 13.04.2011
  • Yaş/Cinsiyet 39 / E
  • Meslek Muhasebe
  • Konum Antalya
  • Ad Soyad M** A**
  • Mesajlar 759
  • Beğeniler 161 / 84
  • Ticaret 9, (%100)

NorthKinG adlı üyeden alıntı

alt_menu class style css de yok bence u1 lerden önce alt_menu classını koy steyle.css'ye



html deki classın style.css de yok kısacası htmldeki alt_menu classını steyle.css tanımla
ul.alt_menu li a olan classlarınıda alt_menu li a şekline devam ettir


Alt menü için ayrıca div class tanımlamayı düşünmüyorum. Bunu ul claslar ile bitirmeyi düşünüyorum. İncelediğim bir kaç temada bu mevcut idi. Örneğin aorhan teması.
 

 

🔒 http://mcmyazilim.com
wmaraci
wmaraci
Konuyu toplam 2 kişi okuyor. (0 kullanıcı ve 2 misafir)
Site Ayarları
  • Tema Seçeneği
  • Site Sesleri
  • Bildirimler
  • Özel Mesaj Al