Tekil Mesaj gösterimi - Ücretsiz Reponsive Css Tema Örneği

Konu Ücretsiz Reponsive Css Tema Örneği

02-05-2015, 16:14:52

Misafir adlı üyeden alıntı: mesajı görüntüle

Mobil uyum bildiğiniz üzere artık arama sonuçlarına etki ediyor(muş)

fazla grafik bilgim yok ama css ile istediğim tasarımı yapabilirim

aşağıda her tarayıca uygun oldukça basit ve sade bir responsive şablonu mevcut css ve html biliyorsanız dilediğiniz düzenlemeleri yaparak rahatca kullanabilirsiniz.

yapmanız gereken şey yüzdesel farklarla header footer sidebar gibi gereksinimlerinizi örneklerdeki gibi yerleştirmek ...

//responsive temada sidebar kullanmak pek akıl karı değil...

wordpress kullanıyorsanız is_mobile imdadınıza yetişecektir diğer cmslerde vs biraz kasmanız lazım.

<html>
<head>
<title>Responsive CSS</title>
<style>

body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#333;

}
p {
  font-size: 2.5em;
}
h1 {
  font-size: 4.5em;
}
/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: landscape) {
    #kapsayici { width: 100%; }
    
     img {
   margin:auto;
height: 550px;    
width: 750px;
}
    
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
    #kapsayici { width: -25%; }
    
     img {
margin:auto;
height: 550px;    
width: 750px;
}
    
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
    #kapsayici { width: -53.125%; }
    
     img {
    margin:auto;
height: 250px;    
width: 450px;
}
    
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
    #kapsayici { width: -68.75%; }
    
     img {
  margin:auto;
height: 250px;    
width: 250px;
}
    
}
</style>
</head>
<body>
<!– responsive edilmiş ana gövde başladı –>
<div id="kapsayici">
<!– responsive h1 –>
<h1>responsive h1</h1>
<!– responsive p –>
<p>burasi bir kapsayici responsive oldu</p>
<!– responsive img –>
<img src="http://i.stack.imgur.com/wZtaK.png" alt=" resp " />

</div>
<!– responsive edilmiş ana gövde bitti –>
</body>
</html>

Test edilmişi burada geliştirdikçe ilave edebilir yada değiştirebilirim sayfa kaynağından kodları alabilirsiniz.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 15:10:21 -->-> Daha önceki mesaj 14:29:56 --

V2

header menü içerik footer eklendi

<!DOCTYPE html>
<html>
<head>
<title>Responsive Tema Ornegi</title>
<style>


body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 13px;
    color:#333;
}

p {
    font-size: 2.5em;
}
h1 {
  font-size: 3.5em;
}
/* Laptop/Tablet (1024px) */
@media only screen and (min-width: 481px) and (max-width: 1284px) and (orientation: landscape) {
    #kapsayici { width: 100%; }
    
     img {
   margin:auto;
height: 550px;    
width: 750px;
}
    
}

/* Tablet Portrait (768px) */
@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {
    #kapsayici { width: -25%; }
    
     img {
margin:auto;
height: 550px;    
width: 750px;
}
    
}

/* Phone Landscape (480px) */
@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {
    #kapsayici { width: -53.125%; }
    
     img {
    margin:auto;
height: 250px;    
width: 450px;
}
    
}

/* Phone Portrait (320px) */
@media only screen and (max-width: 320px) {
    #kapsayici { width: -68.75%; }
    
     img {
  margin:auto;
height: 250px;    
width: 250px;
}
    
}

#headerwrap {

    margin: 0 auto;
}

#header {
    height: 90px;
    background: #FF6633;
    border-radius: 10px;
    border: 1px solid #eb521f;
    margin: 5px;
}

#navigationwrap {

    margin: 0 auto;
}

#navigation {
    height: 65px;
    background: #FFCC33;
    border-radius: 10px;
    border: 1px solid #ebb81f;
    margin: 5px;
}

#contentwrap {
    float: left;
    margin: 0 auto;
}

#content {
    background: #FFFFFF;
    border-radius: 10px;
    border: 1px solid #ebebeb;
    margin: 5px;
}

#footerwrap {

    margin: 0 auto;
    clear: both;
}

