Sorun

Kendi kod bilgim çapınca2 divi yanya getirdim yalnız alan küçülünce alt alta kayıyor veya mobilde yardım ederseniz sevinirim

<div id="baslik" style="float: left; height: 50px; width: 100%; max-width:320px; line-height: 50px; text-align: center; color: rgb(84, 106, 109); font-family: Verdana, Geneva, sans-serif; border-radius: 0px 0px 0px 0px; background-color: rgb(84, 106, 109);"><span style="background-color: rgb();"><strong><span style="color: rgb(255, 255, 255);">&Ouml;rnek</span></strong></span></div>
<span style="background-color: rgb(192, 192, 192);"><br />
</span><br />
<div style="text-align: right;"><a class="hvr-buzz-out" href="" style="display: block; vertical-align: middle; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; line-height: 40px; margin-bottom: 2px; text-align: center; text-decoration: none; color: rgb(216, 225, 226); font-family: Verdana, Geneva, sans-serif; font-size: 14px; width: 100%; max-width:320px; background-color: rgb(216, 225, 226);">&nbsp; &nbsp; &nbsp;&nbsp;<br />
<br />
</a></div>
<a class="hvr-buzz-out" href="" style="font-family: Verdana, Geneva, sans-serif; font-size: 14px; line-height: 40px; text-decoration: none; display: block; vertical-align: middle; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; margin-bottom: 2px; text-align: center; width: 100%; max-width:320px; background-color: rgb(216, 225, 226);"><font color="#000000"><b>&nbsp;<br />
</b><br />
<br />
<br />
<span style="font-size: small;"><br />
<span style="font-size: medium;"><span style="background-color: rgb(255, 255, 255);"><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #### &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</strong></span></span></span></font></a>
<div id="anadiv" v="">
<div style="float:left">
<div style="text-align: right;margin:1px;"><a class="hvr-buzz-out" href="" style="display: block; vertical-align: middle; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; line-height: 25px; margin-bottom: 2px; text-align: center; text-decoration: none; color: rgb(216, 225, 226); font-family: Verdana, Geneva, sans-serif; font-size: 14px; width: 100%; max-width:159px; background-color: rgb(216, 225, 226);"><span style="font-size: small;"><strong><span style="color: rgb(0, 0, 0);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <br />
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></strong></span><span style="font-size: medium;"><span style="color: rgb(0, 0, 0);"><br />
<br />
<br />
<br type="_moz" />
</span></span></a></div>
</div>
<div style="float:left">
<div style="text-align: right;margin:1px;"><a class="hvr-buzz-out" href="" style="display: block; vertical-align: middle; transform: translateZ(0px); box-shadow: rgba(0, 0, 0, 0) 0px 0px 1px; backface-visibility: hidden; line-height: 25px; margin-bottom: 2px; text-align: center; text-decoration: none; color: rgb(216, 225, 226); font-family: Verdana, Geneva, sans-serif; font-size: 14px; width: 100%; max-width:159px; background-color: rgb(216, 225, 226);"><span style="font-size: small;"><strong><span style="color: rgb(0, 0, 0);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;</span></strong><span style="color: rgb(0, 0, 0);">&nbsp; &nbsp;&nbsp;</span></span><span style="font-size: medium;"><span style="color: rgb(0, 0, 0);"><br />
<br />
<br />
<br />
<br type="_moz" />
</span></span></a></div>
</div>
</div>
<table>
<tbody>
<tr>
<td>
<div style="width: 100%; max-width:320px; overflow: auto;">&nbsp;<br />
<br />
<br />
<br />
<br />
<br />
&nbsp;</div>
</td>
<td>
<div style="width: 100%; max-width:320px; overflow: auto;">&nbsp;<br />
<br />
<br />
<br />
&nbsp;&nbsp;</div>
</td>
</tr>
</tbody>
</table>
<br />
<div style="width: 100%; max-width:320px; overflow: auto;">
<div id="alt" style="height: 30px; width: 390px; padding-right: 5px; padding-left: 5px; float: left; line-height: 30px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; text-transform: uppercase; color: rgb(255, 255, 255); border-radius: 0px; background-color: rgb(84, 106, 109);"><marquee><strong>######.COM ILK KAPSAMLI T&Uuml;RK-ISLAM ANSIKLOPEDISI VE BILIM SITESI</strong></marquee></div>
</div>
<br />
<table>
</table>

Merhaba, HTML içerisinde bu denli STYLE tanımlamaları kullanmak istenilir bir durum değildir, ilgili stilleri CSS kodlarınız içine alıp oradan çağırabilirsiniz.
Örneğin; <div id="baslik" style="float: left; height: 50px; width: 100%; max-width:320px; line-height: 50px; text-align: center; color: rgb(84, 106, 109); font-family: Verdana, Geneva, sans-serif; border-radius: 0px 0px 0px 0px; background-color: rgb(84, 106, 109);"> yazmak yerine;
CSS Kodlarınız içine: #baslik{float: left; height: 50px; width: 100%; max-width:320px; line-height: 50px; text-align: center; color: rgb(84, 106, 109); font-family: Verdana, Geneva, sans-serif; border-radius: 0px 0px 0px 0px; background-color: rgb(84, 106, 109)} yazıp; HTML kodlamanızı şu şekilde küçültürsünüz. <div id="baslik"> Gördüğünüz gibi iki HTML arasında çok büyük farklılık var. Bu şekilde kodlamanızı okumanız da daha kolay olur ve nerede hata yaptığınızı daha rahat bulabilirsiniz. Kodlamanız bu haliyle o kadar karışık ki, şekildeki gibi düzenlemeniz size çok faydalı olacaktır. Ayrıca sorun olarak neyi belirttiğiniz de anlaşılmıyor. Sorunu daha ayrıntılı açıklarsanız yardımcı olabiliriz.
______________

kodlama bilgim yok dostum
Bu kodda sürekli sorun yaratıyor
ayrıca içinde fark ettiyseniz bozukluklarvar buda SEO'ya zara vercektetir

yardımcı olabilir misiniz?

projem için önemli

Şimdi sorunsuz çalışıyor, buyrun:

______________

bu kodda da alan daralınca veya mobilde sağ içerik ve sol içerik alt alta geliyor ayrıca kayan yazı
daralmıyor

ama yinede sağolun forumda tek siz çıktınız

Rica ederim fakat ben sadece sizin gönderdiğiniz orijinal kodu düzenlemiştim. Başlıktaki isteğinizin kodlamayı mobil uyumlu hale getirmek olduğunu sanırım gözden kaçırmışım. Bu bahsettiğiniz soruna sebep olan tamamen CSS içerisindeki WIDTH genişlik tanımlamaları... En basit yolla; onlara PX piksel olarak değer vermektense, % yüzdelik olarak değer vermek sorunu çözecektir. Uygun bir zamanımda size tekrar yardımcı olmak isterim.
______________

Bir önceki mesajımda açıkladığım gibi istediğiniz kod, şu şekilde hazırlanabilir. Bu kodla, içerikler değişen ekran boyutuna uyumlu olarak ekrana yerleşecektir.

______________