Her Ekran Çözünürlüğünde Sitenin aynı gözükmesi..Yardım Lütfen.

Aşağı Git Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme PHP / CGI Her Ekran Çözünürlüğünde Sitenin aynı gözükmesi..Yardım Lütfen.

Bu konudaki kullanıcılar: 1 misafir

10
Cevap 861
Tıklama 0
Öne Çıkarma

1. sayfa

Her Ekran Çözünürlüğünde Sitenin aynı gözükmesi..Yardım Lütfen.

Cevap Yaz

TarafsızSözel

11 yıl

Onbaşı

Konu Sahibi

Arkadaşlar ben Adobe photoshop kullanarak bir tasarım yaptım html olarak fakat bir sorunum var ;

Benim yaptığım tasarım 1400*900 piksel boyutunda bir çalışma idi ben bunu kendi ekranıma göre yani 1920*1080 çözünürlükte yaptım.Kendi ekranımda gayet iyi duruyor fakat başka ekranlarda denettirdim onlarda ekran çok büyük geliyor.
Örneğin 1024*768 ekranlarda ekranın sadece 3'de 1'i gözüküyor.Nasıl bir yol izlemem lazım css'de bu işi nasıl çözerim yardımcı olursanız sevinirim.Her çözünürlükte aynı gözükmesini istiyorum.

Sayfanın kodları burada ;

<html> 
  <head> 
  <link rel="stylesheet" type="text/css" href="stil.css" /> 
  <div id="icerik"> 
  <title>Deneme </title> 
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> 
  </head> 
  <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> 
  <!-- ImageReady Slices (newindex.psd) --> 
  <center><table id="Table_01" width="1401" height="900" border="0" cellpadding="0" cellspacing="0"> 
  	<tr> 
  		<td colspan="11"> 
  			<img src="images/newindex_01.png" width="1400" height="71" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="71" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td colspan="3"> 
  			<img src="images/newindex_02.png" width="471" height="74" alt=""></td> 
  		<td colspan="5" rowspan="3"> 
  			<a href="#" 
  				onmouseover="window.status='desing';  return true;" 
  				onmouseout="window.status='';  return true;"> 
  				<img src="images/logo.png" width="427" height="278" border="0" alt="desing"></a></td> 
  		<td colspan="3"> 
  			<img src="images/newindex_04.png" width="502" height="74" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="74" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td rowspan="7"> 
  			<img src="images/newindex_05.png" width="110" height="755" alt=""></td> 
  		<td> 
  			<a href="#" 
  				onmouseover="window.status='Facebook';  return true;" 
  				onmouseout="window.status='';  return true;"> 
  				<img src="images/facebook.png" width="126" height="75" border="0" alt="Facebook"></a></td> 
  		<td rowspan="7"> 
  			<img src="images/newindex_07.png" width="235" height="755" alt=""></td> 
  		<td rowspan="7"> 
  			<img src="images/newindex_08.png" width="177" height="755" alt=""></td> 
  		<td> 
  			<a href="https://www.youtube.com/channel/UCaFUf8gf6YxVx-X2W5KsqGA" 
  				onmouseover="window.status='Youtube';  return true;" 
  				onmouseout="window.status='';  return true;"> 
  				<img src="images/youtube.png" width="108" height="75" border="0" alt="Youtube"></a></td> 
  		<td rowspan="7"> 
  			<img src="images/newindex_10.png" width="217" height="755" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="75" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td rowspan="6"> 
  			<img src="images/newindex_11.png" width="126" height="680" alt=""></td> 
  		<td rowspan="6"> 
  			<img src="images/newindex_12.png" width="108" height="680" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="129" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td colspan="5"> 
  			<img src="images/newindex_13.png" width="427" height="329" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="329" alt=""></td> 
  	</tr> 
  	<tr> 
  	<div id="youtube"> 
                     <iframe width="518" height="233" src="//www.youtube.com/embed/s_WxwYKe-Kw" frameborder="0" allowfullscreen></iframe> 
                      </div> 
  		<td rowspan="4"> 
  			<img src="images/newindex_14.png" width="50" height="222" alt=""></td> 
  		<td colspan="3"> 
  			<a href="#/" 
  				onmouseover="window.status='Anasayfa';  return true;" 
  				onmouseout="window.status='';  return true;"> 
  				<img src="images/anasayfa.png" width="344" height="49" border="0" alt="Anasayfa"></a></td> 
  		<td rowspan="4"> 
  			<img src="images/newindex_16.png" width="33" height="222" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="49" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td colspan="3"> 
  			<img src="images/newindex_17.png" width="344" height="13" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="13" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td rowspan="2"> 
  			<img src="images/newindex_18.png" width="40" height="160" alt=""></td> 
  		<td> 
  			<a href="#" 
  				onmouseover="window.status='Forum';  return true;" 
  				onmouseout="window.status='';  return true;"> 
  				<img src="images/Forum.png" width="274" height="75" border="0" alt="Forum"></a></td> 
  		<td rowspan="2"> 
  			<img src="images/newindex_20.png" width="30" height="160" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="75" alt=""></td> 
  	</tr> 
  	<tr> 
  		<td> 
  			<img src="images/newindex_21.png" width="274" height="85" alt=""></td> 
  		<td> 
  			<img src="images/spacer.gif" width="1" height="85" alt=""></td> 
  	</tr> 
  </table></center> 
  <!-- End ImageReady Slices --> 
  </div> 
  </body> 
  </html>

