HTML & CSS Çalışmam

Raibs · 27 Kas 2016

Merhaba ekranı 4 eş parçaya ayırmak istiyorum bunu görmek için border verdim ve ortada boşluk kalıyor with verdiğimde border aşağıya atlıyor ben birleşik olmasını istiyorum nasıl yapabilirim ?

HTML Kodlarım ;

Kod:

 <!DOCTYPE html>
<html lang="en">
<head>
	<**** charset="UTF-8">
	<title>Barış Yıldızoğlu</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div class="sol-ust">
		<p>Sol-Üst</p>
	</div>
	<div class="sag-ust">
		<p>Sağ-Üst</p>
	</div>
	<div class="sol-alt">
		<p>Sol-Alt</p>
	</div>
	<div class="sag-alt">
		<p>Sağ-Alt</p>
	</div>
</body>
</html>

CSS Kodlarım ;

Kod:

* {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	list-style:none;
	list-style-type:none;
	text-decoration:none;
}
.sol-ust {
	float: left;
	width: 671px;
	height: 315px;
	border: 2px solid black;
}
.sag-ust {
	float: right;
	width: 670px;
	height: 315px;
    border: 2px solid black;
}
.sol-alt {
	float: left;
	width: 671px;
	height: 315px;
    border: 2px solid black;
}
.sag-alt {
	float: right;
	width: 670px;
	height: 315px;
    border: 2px solid black;
}

IMP4L4 · 27 Kas 2016

- Yardım Merkezine açılması gerekmiyormuydu ?

Raibs · 27 Kas 2016

Konuyu yanlış yere açtıysam özür dilerim o konularda biraz cahilim

n3pix · 27 Kas 2016

Merhaba hocam,
Divleri göreceli ölçeklerde yani piksel vb. ile boyutlandırmaniz; Projenizin her cozunurluklu ekranlarda aynı cikitiyi vermesini engeller. Konu hakkında ise konuşmak gerekir ise. Ekranı 4 eş parçaya bölmek istiyorsunuz. Bunu sadece HTML'in frameset özelliğinden yararlanarak gayet basit şekilde halledebilirsiniz;

Kod:

<html>

<head>
    <title>BUYUR</title>
</head>

<frameset cols="50% , *" rows="50% , *">
    <frame name="isim" src="1. çerçeve link">
    <frame name="isim" src="2. çerçeve link">
    <frame name="isim" src="3. çerçeve link">
    <frame name="isim" src="4. çerçeve link">
</frameset>
</html>

<- İllaha Div derseniz; ->

Div için de 4 farklı div'e 49% width ve height verin. margin-left leri ise 0 yapın ve border da 0 yapabilirsiniz. Ama border 1 yapacaksanız, 48% width ve height verin derim. Çünkü istisnai olsa dahi kullanıcının her 1% si 1px olabileceğinden; 48+48+1+1=100 eder. 1+1 yani; her bordera...

Raibs · 27 Kas 2016

Div kullanma sebebim her kareye yazılar ve arkaplan resmi v.s yapıcam frameset tag'ında bunları nereye yazıcam acaba ?

ve divli dediğinizi anlamadım acaba kodları verirmisiniz ?

n3pix · 27 Kas 2016

Raibs' Alıntı:
Div kullanma sebebim her kareye yazılar ve arkaplan resmi v.s yapıcam frameset tag'ında bunları nereye yazıcam acaba ?

ve divli dediğinizi anlamadım acaba kodları verirmisiniz ?

Şöyle yapabilirsin divleri ile;

Kod:

tüm dinlerin width ve heighti 48% vey 49% olmalı cozujurkuk eşleşmesi için. Border aynı kalsin fark etmez. Ve float'lari left-left-left-left yapabilirsin karışıklığı önler. Şimdi tüm divleri aynı olacaktır;
div {
    width: 48%;
    height: 48%;
veya
    width: 49%;
    height: 49%;
    float: left;
    border-width: 2px veya x% cinsinden;
    border-style: solid;
    border-color: black;
}

Buyur

n3pix · 27 Kas 2016

Raibs' Alıntı:
Div kullanma sebebim her kareye yazılar ve arkaplan resmi v.s yapıcam frameset tag'ında bunları nereye yazıcam acaba ?

ve divli dediğinizi anlamadım acaba kodları verirmisiniz ?

Fazla kapsamlı yardımcı planlıyorum kusura bakma, mobideyim :/
Framesetlerdeki framelerdeki src kere farklı html sayfaları koyacaksınız; her html sayfası farklı olacagindan; 4 farklı sayfa ile 1 ana sayfada 4 farklı Sayfayı aynı genişlik ve yükseklikte düzenleyebilirsiniz.
HTML de Framset Kullanımını araştır derim...