#footer {
    height: 90px;
    background: #33FF66;
    border-radius: 10px;
    border: 1px solid #1feb52;
    margin: 5px;
}

</style>
</head>
<body>
    <div id="kapsayici">
        <div id="headerwrap">
        <div id="header">
            <p>Header</p>
        </div>
        </div>
        <div id="navigationwrap">
        <div id="navigation">
            <p>Menu</p>
        </div>
        </div>
        <div id="contentwrap">
        <div id="content">
        <h1>Lorem ipsum dolor sit amet</h1>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
           <img src="http://i.stack.imgur.com/wZtaK.png" alt="Responsive Resim"/>
           <p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p><p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
           
        </div>
        </div>
        <div id="footerwrap">
        <div id="footer">
            <p>Footer</p>
        </div>
        </div>
    </div>
</body>
</html>

v3 son hali valid css valid html

<!DOCTYPE html>
<html>
<head>
<title>Responsive Css Tema Ornegi - Free CSS Responsive Template</title>
<style>body{font-family:Verdana,Arial,Helvetica,sans-serif;font-size:13px;color:#333;}p{font-size:2.5em;}h1{font-size:3.5em;}@media only screen and (min-width: 481px) and (max-width: 1284px) and (orientation: landscape) {#wrapper{width:1080px;margin:0 auto;}img{margin:auto;height:550px;width:750px;}}@media only screen and (min-width: 321px) and (max-width: 1024px) and (orientation: portrait) {#wrapper{width:750px;margin:0 auto;}img{margin:auto;height:550px;width:730px;}}@media only screen and (min-width: 321px) and (max-width: 480px) and (orientation: landscape) {#wrapper{width:450px;margin:0 auto;}img{margin:auto;height:450px;width:430px;}}@media only screen and (max-width: 320px) {#wrapper{width:250px;margin:0 auto;}img{margin:auto;height:250px;width:230px;}}#headerwrap{margin:0 auto;}#header{height:90px;border-radius:10px;border:1px solid #930062;margin:1px;}#navigationwrap{margin:0 auto;}#navigation{height:75px;border-radius:10px;border:1px solid #930062;margin:1px;}#contentwrap{float:left;margin:0 auto;}#content{background:#FFFFFF;border-radius:10px;border:1px solid #ebebeb;margin:5px;}#footerwrap{margin:0 auto;clear:both;}#footer{height:90px;border-radius:10px;border:1px solid #930062;margin:1px;}</style>
</head>
<body>
<div id="wrapper">
<div id="headerwrap">
<div id="header">
<p>Header height: 90px;</p>
</div>
</div>
<div id="navigationwrap">
<div id="navigation">
<p>Menu height: 75px;</p>
</div>
</div>
<div id="contentwrap">
<div id="content">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. </p>
<img src="http://i.stack.imgur.com/wZtaK.png" alt="Responsive Resim"/>
<p>Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus. Integer euismod lacus luctus magna. Quisque cursus, metus vitae pharetra auctor, sem massa mattis sem, at interdum magna augue eget diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi lacinia molestie dui. Praesent blandit dolor. </p><p>Sed non quam. In vel mi sit amet augue congue elementum. Morbi in ipsum sit amet pede facilisis laoreet. Donec lacus nunc, viverra nec, blandit vel, egestas et, augue. Vestibulum tincidunt malesuada tellus. Ut ultrices ultrices enim. Curabitur sit amet mauris. Morbi in dui quis est pulvinar ullamcorper. Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor. Integer id quam. </p>
</div>
</div>
<div id="footerwrap">
<div id="footer">
<p>Footer height: 90px;</p>
</div>
</div>
</div>
</body>
</html>

2 dakka yardım cı olabılırmısın bu response konusunda.
pagespeed test: tıkla

wptouc eklentısı kullanıyorum bu sıtemde lakın oyun sıtesı olduğu ıçın bu yeterlı gelmıyor bu eklentıyı hafıfce değıştırıp oyunları yazıların ıçıne nasıl gomebılırım ?reklam alanları ve bır ıkı oynamayla eklentıyı daha hoş hale getıermek konusunda yardımcı olabılırmısın.?