CSS Layout - R10.net

11-02-2008, 18:20:36

Siteye Css ile yapmaya karar verdikten sonra böyle bir örnek buldum fakat ;

-Left Column ve Right Column ları üste kadar uzatmak istiyorum.
-Birde demodaki görülen yazıların yerine saga dayalı,sola dayalı yazılar,<h1>taglı yazılar,link ve resim koymak istiyorum.(Örnek olarak sunarsanız sevinirim.)

Buldugum sitedeki örnek;Demo

Bunlarda kodları

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.5- (Fluid-Fluid-Fixed)</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
background: #EAEAEA;
height: 90px; 
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#contentwrapper{
float: left;
width: 100%;
margin-left: -180px; 
}
#contentcolumn{
margin: 0 20% 0 180px 
}
#leftcolumn{
float: left;
width: 20%; 
margin-left: -20%; 
background: #C8FC98;
}
#rightcolumn{
float: left;
width: 180px; 
background: #FDE95E;
}
#footer{
clear: left;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{
color: #FFFF80;
}
.innertube{
margin: 10px; 
margin-top: 0;
}
</style>
<script type="text/javascript">
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.5- (Fluid-Fluid-Fixed)</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>180px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
</div>
</body>
</html>

Bu kodları yukarda belirtigim gibi nasıl editleyebilirim arkadaslar?

12-02-2008, 00:04:30

#2

~~Captive~~

Üyeliği durduruldu

Orda değişken falan yok sadece metinleri döngüyle çoğaltmış örnek olsun diye.

Photoshop da web sayfasının görüntüsünü al ve sayfayı içeren kısmı kes hizalarından. Sonra Image menüsünden dökümanın en boy rakamlarına bak. Ordaki px değeri %100 demektir (en geniş halini kestiysen tabii) Sende gerisini oranlayarak yaparsın.

13-02-2008, 21:30:42

#3

Mtnn

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

Orda değişken falan yok sadece metinleri döngüyle çoğaltmış örnek olsun diye.
Photoshop da web sayfasının görüntüsünü al ve sayfayı içeren kısmı kes hizalarından. Sonra Image menüsünden dökümanın en boy rakamlarına bak. Ordaki px değeri %100 demektir (en geniş halini kestiysen tabii) Sende gerisini oranlayarak yaparsın.

Yorumun için tesekkür ederim fakat;
Ben Photoshop kullanmayı bilmiyorum ve css tasarımına da dreamweaver'da devam ediyorum.(cok ileri bi düzeyde degil tabi halen yardımlara acıgım

).Yüzde hesabı icin dreamweaver da bi fonksiyon zaten varmıs.Yazımdaki degişken ifadeside yanlıs bir ifade olmus.Bi javascriptle döndürmüsler metinleri..

02-04-2008, 18:43:58

#4

Mtnn

Arkadaslar soruna halen bir cevap bulamadık.Yardımlarınıza acıgız

03-04-2008, 19:22:41

#5

Kurtaran

Kodda aşağıdaki görünen yerlerdeki kırmızı yazılı yerleri ekle, Right ve left column lar yukarıya kadar uzansın

#leftcolumn{
float: left;
width: 20%; 
margin-left: -20%; 
background: #C8FC98;
margin-top: -90px;
}
#rightcolumn{
float: left;
width: 180px; 
background: #FDE95E;
margin-top: -90px;
}

03-04-2008, 20:04:53

#6

Mtnn

Hocam 200+ kisinin bakıp gectigi konuya cevabınız adına gercekten tesekkür ederim.Verdiginiz kodlar işe yarıyor

Fakat biz biraz istegimizi degistirdik asagıdaki gibi bir layout düsünüyoruz.(sekil temsili tam oranlar degil..)

Hazır bir layout ta olabilir.Fakat bizim kaynak bilgimiz az bir türlü is yapabilecek birseyler bulamadık...

03-04-2008, 21:51:07

#7

Kurtaran

tam istediğinizi anlayamasamda şöyle bişey olabilir belki diye düşündüm ...

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Dynamic Drive: CSS Liquid Layout #3.5- (Fluid-Fluid-Fixed)</title>
<style type="text/css">
body{
margin:0;
padding:0;
line-height: 1.5em;
}
b{font-size: 110%;}
em{color: red;}
#topsection{
  width:600px;
background: #EAEAEA;
height: 90px;
}
#topsection h1{
margin: 0;
padding-top: 15px;
}
#maincontainer{

  width:100%;

}
#contentwrapper{
margin-top:-90px;
float: right;
width: 200px;

}
#contentcolumn{
margin: 0 20px 0 0px
}
#leftcolumn{

width: 600px;
background: #C8FC98;
}
#rightcolumn{

width: 600px;
background: #FDE95E;

}
#footer{
clear: both;
width: 100%;
background: black;
color: #FFF;
text-align: center;
padding: 4px 0;
}
#footer a{


color: #FFFF80;
}
.innertube{
margin: 10px;
margin-top: 0;
}
</style>
<script type="text/javascript">
var gibberish=["This is just some filler text", "Welcome to Dynamic Drive CSS Library", "Demo content nothing to read here"]
function filltext(words){
for (var i=0; i<words; i++)
document.write(gibberish[Math.floor(Math.random()*3)]+" ")
}
</script>
</head>
<body>
<div id="maincontainer">
<div id="topsection"><div class="innertube"><h1>CSS Liquid Layout #3.5- (Fluid-Fluid-Fixed)</h1></div></div>
<div id="contentwrapper">
<div id="contentcolumn">
<div class="innertube"><b>Content Column: <em>Fluid</em></b> <script type="text/javascript">filltext(45)</script></div>
</div>
</div>
<div id="leftcolumn">
<div class="innertube"><b>Left Column: <em>20%</em></b> <script type="text/javascript">filltext(20)</script></div>
</div>
<div id="rightcolumn">
<div class="innertube"><b>Right Column: <em>180px</em></b> <script type="text/javascript">filltext(15)</script></div>
</div>
<div id="footer"><a href="http://www.dynamicdrive.com/style/">Dynamic Drive CSS Library</a></div>
</div>
</body>
</html>

03-04-2008, 22:13:11

#8

Mtnn

Hocam gercekten ugrasıyorsunuz tesekkür ederim size.

Tam olarak yapmak istedigim sudur aslında..

Ama hocam bu kadar direk hazıra konmak olur varsa okumamı tavsiye ettiniginiz bir makele siz onu gösterin.Yeniden tesekkürler.