Raibs · 27 Kas 2016

Hocam çok sağolasında dediğini yaptığımda sağdaki divde sağdan biraz boşluk kalıyor float: right; dediğimde ortada boşluk kalıyor bir türlü yapıştıramadım ya

Raibs · 27 Kas 2016

Hocam şöyle yaptım

div {
width: 50%;
height: 48%;
border: 0px solid black;
float: left;
}

Borderdeki dediğin gibi 1 px etkilendi ve alt satıra kayıyordu bu sefer 0 verdim ve düzeldi height 48 dediğimde yazdığım Test yazısında yapışık halen.

n3pix · 27 Kas 2016

Raibs' Alıntı:
Hocam çok sağolasında dediğini yaptığımda sağdaki divde sağdan biraz boşluk kalıyor float: right; dediğimde ortada boşluk kalıyor bir türlü yapıştıramadım ya

Border piksel olarak arttir diyeceğim ama; bu sefer de her bilgisayarda aynı goruntuyu alamayabilirsin. O nedenle şey yap; borderleri % cinsinden 1 veya 2 vererek dene. Yatay dusunursek; En tepede 1 adet yatay çubuk olacak ortada bir tane daha yatay çubuk olacak ve en altta yatay çubuk olacak. Yani 3 tane birdere %1 verirsen %3 border alan kaplar. Yani divin heightine çift değer girersen açık kalir. Ust işte olan ve yan yana olan dillerden biri 48% diğeri de 49% olmalı ki aralık veya boşluk kalmasın. Böyle dene bakalım, anlamazsam yazıyı defarlca oku anlarsin...

n3pix · 27 Kas 2016

Raibs' Alıntı:
Hocam şöyle yaptım

div {
width: 50%;
height: 48%;
border: 0px solid black;
float: left;
}

Borderdeki dediğin gibi 1 px etkilendi ve alt satıra kayıyordu bu sefer 0 verdim ve düzeldi height 48 dediğimde yazdığım Test yazısında yapışık halen.

Yazının kutu kenarına yapışması durumunu padding ler ile düzenleyebilirsin. Yazı genelde sola yatık olduğundan; padding-left: birim; ve sağdan da boşluk vermen daha güzel Goruntu verecektir paddibg-right: birim; dersin. letter-spacing: birim; ile de satın arası boşluğu düzenlersin

Alt ust padding-left de; padding-top: birim; - padding-bottom: birim;

BeoWulf007 · 27 Kas 2016

Baya uğraştım ancak bende beceremedim

çözünürlük çok sıkıntı Tek çözünürlüğe göre yapmak kolayda Her çözünürlükte aynı gözüken nasıl yapılır bilemedim çözersen banada at biraz inceleyiyim

Raibs · 28 Kas 2016

Tamam

Hacker Plague · 2 Ara 2016

Raibs' Alıntı:

Merhaba ekranı 4 eş parçaya ayırmak istiyorum bunu görmek için border verdim ve ortada boşluk kalıyor with verdiğimde border aşağıya atlıyor ben birleşik olmasını istiyorum nasıl yapabilirim ?

HTML Kodlarım ;

Kod:

 <!DOCTYPE html>
<html lang="en">
<head>
    <**** charset="UTF-8">
    <title>Barış Yıldızoğlu</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="sol-ust">
        <p>Sol-Üst</p>
    </div>
    <div class="sag-ust">
        <p>Sağ-Üst</p>
    </div>
    <div class="sol-alt">
        <p>Sol-Alt</p>
    </div>
    <div class="sag-alt">
        <p>Sağ-Alt</p>
    </div>
</body>
</html>

CSS Kodlarım ;

Kod:

* {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    list-style:none;
    list-style-type:none;
    text-decoration:none;
}
.sol-ust {
    float: left;
    width: 671px;
    height: 315px;
    border: 2px solid black;
}
.sag-ust {
    float: right;
    width: 670px;
    height: 315px;
    border: 2px solid black;
}
.sol-alt {
    float: left;
    width: 671px;
    height: 315px;
    border: 2px solid black;
}
.sag-alt {
    float: right;
    width: 670px;
    height: 315px;
    border: 2px solid black;
}

CSS deki width değerlerini

width: calc(50% - 4px);

olarak değiştirirsen her çönüzürlükte işe yarar.

HTML & CSS Çalışmam

Raibs

Üye

IMP4L4

Uzman üye

Raibs

Üye

n3pix

Uzman üye

Raibs

Üye

n3pix

Uzman üye

n3pix

Uzman üye

Raibs

Üye

Raibs

Üye

n3pix

Uzman üye

n3pix

Uzman üye

BeoWulf007

Kıdemli Üye

Raibs

Üye

Hacker Plague

Yeni üye

Sosyal medya sayfalarımız