ომედია სტუდია

ბლოგი → განუსაზღვრელი სიგანის CSS მენიუს ცენტრირება

Jibla
5 თებერვალი, 2009  •  22 კომენტარი  •  წაკითხულია 13125-ჯერ

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

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

ჩვენმა ძვირფასმა :D დიზაინერმა დახატა ლეიაუთი, რომელშიც გათვალისწინებული იყო ჩვეულებრივი ჰორიზონტული მენიუ (როგორიც ხშირად გვიკეთებია), ოღონდ (!) ცენტრირებული. მე თვითონაც გამიკვირდა, რომ აქამდე მსგავსი შემთხვევა არასოდეს მქონია. გარკვეულ გარემოებათა გამო, მომიწია ცოტათი მეტი ფიქრი და გუგლში სეირნობა, რომ ჩვენი დიზაინერის „პრეტენზიები“ დაკმაყოფილებულიყო :D.

ახლა, რაც შეეხება საკითხს და პრობლემას :).

ზოგადად, არც ბლოკური ობიექტის ცენტრირება წარმოადგენს რაიმე სირთულეს. ცნობილია, რომ თუკი ბლოკურ ობიექტს CSS-ით განვუსაზღვრავთ margin: 0 auto; მაშინ ეს ობიექტი პოზიცირდება ჰორიზონტულად ცენტრში მისი მშობლის მიმართ. ეს ფაქტი ეფუძნება CSS2-ის წესს, რომ ობიექტისთვის, რომელსაც განსაზღვრული აქვს მარცხნივ და მარჯვნივ საზღვარი auto მნიშნელობით (margin-left: auto; margin-right: auto;) — ავტომატურად დაითვლება ტოლი სიდიდის მნიშვნელობები. აი ეს არის „ფილოსოფია“ ბლოკური ობიექტის ცენტრირებისა :) მოთხოვნა ამ შემთხვევაში არის ერთადერთი, მაგრამ პრინციპული(!); ობიექტის სიგანე უნდა იყოს წინასწარ განსაზღვრული!

ზუსტად აქ "წამოვკარი ფეხი" :D.
ე.ი. მე მჭირდება მენიუ, რომელიც იქნება ცენტრირებული და არ ექნება ზუსტად განსაზღვრული სიგანე, რათა შესაძლებელი იყოს მისი დინამიური მართვა CMS-იდან. პრობლემაც აქ არის — ცენტრირების სტანდარტული მეთოდით აქ ფონს ვერ გავალთ, იმიტომ რომ სიგანე არ ვიცით და შესაბამისად არაფერიც არ დაიცენტრება.

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

ზემოთხსენებულ გუგლში სეირნობის შემდეგ, ვიპოვე ამ ყველაფრის მარტივი CSS გადაწყვეტა. ასევე ცნობილი, როგორც „Shrink Wrap“ მეთოდი. Shrink Wrapping-ის იდეა მარტივია და მდგომარეობს შემდეგში: ბლოკურ ობიექტს უნდა მივუდგეთ როგორც ცხრილს.
შესაბამისად, კონტეინერს, რომელშიც გვაქვს მენიუს ელემენტები, საჭიროა განვუსაზღვროთ display: table; ხოლო ელემენტებს — display: table-cell; 

 
ul.menu {
    display: table;
    margin: 0 auto;
}
 
ul.menu li {
    display: table-cell;
}
 

ვაშა! :D
ამის შემდეგ ჩვენი განუსაზღვრელი სიგანის მენიუ ცენტრში ექცევა :)

ახლა, რა თქმა უნდა პრობლემა გვაქვს ბრაუზერად წოდებულ IE-სთან. აბა სხვანაირად როგორ იქნება :D ცნობილია, რომ IE-ს არ აქვს display: table; მნიშვნელობის მხარდაჭერა მე-7 ვერსიის ჩათვლითაც კი :) ამ პრობლემის მოსაგვარებლად საჭიროა, რომ კონტეინერს განვუსაზღვროთ text-align: center; ხოლო მენიუს აითემს მივუდგეთ, როგორც inline ელემენტს. 

 
ul.menu {
    display: block;
    margin: 0 auto;
    text-align: center;
}
 
ul.menu li {
    display: inline;
}
 