TarafsızSözel

11 yıl

Onbaşı

Konu Sahibi

Bakım oldu araya kaynamasın.

Bu mesajda bahsedilenler: @TarafsızSözel

okan yıldız

11 yıl

Yüzbaşı

İncelikle width ve height değerlerini css den vermen lazım ve değerleri px olarak değil
% olarak vermen lazım bu şekilde bütün çözünürlüklerde o çözünürlüğün % sine gore işlem yapar jquery bilirsen çok faydali olur

< Bu ileti mobil sürüm kullanılarak atıldı > Bu mesaja 1 cevap geldi.

TarafsızSözel

11 yıl

Onbaşı

Konu Sahibi

quote:

Orijinalden alıntı: okan yıldız

İncelikle width ve height değerlerini css den vermen lazım ve değerleri px olarak değil
% olarak vermen lazım bu şekilde bütün çözünürlüklerde o çözünürlüğün % sine gore işlem yapar jquery bilirsen çok faydali olur

Photoshop aracılığıyla daha önceden yaptığım için şuan css'ye div açıp width ve height değerlerini %100 yapıyorum ama tablo yine aynı kalıyor.
Konudaki kod içeriğine bakarak ne yapmam gerektiğini yazabilir misiniz ?

Bu mesaja 1 cevap geldi.

Guest-E90F2B1F7

11 yıl

Yüzbaşı

merhabahttp://kursiyernet.meb.gov.tr/ deki html 5 bolumun deki section dersini izlemenizi tavsiye ederim

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @TarafsızSözel

TarafsızSözel

11 yıl

Onbaşı

Konu Sahibi

quote:

Orijinalden alıntı: zekaigulin

merhabahttp://kursiyernet.meb.gov.tr/ deki html 5 bolumun deki section dersini izlemenizi tavsiye ederim

Cevap için teşekkür ederim fakat videoyu izledim ama ekran çözünürlüğünü nasıl sabitleyeceğim hakkında bir fikir alamadım,bu videodan almam gereken mesaj nedir?

Bu mesaja 1 cevap geldi.

Guest-E90F2B1F7

11 yıl

Yüzbaşı

ben tasarımdan pek anlamam bugun o video dinler iken sabitleme vs diyordu o geldi aklıma o yuzden size tavsiye ettim

Bu mesajda bahsedilenler: @TarafsızSözel

nihattr

11 yıl

Yarbay

Genişlik olarak 1400px'i %100 kabul ederek diğer genişlikleri 1400px'e göre % olarak yazarsan belki olabilir. Ancak, resimler kayabilir de.

Masaüstü için hala standart 1024x768 gözüküyor. Keşke öyle yapsaydınız. Aynısının 1024px genişliğini yaparsanız javascript ile yönlendirme yapmak kolay.

< Bu ileti tablet sürüm kullanılarak atıldı >

okan yıldız

11 yıl

Yüzbaşı

Siteyi ekranı ful kaplıcak şekilde değilde ekranın tam ortasında %75 genişlikleri tasarlarsan
Ve herşeyi ona göre ayarlarsan hiçbir sorun olmaz her çözünürlükrte ekranın ortasında ve %75 genişlikleri durur

< Bu ileti mobil sürüm kullanılarak atıldı > Bu mesaja 1 cevap geldi.

TarafsızSözel

11 yıl

Onbaşı

Konu Sahibi

Konuyu çözdüm arkadaşlar teşekkür ederim.

Nasıl çözdün diye soran arkadaşlar için anlatayım ;

Farklı farklı yani ayrı olan tabloları tek bir tablo gibi birleştirdim ve width ve height değerlerini % olarak verdim herkeste aynı duruyor.

Bu mesaja 1 cevap geldi.

converttoint32

11 yıl

Yüzbaşı

quote:

Orijinalden alıntı: TarafsızSözel

Konuyu çözdüm arkadaşlar teşekkür ederim.

Nasıl çözdün diye soran arkadaşlar için anlatayım ;

Farklı farklı yani ayrı olan tabloları tek bir tablo gibi birleştirdim ve width ve height değerlerini % olarak verdim herkeste aynı duruyor.

Merhaba sizin ypmak istediğiniz işlemin sektördeki adı resposive tasarımdır aslında bir web sitesinin her ekranda aynı gözükmesi doğru değildir önemli olan her ekranda kolay kullanılabilmesidir şu anki sorununuzu çözmüşsün ancak bundan sonraki tasarımlarınızda bootstrap kütüphanesini kullanmanızı tavsiye ederim.

http://getbootstrap.com/

Cevap Yaz

1. sayfa

Tüm Forumlar Web Tasarım - Programlama Yazılım Geliştirme PHP / CGI Her Ekran Çözünürlüğünde Sitenin aynı gözükmesi..Yardım Lütfen.