Yazıcı çıktı sayfa düzeni (YARDIM)

12-11-2020, 22:42:01

Üyeliği durduruldu

merhaba arkadaşlar,
kendi imkanlarım ile öğrendiğim html, css biraz php bilgim ile birşeylr yapmaya çalışıyorum,
şimdi html bir sayfa var ve ctrl+p ile a4 boyutu ekrana basıldığında şöyle bir görüntü olsun istiyorum

1 nolu blok en üste, 2 nolu blok'ta en altta dayalı olacak,
1 nolu blok height değeri değişken bu 500px de olabilir 100px de ama üste dayalı olacak, 2 nolu blokta aynı şekilde height değeri değişken 200px olur 600px olur ama her zaman en altta dayalı olacak.

1 ve 2 nolu bloklara css ile margin bottom yada top değeri vererek malesef olmuyor çünki height değeri hep değişeceği için bu sefer 2 nolu blok diğer sayfaya geçiyor 2 sayfa çıktı görünüyor

bilgisi olan yada yardım etmek isteyenlerin cevaplarını beklemekteyim..

12-11-2020, 22:51:49

#2

sertacdincer

Css flex align items ile yapabilirsiniz.
Edit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ burdan flexe bakabilirsiniz.

12-11-2020, 22:54:22

#3

~~haticetulkubra~~

Üyeliği durduruldu

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

Css flex align items ile yapabilirsiniz.
Edit: https://css-tricks.com/snippets/css/a-guide-to-flexbox/ burdan flexe bakabilirsiniz.

o nedir sertaç bey

kendi imkanlarımdan kastım anca yeni yeni birşeyler öğreniyorum demek oluyor da

bana kısaca şöyle bir örnekleme lazım aslında yoksa yapabilmem imkansız gibi vede anlamam

<style>
css kodları
</style>
<div class="sayfa-ust">
BLOK 1
</div>

<div class="sayfa-alt">
BLOK 12
</div>

12-11-2020, 22:59:41

#4

sertacdincer

Css'in biraz ileri konularından diyelim

Temel şeyleri öğrendikten sonra mutlaka bakın. Klasik metodla yapmanın yolunu hatırlarsam yazarım tekrardan. Kolay gelsin

17-11-2020, 11:47:06

#5

~~haticetulkubra~~

Üyeliği durduruldu

sanırım yapamıcam :/

17-11-2020, 12:31:14

#6

sertacdincer

<head>        
<style>       
.page {            
height: 297mm;            
width: 210mm;            
display: flex;            
flex-direction: column;
}
.ust {
min-height: 10vh;            
display: flex;            
flex-direction: column;           
justify-content: center;          
align-items: center;     
background-color: red;
}
.alt {           
min-height: 15vh;            
display: flex;           
flex-direction: column;            
justify-content: center;            
align-items: center;            
margin-top: auto;            
background-color: blue;       
}
.icerik {            
display: flex;          
flex-direction: column;      
}    
</style>
</head>
<body>
<div class="page">    
<div class="ust"></div>    
<div class="icerik"></div>    
<div class="alt"></div>
</div>

Flex ile şöyle bir örnek yaptım. page sınıfınının boyutlarına a4 boyutlarını girdim.

17-11-2020, 22:17:43

#7

~~haticetulkubra~~

Üyeliği durduruldu

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

<head>        
<style>      
.page {            
height: 297mm;            
width: 210mm;            
display: flex;            
flex-direction: column;
}
.ust {
min-height: 10vh;            
display: flex;            
flex-direction: column;          
justify-content: center;          
align-items: center;    
background-color: red;
}
.alt {          
min-height: 15vh;            
display: flex;          
flex-direction: column;            
justify-content: center;            
align-items: center;            
margin-top: auto;            
background-color: blue;      
}
.icerik {            
display: flex;          
flex-direction: column;      
}    
</style>
</head>
<body>
<div class="page">    
<div class="ust"></div>    
<div class="icerik"></div>    
<div class="alt"></div>
</div>

Flex ile şöyle bir örnek yaptım. page sınıfınının boyutlarına a4 boyutlarını girdim.

tam olarak işimi gördü sertaç bey çok teşekkür ediyorum..