Çözüldü CSS div içerisindeki divlerin taşması nasıl sağlanır?

Egid Dikmen · 7 Ağustos 2023

Merhaba kendi portfolyo web sitemi yapıyorum ve navigate olarak bir direk yapıp yol yönüymüş gibi göstermek istiyorum ancak direğin tam ortasına koymak istediğim diktörtgeni ortalamak isterken bunu yapamıyorum. Margin left verirsem sağa doğru diktörtgen ilerliyor ancak ne yaparsam yapayım sola doğru ilerlemiyor direğin sol kenarını geçmiyor. Position absolute, relative, fixed gibi her yolu denedim ancak beceremedim. Resimdeki direğin içindeki dikdörtgeni ortalamak istiyorum.
Not: O dikdörtgen, direk classının içerisinde.

sancarsavas · 7 Ağustos 2023

Marginler ile değil de display:flex yapısını ve justify-content, align-items yapılarını araştırabilirsiniz. Onlarla işinizi çözebilirsiniz belki

delikarga · 7 Ağustos 2023

Absoulte pozisyon verip right parametresiyle denediniz mi? (direği relative pozisyon yapmayı unutma)

Nizel G · 7 Ağustos 2023

Codepen'e yükleyebilir misiniz?

Egid Dikmen · 8 Ağustos 2023

sancarsavas dedi:
Marginler ile değil de display:flex yapısını ve justify-content, align-items yapılarını araştırabilirsiniz. Onlarla işinizi çözebilirsiniz belki

Denedim hocam da kıpırdamadı yerinden.

delikarga dedi:
Absoulte pozisyon verip right parametresiyle denediniz mi? (direği relative pozisyon yapmayı unutma)

Hocam onu da denedim olmadı.

Nizel G dedi:
Codepen'e yükleyebilir misiniz?

Hocam merhabalar codepen nasıl kullanıldığını bilmediğim için buraya bıraksam olur mu?

HTML:

<!DOCTYPE html>
<html>
    
<head>
    <title>Ferhat DIKMEN</title>
    <meta name="author" content="Ferhat DIKMEN">
    <meta name="keywords" content="Ferhat , Dikmen , DIKMEN , Ferhat Dikmen , Portfolio , Portfoy">
    <meta name="description" content="Ferhat Dikmen's personal portfolio website">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859">
    <meta http-equiv="content-language" content="tr">
    <meta http-equiv="refresh" content="180">
    <link rel="stylesheet" href="css/anasayfa.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
    
<!--yonlendirme navigate agacinin divi-->
<!--#494BD9 baslik(degisti)-->
<!--#FFF3EE arkaplan 1(degisti)-->

<!--Soldan sağa doğru kayan hoşgeldin tabelası (17 Dil)-->
<marquee direction=right behavior="scroll" bgColor="#EB5800" id="akan_yazi">خواهش میکنم&nbsp;&nbsp;&nbsp;&nbsp;Willkommen&nbsp;&nbsp;أهلا وسهلا بكم&nbsp;&nbsp;&nbsp;&nbsp;   
Добро пожаловать&nbsp;&nbsp;&nbsp;&nbsp;Hoşgeldiniz&nbsp;&nbsp;&nbsp;&nbsp;Bienvenido&nbsp;&nbsp;&nbsp;&nbsp;不客气
&nbsp;&nbsp;&nbsp;&nbsp;Accueillir&nbsp;&nbsp;&nbsp;&nbsp;Welkom&nbsp;&nbsp;&nbsp;&nbsp;Benvenuto
&nbsp;&nbsp;&nbsp;&nbsp;Xêr Hatin&nbsp;&nbsp;&nbsp;&nbsp;Bem-vindo&nbsp;&nbsp;&nbsp;&nbsp;Nemáš Zač&nbsp;&nbsp;&nbsp;&nbsp; 
Zapraszamy&nbsp;&nbsp;&nbsp;&nbsp;ようこそ&nbsp;&nbsp;&nbsp;&nbsp;आपका स्वागत है&nbsp;&nbsp;&nbsp;&nbsp;Welcome
</marquee>

<!--Sitenin sol üstü. Emoji ve yanında adımın yazdığı başlık kısmı-->
<div id="karsilama">
    <img id="baslik_resmi" src="images/emo5.png" >
    <div id="kukla"></div>
    <h1 id="baslik">Ferhat DIKMEN</h1>