ამ უკანასკნელს გავაფორმებთ IE conditional comment-ში <!--[if IE]>....<![endif]--> და საბოლოოდ, რომ შევაჯამოთ მივიღებთ დაახლოებით ასეთ რამეს: 

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <title>Omedia, Horizontal CSS Menu</title>
  </head>
  <body>
      <ul>
         <li>ელემენტი 1</li>
         <li>ელემენტი 2</li>
         <li>ელემენტი 3</li>
         <li>ელემენტი 4</li>
         <li>ელემენტი 5</li>
         <li>ელემენტი 6</li>
         <li>ელემენტი 7</li>
      </ul>
 
  </body>
</html>
 
 
<style type="text/css">
   ul.menu {
       display: table;
       margin: 0 auto;
   }
 
   ul.menu li {
       display: table-cell;
   }
</style>
<!--[if IE]>
  <style type="text/css">
     ul {
        display: block;
        margin: 0;
        text-align: center;
     }
 
     ul li {
        display: inline;
     }
  </style>
<![endif]-->
 

ყველაფერი ნათელია &mdash გვაქვს ტრადიციული <ul> </ul> კონტეინერი და <li> </li> მენიუს ელემენტები. მათზე კი მოქმედებს შესაბამისი სტილები რაზეც ზემოთ იყო საუბარი. დანარჩენი კი უკვე თქვენი გემოვნების, ხასიათის და კონკრეტული ამოცანის ამბავია :).

ტეგები: HTML CSS მენიუ ცენტრირება IE

