HTML / CSS ჩაინიკური კითხვები

Roofus

მე პირადად phpstorm-ის მერე NPP-ზე დამბრუნებელი არ ვარ
მე ყვეას ვურჩევ
თუ php-ზე მუშაობთ phpstorm გამოიყენოთ
თუ ფრონტზე webstorm

დაისვენებთ ყველანაირი წინაღობებისგან

ერთადერთი მინუსი (თუ შეიძლება ჩაითვალოს მინუსად) ის არის რომ ჯავაზეა დაწერილი ეგ და მაგიტომ ცოტა მძიმეა ვინდოზავრისთვის...
ლინუქსზე დაფრინავს...

დანარჩენი
დამიჯერეთ ბევრად ნაკლებ დროს ვანდომებ ყვეაფერს...

Ruritania

მაინც ვერ გავიგე

ანუ წინასწარ გამზადებული შაბლონი რც შეგილი შენ პირად სტილს მოარგო?
* * *
Flexible Box რა პონტია, რაღაც ბოქსში შიგნით კიდე რო ბოქსები შექმნა და იმატი მდებარობეა და ზომები განსაზღვრო?

ლიფტის მოშორება მინდა ბრაუზერზე და სკროლი გაკეთდეს მარტო მაგალითად
<div class="container">aq rac iqneba</div>
ანუ ამ დივის შიგნით რაც იქნება მარტო ის დაისქროლოს

ჯს ბიბლიოთეკა ტუ გექნებათ ვინმეს მუშა არც მაგაზე ვიტყვი უარს

ShalvaSoft
არვიცი ... ჩემი აზრით საბლაიმი იდეალურია... სწორ სკინს თუ შეარჩევ და ფერებს...

Roofus
Sublimeზე ვგიჟდები ძალიან მაგარია!

მაგრამ PHP-ში როცა ვმუშაობ, ყოველთვის PHPStorm.. IDE მაინც სხვა რამეა და მითუმეტეს რომ ყველაფერი კონფიგურირებადია phpstormში.. ჩემი PHPStorm ვიზუალურად sublime-ს გავს ისე. sidebar-ები, tab-ები და ზედა მენიუები გათიშული მაქვს. აი ასე გამოიყურება:



და ბევრი shortcut sublime-დან მაქვს წამოღებული.

Ruritania
უნდა ვნახო ეგ PHPStorm რა არის...

Roofus
თუ დააყენებ, pm და უცებ დაგამუღამებინებ რაღაცეებს..

http://www.waldorfschule-daglfing.de/

ამ საიტზე როა მენიუ რაღაც უფრომოდ ეგრე როგორ ვქნა, ზოგი კუთხე რო მარლა აქ ზოგი დაბლა
და კიდევ აი ამ საიტზე:https://www.pentlandfirth.com/de/
ფუტერში მენიუ ხო ოთხს სვეტად გაყოფილი

მაგათი ჰტმლ ესაა:

» სპოილერის ნახვისთვის დააწკაპუნეთ აქ «

<nav id="fn" class="clearfix"><ul id="menu-hauptnavigation-de-1" class="fn"><li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/unternehmen/">Unternehmen</a>
<ul class="sub-menu">
<li id="menu-item--9" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--9"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/unternehmen/wir-geben-zurueck-brotzeit-fuer-kinder/">Wir geben zurück – BrotZeit für Kinder</a></li>
<li id="menu-item--10" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--10"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/unternehmen/management/">Management</a></li>
<li id="menu-item--11" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--11"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/unternehmen/business-partner/">Business Partner</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-21"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/expertise/">Expertise</a>
<ul class="sub-menu">
<li id="menu-item--12" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--12"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/expertise/kunden/">Kunden</a></li>
<li id="menu-item--13" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--13"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/expertise/sweetlets/">Sweetlets</a></li>
<li id="menu-item--14" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--14"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/expertise/mereko/">MEREKO</a></li>
<li id="menu-item--15" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--15"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/expertise/technologien/">Technologien</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-20"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/">Karriere</a>
<ul class="sub-menu">
<li id="menu-item--16" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--16"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/pentland-firth-als-great-place-to-work-ausgezeichnet/">Auszeichnung: “Great Place To Work 2015”</a></li>
<li id="menu-item--17" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--17"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/karrieremessen/">Karrieremessen</a></li>
<li id="menu-item--18" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--18"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/wer-wir-sind/">Wer wir sind</a></li>
<li id="menu-item--19" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--19"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/was-fur-uns-spricht/">Was für uns spricht</a></li>
<li id="menu-item--20" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--20"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/was-wir-bieten/">Was wir bieten</a></li>
<li id="menu-item--21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item--21"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/bewerbungsprozess/">Bewerbungsprozess</a></li>
<li id="menu-item--22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item--22"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/karriere/aktuelle-stellenangebote/">Aktuelle Stellenangebote</a></li>
</ul>
</li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-154"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/kontakt/">Kontakt</a>
<ul class="sub-menu">
<li id="menu-item-155" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-155"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/kontakt/">Kontakt</a></li>
<li id="menu-item-156" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-156"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/kontakt/impressum/">Impressum</a></li>
<li id="menu-item-206" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-206"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/kontakt/impressum/datenschutz/">Datenschutz</a></li>
<li id="menu-item-207" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-207"><span class="m">› </span><a href="https://www.pentlandfirth.com/de/kontakt/impressum/disclaimer/">Disclaimer</a></li>
</ul>
</li>
</ul></nav>

