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 : )
Soru hatalı mı? 👎
Eğer sorunun kurallara aykırı olduğunu düşünüyorsanız lütfen bize bildirin!
Cevaplar (4)
@tayfunerbilen yanıtınız için teşekkür ederim. normal bir davranış olduğunun tabiki farkındayım. overflow hidden vermeme rağmen, içerisinde absolute ile serbest kalmış ve negatif değerlerle hizalanmış elemanlar çalışıyor; file elemanını absolute değeri verdiğimde. aslında kodlar çok temiz ve anlaşılır idi, ama elementlerin tamamını javascript ile oluşturduğumdan, gerekli alanları kopyalayıp yapıştırınca böyle çirkin bir görünüm oldu. teknik olarak sizi çok net anlıyorum. tooltip için dediğiniz gibi, imleç üzerinde iken değer ataması yapıyor ve değilken değerleri temizliyorum.
this.returnTree = function(data){
let ftp = atob(data[0]);
let design = data[1];
let dTriger = [ {event: "click", id: ".FileInfos"}, {event: "mouseenter", id: ".item-hints"} ];
$('#dizintool').html('');
$('#dizintool').append(ftp);
$('.hidefolder ul li ul').hide();
$('.ExpansionElement').on('click',function(){
design == 0 ?
$(this).next('sup').next('.CollapseElement').slideToggle() :
$(this).next('ul').slideToggle();
$(this).find('i').toggleClass('fa-folder-open fa-folder');
});
$(dTriger[design]['id']).on(dTriger[design]['event'], function(){
let supDizin = function(value){return value.length > 30 ? '...'+value.substr(value.length-27, 27) : value;}
let clickE = $(this).attr('data-id') == 1 ? "file" : "span";
let bilgiler = ['ad', 'atime', 'mtime', 'ctime', 'tip', 'boyut', 'izin', 'dizin'];
let hanimiselement = design == 0 ? $(this).prev(clickE) : $(this);
let aciklamalar = [];
for (let bilgi of bilgiler)
aciklamalar[bilgi] = hanimiselement.attr('data-'+bilgi);
let aciklama = `name: ${aciklamalar["ad"]}<br>
dir: ${supDizin(aciklamalar["dizin"])}<br>
atime: ${aciklamalar["atime"]}<br>
mtime: ${aciklamalar["mtime"]}<br>
ctime: ${aciklamalar["ctime"]}<br>
filetype: ${aciklamalar["tip"]}<br>
filesize: ${aciklamalar["boyut"]}<br>
chmod: ${aciklamalar["izin"]}<br>`;
$(this).find('.FileInfo').html().length == 0 ?
$(this).find('.FileInfo').html(aciklama) :
(design == 0 ? $(this).find('.FileInfo').html('') :
$(this).mouseleave(function(){$(this).find('.FileInfo').html('')}));
design == 0 ? $(this).find('.FileInfo').slideToggle() : false;
});
}
bir miktar karmaşık bir kodlama gibi göze çarpabilir ama, 2 kez method yazmaktansa 2 farklı tasarım için az koşulla daha kısa tek bir method yaazmayı daha mantıklı buldum.
son olarak dediğiniz şekilde body de tek bir tooltip bırakıp, bunun üzerinden veri göstermeyi denedim. programlama kısmında hiçbir sorun yok, ama istediğim tasarımı nasıl uygulayacağımı bilemiyorum.
en yalın haliyle sadece tooltip için kullandığım tasarım.
<div style="margin:40%">
<folder data-position="4"> Klasör
<div class="file-content">
merhaba dünya
</div>
</folder>
</div>
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;
}
body içinde herhangi bir yere aldığımda, nasıl pozisyon aldıracağımı bilemiyorum. element içindeyken doğrudan ona göre konumlanıyor.
aslında bu normal bir davranış, overflow: hidden ya da auto dendiğinde otomatik olarak gizleniyor içindeki elemanlar.
bu gibi durumlar için tooltip bunun içinde değilde bağımsız olarak body'nin içinde yer alan bir alanda olmalı.
fare ile ilgili elemana gelince farenin konumu (top, left) alınıp body'deki tooltip'e anlık olarak atanmalı.
ayrıca yine fare üstündeyken global bir değişkene tooltip'te görünecek değerler belirlenmeli, fare odağını çekince bu işlemleri sıfırlamalısın.
kodlar temiz olsa bir örnek verecektim ama belki bu teorik detay bir şeyleri farklı düşünmeni sağlayabilir.