Bunu nasıl yapabilir ?

22-01-2017, 02:49:40

S.a. arkadaşlar,

<div id="desc">
<span>Yazı içeriği</span>
</div>

<div class="wrapper">
//Diğer css ler.

</div>

Yukarıdaki yazım sırasına göre id desc divini footere nasıl konumlandırabilirim. Yani yazım sırası bozulmayacak fakat desc divi footerde gözükecek tarayıcılarda. Ayrıca içerik gizli olmayacak gözükecek. Bunu nasıl yapabilirim arkadaşlar bir el atsanız çok makbule geçer. Css de çok profosyonel değilim fakat kendi işimi görecek kadar biliyorum ama bunu nası yapabileceğimi bilmiyorum veya z-index ile yapılabileceğini kestiriyorum diyelim. Ayrıca bu yöntemin bir adı varmıdır ?

22-01-2017, 04:23:40

#2

JackkerL

Herhalde footerda gözükmüyor nasıl gösterebilirim onu soruyorsun?
footer'a ve desc divine sıralı olarak z-index 1 ve 2 şeklinde değer atayacaksın.

Ayrıca: http://fatihhayrioglu.com/z-index/

22-01-2017, 04:53:59

#3

aLKaDraZ

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

Herhalde footerda gözükmüyor nasıl gösterebilirim onu soruyorsun?
footer'a ve desc divine sıralı olarak z-index 1 ve 2 şeklinde değer atayacaksın.

Ayrıca: http://fatihhayrioglu.com/z-index/

Hocam şimdi şöyle anlatayım z index kullanıyorum fakat bir türlü olmuyor.

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="desc">
<h1>Başlık</h1>
<span>İçerik yazısı içerik yazı</span></div>

<div id="wp">
    <div id="header">header içerik</div>
    <div id="content">content içerik</div>
    <div id="footer">footer</div>

</div>

</body>
</html>

css

#desc {
    width: 300px;
    background-color: #FF0000;
}
#header {
    background-color: #666666;
    width: 300px;
}
#content {
    background-color: #999999;
    width: 300px;
}
#footer {
    background-color: #996600;
    width: auto;

}

Çıktı:

Benim almaya çalıştığım html de değişiklik yapmadan yani sıra bozulmadan.

Umarım anlatabilmişimdir.

22-01-2017, 05:03:43

#4

JackkerL

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

Hocam şimdi şöyle anlatayım z index kullanıyorum fakat bir türlü olmuyor.

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="desc">
<h1>Başlık</h1>
<span>İçerik yazısı içerik yazı</span></div>

<div id="wp">
    <div id="header">header içerik</div>
    <div id="content">content içerik</div>
    <div id="footer">footer</div>

</div>

</body>
</html>

css

#desc {
    width: 300px;
    background-color: #FF0000;
}
#header {
    background-color: #666666;
    width: 300px;
}
#content {
    background-color: #999999;
    width: 300px;
}
#footer {
    background-color: #996600;
    width: auto;

}

Çıktı:

Benim almaya çalıştığım html de değişiklik yapmadan yani sıra bozulmadan.

Umarım anlatabilmişimdir.

Açıkcası anlamadım. Çıktı tamam, fakat "sıra bozulmadan" derken neyi kast ettiniz onu anlamadım. Eğer html'ye dokunmadan css üzerinden sıraya koyayım diyorsanız margin koduyla yapabilirsiniz, z-index değil kodumuz. Fakat neden html'i değiştirmek istemiyorsunuz bunu anlamadım şimdi de

22-01-2017, 05:13:25

#5

aLKaDraZ

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

Açıkcası anlamadım. Çıktı tamam, fakat "sıra bozulmadan" derken neyi kast ettiniz onu anlamadım. Eğer html'ye dokunmadan css üzerinden sıraya koyayım diyorsanız margin koduyla yapabilirsiniz, z-index değil kodumuz. Fakat neden html'i değiştirmek istemiyorsunuz bunu anlamadım şimdi de

Seo ile alakalı hocam tamamen. Kelimeler headere ne kadar yakınsa o kadar iyidir. Bu sebeple html e dokunmamam gerekiyor. Yapan siteler var bunu fakat ben çözemedim daha

Yardımlarınız için ayrıca teşekkür ederim.

22-01-2017, 06:03:55

#6

_SecreT_

position atayıp denedinizmi hocam ?

22-01-2017, 18:57:46

#7

aLKaDraZ

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

position atayıp denedinizmi hocam ?

Aşağıdaki şekilde sonuç alabiliyorum. Acaba bu mantıktan gitsem responsive veya tasarımımda bozulma meydana gelirmi. Ne tür sıkıntılar yaşarım tasarım boyutunda sizce ? Çok teşekkür ederim ayrıca.

#desc{
background-color:#FF0000;
width:300px;
margin-right:auto;
margin-left:auto;
position:absolute;
}
#desc span,h1{
padding-top:50px;

}
#header {
    background-color: #666666;
    width: 300px;
    position:relative;
}
#content {
    background-color: #999999;
    width: 300px;
    position:relative;
}
#footer {
    background-color: #996600;
    width: 300px;
    position:absolute;
}

HTML

<!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>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>


<div id="desc">
    <span><h1>Başlık</h1>İçerik yazısı</span>
</div>


<div id="wp">
    <div id="header">header içerik</div>
    <div id="content">content içerik</div>
    <div id="footer">footer</div>

</div>

</body>
</html>

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 17:31:21 -->-> Daha önceki mesaj 17:23:51 --

Ayrıca position atadığımda desc ve foter divleri iç içe geçiyordu desc divi gözükmüyordu. Bu sebeple padding-top değeri verdim sırf içeriği göstermek için.

--R10.NET; Flood Engellendi -->-> Yeni yazılan mesaj 17:57:46 -->-> Daha önceki mesaj 17:31:21 --

Malesef yukarıdaki şekildede olmuyor. Divlerin içeriği dolunca desc divi kayboluyor. Yani 0 konumuna göre yaptığından. Bilmiyorum valla nası yapacaksan

22-01-2017, 19:25:41

#8

FSahin

https://jsfiddle.net/fsahin/wzw6ueyx/

CSS Flex yöntemi ile yapacaksınız, örneği verdim.

22-01-2017, 19:36:47

#9

aLKaDraZ

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

https://jsfiddle.net/fsahin/wzw6ueyx/

CSS Flex yöntemi ile yapacaksınız, örneği verdim.

Teşekkürler hocam flex i duymamıştım daha önce. Farklı tarayıcılarda sorun yaşarmıyım acaba ? ...

Ayrıca web deki kullanan siteler flex kullanmadan yapmışlar. Farklı bir alternatif ile yapılabilirmi acaba ? Yardımlarınızı rica ederim.