და ცსს ეს:

» სპოილერის ნახვისთვის დააწკაპუნეთ აქ «

#fn { padding: 30px 0; }
.fn { width: 900px; }
#fn a { text-decoration: none; color: #303030; }
#fn a:hover { text-decoration: underline; }
#fn li { float: left; width: 20%; padding-right: 2%; margin-right: 3%; font-weight: 400; font-size: 22px; border-right: #e2e3e3 1px solid; font-family: 'Droid Serif', Georgia, "Times New Roman", Times, serif; }
#fn li:last-child { border: none; margin-right: 0; }
#fn li .m { display: none; }
#fn .sub-menu { padding-top: 10px; }
#fn .sub-menu a { color: #7f141e; }
#fn .sub-menu .m { display: inline; }
#fn .sub-menu .m { display: block; float:left; height:20px; margin-right: 5px; }

#fn li .sub-menu li { float: none; width: auto; font-weight: 400; font-size: 13px; margin-right: 0; padding: 2px 0; border: none; font-family: 'Open Sans', Helvetica, Arial, sans-serif; }

ხოდა როგორ გაყვეს ოთხს ნაწილად? ქოლუმნ ებით? და შუაში ხაზი ბორდერ ის სახით როგორ ქნეს, ნუ უფრო ის მაინტერეს ოთხს ნაწილად რომელი ელემენტი ყოფს, ვერ ვიპოვე....

This post has been edited by Georgier. on 19 Jan 2016, 20:30

ბიჭებო ჩარჩოში მინდა სურათის ჩასმა. მოკლედ ამ ჩარჩოს სიგანეა 1000px და სიმაღლე 150px და სურათის ზომებია 1400px 458px-ზე, ხოდა მინდა ამ ჩარჩოში ისე ჩაჯდეს სურათი რომ ზომები შეიკუმშოს და ჩარჩოს ზომებზე დადგეს და არა უბრალოდ ისე ჩაჯდეს სურათი რომ ბოლომდე არ ჩანდეს კიდეები.
იმედია გასაგებად ავხსენი

Mikerson
1400 - 458
1000 - X

X = 458 * 1000 / 1400 = 327.

327 - 150 = 177

ანუ სიგანე რომ დაადო 1000 პიქსელი სურათს, 177 პიქსელი დაიკარგება სიმაღლეში.

ყველაზე კარგი ვარიანტი ეგ არის. ან კიდევ თუ PHP-ში მუშაობ, მაშინ http://image.intervention.io/ გამოიყენე. კერძოდ fit() ფუნქცია და 1000, 150 -ზე გაუწერე და ავტომატურად გააკეთებს resize + crop. ამ შემთხვევაში ისე იზამს, რომ თანაბრად დაიკარგოს სურათის ნაწილი და საბოლოო ჯამში უფრო შეუმჩნეველი გამოვა..

მაგრამ ნუ პიქსელები მაინც დაიკარგება ყველა ვარიანტში რა..

Georgier.

https://jsfiddle.net/x2d3t9/13w3rmat/

X2D3T9
სპასიბა,
რითი ქენი ეგ?
ამით? display: inline-block;?

Georgier.

background-ად სამკუთხედის სურათი აქვს ჩასმული ზემოთ და ქვემოთ
http://www.waldorfschule-daglfing.de/wp-co...-nav-bottom.png

http://scripts.ge/topic/1011-design-pattern/




p.s. ასე ფორუმზე კითხვებით თუ აპირებ სწავლას, აზრი არ აქვს. ამდენ დროს ვერავინ დახარჯავს პასუხისთვის და თან უნდა ელოდო, როდის გიპასუხებენ.

მაშინ, როცა ინტერნეტში ყველანაირ კითხვაზე უკვე გაცემულია პასუხი და მარტივად შეგიძლია მონახო Google-ს საშუალებით.

თუ ინგლისური არ იცი, თავიდან დაიხმარე ლექსიკონები.
ამით ინფორმაციის მოძიებასაც ისწავლი და ინგლისური ტექსტიდან აზრის გამოტანასაც.

ამ ვიდეოში ნახავ, დამატებით მეთოდებს, google-ს გამოყენების
https://www.myvideo.ge/v/2638312

http://www.nplg.gov.ge/gwdict/index.php?a=term&d=1&t=61091

https://www.google.com/search?q=flexible&ie...#q=flexible+box

https://www.google.com/search?q=flexible&ie...ble+box&tbm=vid

კი დივის შიგნით ვალაგებ მაგით li სვეტებათ | | |
დააკვირდი li შიგნიყმთ a ტეგებზე ვეუბნები block და ალაგებს
-
-
-
ასე დალშე მარგინებს პადინგებს სიგრძებს და სიგანეებს ( მთლად კარგათ არ არი მარა წავა ) მიხვდები ... ხო კიდე last-child ით ვეუბნები რომ li-ს ბოლო ელემენტს არ გაუკეთოს ბორდერი

Ruritania
უუუ რამაგარი ყოფილა...

ეხლა ვეღარ მოვცილდები