22 კომენტარი:

  • 22 თებერვალი, 2009 - 16:05 Landish:
    და პირდაპირ რო ინლაინ ცენტრირება გაგვეკეთებინა სხვა ბრაუზერებისთვისაც ეგრე არა? აუცილებელია, რომ სხვა ბრაუზერებისთვის ეს ცხრილისებრი მეთოდი გამოვიყენოთ? თუ აქაც მარკაპთან გვაქ საქმე?
  • 7 აპრილი, 2009 - 17:07 And1:
    ეს გასაგებია და რა მაინტერესებს თუ შეგიძლიათ ამიხსნათ.. ვთქვათ გვაქვს 1 <div> ში , სამი ცალი <div>..

    <style type="text/css">
    .container{
    width: 100%;
    height: 200px;
    }

    .left{
    float: left;
    width: 250px;
    height: 200px;
    }

    .middle{
    float: left;
    width: 100%; --- :(( ისე რომ ცენტრში შეავსოს( ანუ მარცხენა და მარჯვენა დივებს შორის ადგილი დაიკავოს მთლიანად)
    height: 200px;
    }

    .right{
    float: right;
    width: 250px;
    height: 200px;
    }
    </style>
    -----------------------

    <div class="container">
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
    </div>
  • 7 აპრილი, 2009 - 17:10 Jibla:
    @And1 - ვარსკვლავების აკადემიის ლეიაუთი ნახე. მემონი ზუსტად ისაა რაც გინდა :) http://staracademy.ge/
  • 7 აპრილი, 2009 - 17:51 And1:
    გაიხარე გიო ეგაა რაც მინდოდა :) thx
  • 18 ივლისი, 2009 - 14:54 გოჩა:
    სააღოლ სტუდიას, ოფლი აქვთ ნაღდად ნაღვარი
  • 24 ივლისი, 2009 - 12:13 ლუკა:
    ვერ მივხვდი რატო უნდა ავიტკიო აუტკივარი თავი როცა შეიძლება ამ პრობლემის გადაჭრა მარტივი გზით.

    <style type="text/css">
    #menu {
    text-align:center;
    margin:0 auto;
    }
    #menu ul li {
    display:inline;
    }
    </style>
    <div id="menu">
    <ul>
    <li>ელემენტი 1</li>
    <li>ელემენტი 2</li>
    <li>ელემენტი 3</li>
    <li>ელემენტი 4</li>
    <li>ელემენტი 5</li>
    </ul>
    </div>
  • 24 ივლისი, 2009 - 12:27 Rocko:
    ლუკა, აუტკივარი თავი უნდა აიტკიო მაშინ, როდესაც ეგ li-ები ბლოკურად გჭირდება და არა inline-ად.
  • 24 ივლისი, 2009 - 12:29 Jibla:
    @ლუკა:

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


    საუბარია იმ შემთხვევაზე, როდესაც საჭიროა, რომ <li> ელემენტი იყოს ბლოკური და არა ინლაინი.
  • 23 აგვისტო, 2009 - 16:09 გიო:

  • 20 ოქტომბერი, 2009 - 23:04 პ................:
    რა გინდა ბიდა
  • 17 დეკემბერი, 2009 - 20:40 Cyborg:
    არ მახსოვს ზუსტად სად, მარა იგივე პრობლემას მუვიდექი "ბრუტალურად":
    ვითვლიდი გამოსაყვანი მენიუს ასოების რაოდენობას, ვამრავლებდი საშუალო ასოების width-ზე და ვსვამდი ფიქსირებული სიგანის ბლოკებს, სლავა ბოგუ, თუ დააკვირდებით სულ სილფაენში არის სამი სიგანის ასოები, "მონო სიგანის" - წიპა ა, ბ, ი, 1.5 სიგანის: დ, ფ, რ და ა.შ. და ორმაგი სიგანის ასო ბგერა 'ლ' :D

    ბავშობიდან მიყვარდა შუბლით კედლის მტვრევა.
  • 6 იანვარი, 2010 - 21:41 BalukaWebMaster (Jambul Jakhaia):
    ეჰ, მეც თქვენსავით ვებვმასტერობდი, მაგრამ ინტერნეტის პრობლემა მქონდა და როცა პრობლემა მოიხსნა უკვე იდეა არ მქონდა, და არც ეხლა მაქვს :-D. მომწონს თქვენი საიტების დიზაინი. ძრავზე ვერაფერს ვიტყვი, რადგან არ მისინჯია :-). და აგერ ზედ კიდევ ნელნელა მავიწყდება პროგრამირების ენები.
    ერთმა მირჩია ვებსტუდია გამეხსნა თქვენსავით, მაგრამ მუღამი დამეკარგა ამ უინტერნეტობაში. აბა თქვენ იცით. გამიხარდა ასეთი ქართული ვებ სტუდიას ნახვა. წარმატებები.
  • 4 თებერვალი, 2010 - 17:51 mari:
    იციტ რა ხალხნო:დ
  • 13 აპრილი, 2010 - 17:10 ვაკო:
    კაია
  • 12 მაისი, 2010 - 15:05 Rocket:
    საინტერესო იყო მადლობ
  • 15 ოქტომბერი, 2010 - 01:36 Domaci:
    აუ რამდენი მაქვს სასწავლი.

    ბიჭებო CSS and HTML სად ვისწავლო? არ ამზადებთ თქვეენ?
  • 22 ნოემბერი, 2010 - 10:25 dark:
    http://www.w3schools.com/ თუ ინგლისური იცით მაშინ მაგ საიტს ეწვიეთ

    და თუ რუსული მაშინ http://htmlbook.ru/ ;) იმედია ასეთი ტიპის საიტიც იქნება მშობლიურ ენაზე გი ნეტში :)
  • 12 მარტი, 2011 - 08:16 გვანცა:
    :):):):)
  • 14 მაისი, 2011 - 20:20 რატი:
    აუუუუ რამდენი მაქვს სასწავლი სად ვისწავლო ალბად ცოდნა.ჯიში

  • 14 მაისი, 2011 - 20:22 რატი:

















  • 18 აგვისტო, 2011 - 08:41 ლევანი:
    ძალიან კარგი სისტემაა და დიდი ხანია ვიყენებ. სხვათაშორის ამასწინათ ქართულადაც ვთარგმნე :)) http://ka.gravatar.com/
  • 18 აგვისტო, 2011 - 09:23 ლევანი:
    sorry გვერდითა პოსტზე უნდა დამეკომენტებინა :D:D:D

კომენტარის დამატება:



დაშვებულია მხოლოდ <blockquote> ტეგი.

ელფოსტა არც გამოქვეყნდება და არც დაისპამება, მხოლოდ გრავატარებისთვისაა საჭირო :)

მონიშნული ტექსტის ციტირება

იგზავნება ...

გმადლობ, კომენტარი დამატებულია.

ომედიას ბლოგი

შეიხედეთ ჩვენი სტუდიის კულისებში, გაიღრმავეთ ცოდნა და ნახეთ, როგორ იქმნება ყველაზე ხარისხიანი ვებსაიტები :)

უკანასკნელი წერილები

პირდაპირი ეთერი

პოსტები წინა თვეებში

რას ვკითხულობთ ხოლმე

გვადევნეთ თვალი

არ ჩამორჩეთ ომედიას საიტის სიახლეებს. გამოიწერეთ ჩვენი RSS ან გვიყურეთ ტვიტერის საშუალებით :)

ამის ქვევით ნამდვილად აღარაფერია, სიტყვას გაძლევთ! :D
Omedia Studio