</div>

<!--Başlığın altındaki Hoşgeldiniz yazısı ve altındaki siteyi ve kendimi özet geçtiğim yazı-->
<div id="karsilama_yazi">
    <h1 id="karsilama_yazi_baslik">Websiteme Hoşgeldiniz!</h1>
    
    <p id="karsilama_yazi_paragraf">Ben Ferhat Dikmen , bu websitesini Mayıs-Ağustos 2023 aralığındaki stajımda
    yapıyorum. Amacım hem Web alanındaki stajımı ilerletirken hem de stajdan daha çok verim alabilmek ve aynı
    zamanda da ileriki hayatımda da kullanabilmemdir.
    <br><br>
    18 Kasım 2002 yılında Bitlis'in Tatvan ilçesinde doğdum ve 17 yaşıma kadar orada yaşadım. 2020 yılının ağustos
    ayında eğitim ve ailesel nedenlerden dolayı Mersin'e taşındım ve halen yaşamımı burada sürdürmekteyim. Ağustos 2023
    itibarıyla Toros Üniversitesi Bilgisayar Programcılığı bölümünden mezun oldum.   


</p>
</div>







<div id="degerlendirme">
<h3 id="degerlendirme_mesaj">Websitemi nasıl buldunuz?</h3>

<div id="butonlar">
<button id="buton_olumlu">beğendim</button>
<button id="buton_olumsuz">eksik var</button>
</div>

</div>






<div class="tabela"><!--tabela AC-->

    <div class="direk"><!--direk AC-->

        <div class="tabela_anasayfa"></div>






    </div><!--direk KAPAT-->

</div><!--tabela KAPAT-->



















<!--Dışarıdan Alınan Navigate Direği (Kullanım Dışı)-->
<!--
<div class="navigate">

<div id="direk">

<div id="right">
<a class="sign-link" href="anasayfa.html">Anasayfa</a>
<div id="right-arrow"></div>

</div>
<div id="left">
<a class="sign-link" href="#" onclick="goBack()">Geri</a>     
<div id="left-arrow"></div>

</div>
</div>
</div>
-->



</body>   
</html>

CSS:

body{
background-color: #FFE6D7;
font-family:     'arciform',monospace;
margin: 0;
padding: 0;
}

*{
box-sizing: border-box;

font-family:     'arciform',monospace;

}

#akan_yazi{
color: white;
height: 35px;
text-align: center;
font-weight: bold;
padding-top: 5px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#akan_yazi:hover{
color: #EB5800;
background-color: white;
font-weight: bolder;
border-bottom: 2px solid #EB5800;
border-top: 2px solid #EB5800;
}

#karsilama{
height:164px ;
width:900px ;
display: flex;
margin-top:25px ;
margin-left: 70px;
position: absolute;

}

#karsilama_yazi{
height: 400px;
width: 900px;
margin-top: 250px;
margin-left: 70px;
border: 6px solid #EB5800;
border-radius:60px ;
position: absolute;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#karsilama_yazi_baslik{
color: #EB5800;
font-size: 40px;
width:800px ;
margin-left: 50px;
margin-top: 10px;
position: absolute;

}
#karsilama_yazi_paragraf{
width:800px ;
height: 320px;
margin-left: 50px;
margin-top: 60px;
font-size: 24px;
position: absolute;
}

#kukla{
margin-top: 56px;
margin-left: 23px;
height: 100px;
width: 100px;
border-radius: 90px;
position: absolute;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#baslik_resmi{
height:164px ;
width:147px ;

}
#baslik{
color: #EB5800;
width:700px ;
height: 95px;
padding-left: 30px;
font-size: 80px;
margin-left:2px ;
margin-top: 42px;
text-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

#degerlendirme{
align-items: center;

margin-top: 700px;
margin-left: 70px;
position: absolute;
border: 6px solid #EB5800;
border-radius: 60px ;
width: 900px;
height: 100px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#degerlendirme_mesaj{
font-size:30px;
color: #EB5800 ;
padding-top:15px;
padding-left: 30px;
width: 470px;
height: 73px;
margin: 0;
margin-left: 20px;
margin-top: 7px;

