Forum'da ara:
Ara


Yazar Mesaj
Mesaj22.04.2012, 20:37 (UTC)    
Mesaj konusu: Tasarım Sorunu

arkadaşlar nereye yazacağımı bilemedim. Bildiğim kadarıyla CSS bölümüne soru yazılmıyor. Ben de buraya yazayım dedim. Arkadaşlar benim tasarımımda içerik bölümü yerine oturmadı. Gri bir bölge var tasarımda. İçerik bölümünün oraya gelmesi lazım. Ama aşağı kaymış. Bana yardım edebilir misiniz?

Görüntü şu şekilde:


CSS Kodu:
Kod:
html
{ height: 100%;}

*
{ margin: 0;
  padding: 0;}

body
{ font: normal 14px sans-serif;
  background: #1D1D1D;
  color: #5D5D5D;
  margin-top: 30px;}

p
{ padding: 0 0 20px 0;
  line-height: 1.7em;}
 
img
{ border: 0;}

h1, h2, h3, h4, h5, h6
{ font: bold 175% 'liberation sans', arial, sans-serif;
  color: #1D1D1D;
  margin: 0 0 15px 0;
  padding: 15px 0 5px 0;}

h2
{ font: bold 165% 'liberation sans', arial, sans-serif;}

h3
{ font: bold 125% 'liberation sans', arial, sans-serif;
  padding: 0 0 5px 0;
  color: #1D1D1D;}

h4, h5, h6
{ margin: 0;
  padding: 0 0 5px 0;
  font: bold 110% 'liberation sans', arial, sans-serif;
  color: #1D1D1D;
  line-height: 1.5em;}

h5, h6
{ font: italic 95% arial, sans-serif;
  color: #1D1D1D;
  padding-bottom: 15px;}

h6
{ color: #362C20;}

a, a:hover
{ background: transparent;
  outline: none;
  text-decoration: underline;
  color: #5D5D5D;}

a:hover
{ text-decoration: underline;
  color: #1D1D1D;}

ul
{ margin: 2px 0 22px 17px;}

ul li
{ margin: 2px 0 15px 17px;}

ol
{ margin: 8px 0 22px 20px;}

ol li
{ margin: 0 0 11px 0;}

#main, #header, #banner, #menubar, #site_content, #footer, .container_footer, .container_header, #contact
{ margin-left: auto;
  margin-right: auto;}

#main
{ width: 920px;
  background: transparent;}

#header
{ background: transparent;
  width: 920px;}

#banner
{ background: #FFF;
  width: 900px;
  padding: 5PX 0 0 20px;}
 
#banner_content
{ width: 880px;
  position: relative;
  height: 350px;
  background: #FFF url(http://img.webme.com/pic/e/emsiusta/bann.png) no-repeat;}
 
#banner H1
{ float: right;
  font: bold 300% 'liberation sans', arial, sans-serif;
  color: #FFF;
  padding: 0px 20px 0px 0px;}

#menubar
{ width: 920px;
  height: 50px;
  text-align: center;
  margin: 0 auto;
  background: transparent;
  color: #000;}
 
#contact{
  width: 160px;
  float: left;
  height: 50px;
  background: transparent;
  padding: 0 0 0 10px;
}

#site_content
{ width: 920px;
  overflow: hidden;
  margin: 0 auto;
  padding: 0;
  background: #FFF;}

.sidebar_container
{ float: left;
  width: 230px;
  margin: 20px 0 20px 20px;
  background: #1D1D1D;}

.sidebar
{ float: left;
  width: 210px;
  padding-left: 10px;
  margin-bottom: 10px;}

.sidebar_item
{ font: normal 100% Arial, Helvetica, sans-serif;
  padding: 0 15px 0 0;
  width: 201px;}

.sidebar h2
{ color: #FFF;} 
 
.sidebar h4
{ font-size: 125%;
  color: #FFF;}

.sidebar p
{ color: #FFF;}

.sidebar a
{ color: #FFF;}

.sidebar a:hover
{ text-decoration: none;}

.sidebar ul li, .sidebar ul li.selected
{ list-style: none;
  margin: 15px 0;
  padding: 0;}

.sidebar li.selected, .sidebar li:hover
{ color: #5D5D5D;
  text-decoration: none;}

#content
{ text-align: left;
  width: 900px;
  padding: 0;
  margin: 0 15px 0 0;
  float: left;}

.content_item
{ width: 620px;
  margin: 0 0 20px 20px;
  float: left;}

.content_image
{ width: 250px;
  padding: 0px 20px 20px 0px;
  float: left;}
 
.container_header
{ margin-top: 20px;
  height: 15px;
  width: 920px;
  background: transparent url(http://img.webme.com/pic/e/emsiusta/container_header.png) repeat-x top;} 
 
.container_footer
{ height: 20px;
  width: 920px;
  background: transparent url(http://img.webme.com/pic/e/emsiusta/container_footer.png) repeat-x top;}
 
#footer
{ width: 880px;
  padding: 0 20px 0 20px;
  background: #FFF;}
 
#footer_content
{ width: 880px;
  font: normal 115% "liberation sans", arial, sans-serif;
  height: 45px;
  padding: 30px 0 5px 0;
  text-align: center;
  background: #1D1D1D url(http://img.webme.com/pic/e/emsiusta/footer.png) no-repeat bottom;
  color: #FFF;}

#footer a, #footer a:hover
{ color: #FFF;
  background: #1D1D1D;
  text-decoration: underline;}

#footer a:hover
{ text-decoration: none;}

ul.links
{ margin: 0;}

ul.links li
{ list-style: none;
  padding: 8px 0;}

ul.links li a, ul.links li a:hover
{ padding: 0 0 0 28px;
  background: transparent url(http://img.webme.com/pic/e/emsiusta/page.png) no-repeat left center;
  color: #06C4E6;
  text-decoration: underline;}

ul.links li a:hover
{ color: #5D5D5D;
  text-decoration: none;}
 
/* from here: http://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers */
.lavaLampWithImage {
  position: relative;
  height: 30px;
  padding: 5px 35px 5px 0px;
  overflow: hidden;
  float: left;
  margin: 0 40px 0 0px;
  width: 650px;
}

.lavaLampWithImage li {
  float: left;
  list-style: none;
}

.lavaLampWithImage li.back {
  background: #444;
  height: 28px;
  z-index: 8;
  position: absolute;
}

.lavaLampWithImage li a {
  font: normal 120% arial, sans-serif;
  text-decoration: none;
  color: #FFF;
  text-align: center;
  letter-spacing: 0;
  z-index: 10;
  display: block;
  float: left;
  height: 60px;
  padding: 5px 0px 0px 35px;
  position: relative;
  overflow: hidden;
}

.lavaLampWithImage li a:hover, .lavaLampWithImage li a:active, .lavaLampWithImage li a:visited {
  border: none;
}


Tasarım Üstü:
Kod:
  <div id="main">
    <div id="header"> 
     <div id="menubar">
        <ul class="lavaLampWithImage" id="lava_menu">
          <li class="current"><a href="index.html">Home</a></li>
          <li><a href="ourwork.html">Our Work</a></li>
          <li><a href="testimonials.html">Testimonials</a></li>
          <li><a href="projects.html">Projects</a></li>
          <li><a href="contact.html">Contact Us</a></li>
        </ul>
   
     </div><!--close menubar-->    
    </div><!--close header-->         
 
    <div class="container_header"><p> </p></div>
      <div id="banner"> 
      <div id="banner_content">
      </div><!--close banner_content-->   
      </div><!--close banner-->      
    <div id="site_content">
      <div id="content">
        <div class="content_item">



Mesaj23.04.2012, 01:10 (UTC)    
Mesaj konusu:

Sitene baktım tam oturmus :S
______________
"Kendini dünyalar kadar değerli zannedenlere kısa bir not; Dünya 5 para etmiyor."
Mesaj23.04.2012, 06:30 (UTC)    
Mesaj konusu:

aykut-servis yazmış:
Sitene baktım tam oturmus :S
Evet kodlarla uğraşarak oldu işte. Yine de Teşekkürler.
Mesaj23.04.2012, 11:34 (UTC)    
Mesaj konusu:

Uğraşma'dan hiç bir şey olmaz :S
______________
"Kendini dünyalar kadar değerli zannedenlere kısa bir not; Dünya 5 para etmiyor."
Önceki mesajları göster:   


Powered by phpBB © 2001, 2005 phpBB Group
Türkçe Çeviri: phpBB Türkiye & Erdem Çorapçıoğlu