Okyanusu geçip derede boğulmak (CSS)
Merhaba,
cpanel de bulunan dosya yöneticisine benzer bir yapı kurmaya çalışıyorum. ama css tarafında bir sorun yaşıyorum. yüzlerce satır yazdıktan sonra, aşırı moralim bozuldu. gerçekten çok uğraştım ve css de saçımı başımı yolmak üzereyim, 394 satır sadece php de ana sınıf için kod yazdım, javascript ile hala kodluyorum. ama bir position paradoksunda sıkışıp kaldım. normalde https://prnt.sc/8k2SfH5fBCIR resimdeki gibi bir görünüm almam gerekiyor. ancak kapsayıcıda yüksekliği sabitleyip overflow verdiğimizde, absolute poziyona sahip elemanlar görünmemekte, özellikle negatif değerlere sahiplerse, pozitif değerlerin dışına çıkamamaktalar. kapsayıcı relative bildirip, daha sonra gerekli kısmı absoulte bildirmeme rağmen, nafile.
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
/* FTP BAŞLANGIÇ */
/* FTP TASARIM 1 BAŞLANGIÇ */
.tree {
position: relative;
font-family: "Roboto Mono", monospace;
font-size: 0.85rem;
font-weight: 400;
line-height: 1.5;
color: red;
cursor: default;
}
.tree span {
font-size: 13px;
font-style: italic;
letter-spacing: 0.4px;
color: red;
vertical-align: text-bottom;
-webkit-user-modify: read-write-plaintext-only;
user-modify: read-write-plaintext-only;
}
.tree .fa-folder-open, .tree .fa-folder {
color: red;
}
.tree ul {
padding-left: 5px;
list-style: none;
}
.tree ul li {
position: relative;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.tree ul li:before {
position: absolute;
top: 15px;
left: 0;
width: 10px;
height: 1px;
margin: auto;
content: "";
background-color: red;
}
.tree ul li:after {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 1px;
height: 100%;
content: "";
background-color: red;
}
.tree ul li:last-child:after {
height: 15px;
}
.tree ul a {
cursor: pointer;
}
.tree ul a:hover {
text-decoration: none;
}
/* FTP TASARIM 1 İÇİN HOVER BİLGİ BAŞLANGIÇ */
file, folder {
position: relative;
}
.file-content, .file-content {
border-radius: 0% 30% 0% 30%;
-webkit-box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66);
box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66);
color: black;
text-align:justify;
background:radial-gradient(circle, rgba(255, 0, 0, 0) 0%, rgb(255, 0, 0) 50%, rgba(255, 0, 0, 0.33) 100%);
width: 300px;
position: absolute;
z-index: 5;
padding: 0px 15px 0px 15px;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 3s ease, visibility 3s ease;
transition: opacity 3s ease, visibility 3s ease;
pointer-events: none;
visibility: shidden;
pointer-events: none;
}
file:hover .file-content, folder:hover .file-content {
border-radius: 0% 30% 0% 30%;
-webkit-box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66);
box-shadow: 0px 0px 10px 7px rgba(255,0,0,0.66);
text-align:justify;
background:rgb(0 0 0 / 70%);
width: 300px;
position: absolute;
z-index: 5;
padding: 0px 15px 0px 15px;
opacity: 1;
visibility: visible !important;
-webkit-transition: opacity 3s ease, visibility 3s ease;
transition: opacity 3s ease, visibility 3s ease;
pointer-events: none;
color: red;
visibility: hidden;
pointer-events: none;
}
.file-content::before, .file-content::before {
width: 0;
bottom: 0;
right: 0;
content: "";
background-color: red;
height: 1px;
position: absolute;
}
file:hover .file-content::before, folder:hover .file-content::before {
width: 280px;
transition: width 3s;
}
.file-content::after, .file-content::after {
width: 0px;
bottom: -56px;
left: 386px; /*357 uyumsuz nokta*/
content: "";
background-color: red;
height: 1px;
position: absolute;
-webkit-transform-origin: 0 50%;
transform-origin: 0 50%;
-webkit-transform: rotate(225deg);
transform: rotate(225deg);
}
file:hover .file-content::after, folder:hover .file-content::after {
width: 80px;
transition: width 0.5s;
}
file[data-position="4"] .file-content, folder[data-position="4"] .file-content {
bottom: 65px;
left: -383px;
}
/* FTP TASARIM 1 İÇİN HOVER BİLGİ BİTİŞ */
/* FTP TASARIM 1 BİTİŞ */
.ekran2{
height: 600px;
max-height: 600px;
/*overflow-y: scroll;
overflow-x: hidden;*/
overflow-wrap: break-word;
margin-left: 20px;
margin-top: 75px;
border-top: solid 2px red;
border-bottom: solid 2px red;
border-image: linear-gradient(to right,transparent,rgba(255,0,0,.3) ,red,rgba(255,0,0,.3) ,transparent) 11;
/*
background: #000;
color: red;
max-width: 100%;
padding-right: 15px;
padding-left: 15px;
*/
}
</style>
</head><body>
<main role="main" class="container-fluid">
<div class="row mt-5 justify-content-center">
<div class="col-sm-7 kenar2 mt-5" id="scroll">
</div>
<div class="col-sm-4 ekran2 tab-content" id="scroll2" style="position: unset;">
<div class="tab-pane fade show active" id="dizintool" role="tabpanel" aria-labelledby="dizintool-tab">
<div class="tree hidefolder"><h3>Core/Classes</h3><ul><li><span class="item-hints ExpansionElement" data-ad="SubControl" data-atime="17.04.2022 22:42:16" data-mtime="12.04.2022 11:43:53" data-ctime="12.04.2022 11:43:53" data-tip="directory" data-boyut="0 Byte" data-izin="0777" data-dizin="C:/xampp/htdocs/Core/Classes/SubControl" data-id="0"><i class="fa fa-folder"></i><folder data-position="4"> SubControl<div class="file-content"><p class="FileInfo" style="padding: 0px 15px 15px 0px"></p></div></folder></span><ul style="display: none;"></ul></li><li><span class="item-hints ExpansionElement" data-ad="SubModel" data-atime="17.04.2022 22:42:16" data-mtime="12.04.2022 11:44:16" data-ctime="12.04.2022 11:43:47" data-tip="directory" data-boyut="843 Byte" data-izin="0777" data-dizin="C:/xampp/htdocs/Core/Classes/SubModel" data-id="0"><i class="fa fa-folder"></i><folder data-position="4"> SubModel<div class="file-content"><p class="FileInfo" style="padding: 0px 15px 15px 0px"></div></folder></span><ul style="display: none;"><li class="item-hints" data-ad="OturumuGuncelle.php" data-atime="17.04.2022 22:25:44" data-mtime="13.04.2022 05:19:13" data-ctime="11.04.2022 15:43:28" data-tip="text/x-php" data-boyut="423 Byte" data-izin="0666" data-dizin="C:/xampp/htdocs/Core/Classes/SubModel/OturumuGuncelle.php" data-id="1"><file data-position="4"><i class="fab fa-php"></i> OturumuGuncelle.php<div class="file-content"><p class="FileInfo" style="padding: 0px 15px 15px 0px"></p></div></file></li><li class="item-hints" data-ad="OturumuKaydet.php" data-atime="17.04.2022 22:25:44" data-mtime="13.04.2022 05:18:36" data-ctime="11.04.2022 16:03:09" data-tip="text/x-php" data-boyut="420 Byte" data-izin="0666" data-dizin="C:/xampp/htdocs/Core/Classes/SubModel/OturumuKaydet.php" data-id="1"><file data-position="4"><i class="fab fa-php"></i> OturumuKaydet.php<div class="file-content"><p class="FileInfo" style="padding: 0px 15px 15px 0px"></p></div></file></li></ul></li></ul></div>
</div>
</div>
</div>
</main>
</body></html>
yukarıda sadece gerekli alan için kodlar mevcut. bağımlılıklarınıda cdn üzerinden ekledim, çalışır durumda yani. sorun ekran2 divinin içerisindeki overflow.o varken absoulte div görünmemekte hidden veya auto olması önemli değil.
file, folder {
position: relative;
}
burayı absolute yaptığımda ise, ekran2'nin overflow olup olmaması önemli değil, ancak bu seferde
.tree{}
.tree ul li{}
relative olduğu için, ilk duruma geri dönüyoruz. kısacası bir position paradoksu yaşıyorum. normalde standartlara uygun relative içerisinde absolute, ama çözemedim.
sadece havalı bir tooltip istemiştim : )