position: absolute;

}

#butonlar{
padding-top: 13px;
align-items: center;
text-align: center;
width: 350px;
height: 78px;
margin-left: 510px;
margin-top: 5px;


}
#buton_olumlu{
font-size: 20px;
height:50px ;
width:160px ;
color: white;
background-color: #EB5800;
border: 3px solid #EB5800;
border-top-left-radius: 60px;
border-bottom-left-radius: 60px;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
#buton_olumsuz{
font-size: 20px;
height:50px ;
width:160px ;
color: white;
background-color: #EB5800;
border: 3px solid #EB5800;
border-top-right-radius: 60px;
border-bottom-right-radius:60px ;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

#buton_olumsuz:hover  {
color:red ;
background-color: white;
border: 4px solid red;
font-weight: bolder;
}
#buton_olumlu:hover{
color: rgb(11, 201, 11);
background-color: white;
border: 4px solid rgb(11, 201, 11);
font-weight: bolder;
}


/*                  TABELA BOLUMU                   */

.tabela{
height:800px ;
width:800px ;
position: absolute;
border: 2px solid black;
margin-left:1050px ;
margin-top: 100px;
}

.direk{
height:800px ;
width: 50px;
color: #EB5800;
background-color: #EB5800;
margin-left: 400px;
position: absolute;
/*Uçgen Direk Tepesi*/
border-top: 50px solid #FFE6D7;
border-right: 50px solid transparent;



}

.tabela_anasayfa{
height:50px ;
width:100px ;

border: 2px solid black;
position: absolute;
margin-top: 30px;
margin-right: 100px;
justify-content: center;
color: white;
background-color: #EB5800;


}



























































/*
.navigate{
height: 750px;
width: 750px;
margin-left:1000px;
margin-top: 50px;
padding: auto;

}

.sign-link{
text-decoration: none;
color: white;
font-family:  'arciform',monospace;
}
 
 
#direk{
margin: auto;
border-radius: 1vw 1vw 0 0; 
height: 80vh;
width: 5.5vw;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
transform: translateY(160px);
min-width: 45px;
background-color: #EB5800;
font-size: 1.5em;   
@media (max-height: 400px){
transform: unset;
height: 400px;
}
  }
 
#right{ 
height: 15.2vh;   
transform: translate(-40px, 50px);   
width: 24.5vw;
min-width: 200px;
background-color: crimson;
display: flex;
align-items: center;
justify-content: center;   
color: white;   
border-radius: 10px 50px 50px 10px;
border: 3px outset white;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
 
#left{
@media (min-width: 768px){
transform: translate(-13vw, 80px) ;
box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
perspective: 2000; 
transform: translate(-100px, 80px) ;
width: 26.9vw;
min-width: 200px;
height: 14.2vh;
min-height: 90px;
background-color: teal;
display: flex;
align-items: center;
justify-content: center;
color: white;
border-radius: 50px 10px 10px 50px;
border: 3px outset white;       
}

body, html{
height: 100%;
overflow: hidden;
}

*/

Düzeltme : https://codepen.io/Egid-Ferhat-Dikmen/pen/NWEmygG

Diego · 8 Ağustos 2023

Yanlış anlamadıysam,

.tabela_anasayfa da ki

margin-right: 100px; aşağıdakiyle değiştirin.

margin-left: -24px;

Egid Dikmen · 8 Ağustos 2023

Diego dedi:
Yanlış anlamadıysam,

.tabela_anasayfa da ki

margin-right: 100px; aşağıdakiyle değiştirin.

margin-left: -24px;

Oldu hocam çok teşekkürler yalnız şimdi kafam biraz karıştı bu 24 değeri nereden geldi bunu nasıl ortalayabilirim?

Diego · 8 Ağustos 2023

ortalama için kaç piksel sola gidilecekse gittim 24 te ortalı oldu?

Çözüldü CSS div içerisindeki divlerin taşması nasıl sağlanır?

Ayrıntılı düzenleme

Egid Dikmen

Hectopat

Diego

sancarsavas

Decapat

delikarga

Kilopat

Nizel G

Megapat

Egid Dikmen

Hectopat

Diego

Hectopat

Egid Dikmen

Hectopat

Diego

Hectopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz