Коментари на: Хоризонтално и вертикално центриране на елемент с CSS

От: Joro

Joro — Tue, 13 Dec 2011 20:05:59 +0000

Честа грешка на начинаещите е да мислят, че щом нещо е валидно, то е правилно :). Валидноста просто потвърждава, че в кодът няма грешки, но не проверява логиката.
Иначе щом ползваш отрицателни стойности и то в такива гигантски стойности, определено нещо не е наред. По-добре почети пак за позиционирането и изобщо как се игражда лейаут и започни отначало. Стартът е труден, но не бива да се отказваш, защото после е още по-забавно :).
Ето линк към другия проект, който поддържам (макар да е в застой в момента) – http://fridaycode.net/

От: Емо

Емо — Tue, 13 Dec 2011 18:38:10 +0000

Мерси за бързият отговор.В момента правя едно сайтче,но има един странен(поне за мен) проблем.Единият от дивовете със снимка в него се показва с около 10 рх по нагоре в ИЕ и опера,докато в мозила и хром е както трябва.Странното е,че сайта е валиден ,без грешки и предупреждения…Дали не е повлияло начинът ми на позициониране ,защото използвам големи отрицателни стойности на margin -600рх и повече…Ако не е уместно да питам тук се извинявам и изтрий въпросът ми.

От: Joro

Joro — Tue, 13 Dec 2011 17:14:36 +0000

Няма такова нещо. Всяко пропърти (margin, padding, width, height, color, position и т.н.) може да бъде слагано на всеки елемент… въпросът е кога е нужно и кога не :). Рядко някой може да ти каже какво да ползваш и какво не. Може примерно width да не е нужно при неговото решение, но при нечие друго да е. Така че всичко е според зависи :)

От: Емо

Емо — Tue, 13 Dec 2011 17:04:14 +0000

Много ми беше полезно това разяснение,тъй като съм начинаещ уебаджия.Но скоро гледах едни уроци за CSS в които съветват да не присъстват заедно в един див примерно "margin/padding и width/height".Трябвало да присъстват или само едните или само другите.Сега съм малко объркан,понеже в този пример се дават заедно,че и "top/bottom" присъства.В крайна сметка кое е ПРАВИЛНОТО КОДИРАНЕ?

От: Пламен

Пламен — Sat, 26 Nov 2011 00:23:45 +0000

Човек, ти си факир!Да не говорим, колко бързо ми отговори.Много съм ти благодарен!

От: Joro

Joro — Fri, 25 Nov 2011 14:24:04 +0000

Между другото от .menu махни и overflow: hidden;
За да нямаш разстояние между бутоните има няколко варианта.

Вариант 1:
Трябва да нямаш празни пространства между елементите в html-a. Т.е. те НЕ трябва да бъдат така:
Цени
Отстъпки
Трябва да бъдат директно едно след друго:
Цени Отстъпки

Вариант 2:
На -то, което държи въпросните менюта му задаваш font-size: 0; след което на .menu добавяш font-size: 14px;

Има още доста решения, но те изискват по-генерална промяна на кода. Може да има и нещо още по-елементарно, но в момента се сещам за тези.
Успех! :)

От: Пламен

Пламен — Fri, 25 Nov 2011 14:01:14 +0000

Центрира се менюто, което беше най-важното и за което много ти благодаря, но има ли начин разстоянието между клетките да изчезне?

От: Joro

Joro — Fri, 25 Nov 2011 09:01:48 +0000

Ами то твоето няма много общо с урока :).
Иначе на .menu му разкарай float: left; и display го направи display: inline-block;

От: Пламен

Пламен — Thu, 24 Nov 2011 22:12:52 +0000

Прочетох урока и много други, само че не е точно това, което търся.Ако влезеш в сайтът ми http://laminat-sofia.com/ ще видиш две менюта, произхождащи от един css код, разположени над и под картинката.Менютата и картинката се намират в една клетка от таблица и докато картинката се влияе от html командата align="center", то менютата не.И понеже хоризонталното css меню е винаги подравнено наляво заради float: left, така се получава грозно разминаване между менюта и картинка, идеята е да ги подравня наравно в центъра едно под друго.
ПП – В css менюто имам включени margin:0 auto; и text-align:center, но ефект няма.Самият код е:

.menu {
margin:0 auto;
text-align:center;
width:96.5px;
height:20px;
padding:2px 20px; /*задаваме вътрешните отстъпи*/
letter-spacing:0.5px; /*разстояние между буквите*/
border:1px solid #000000; /*задаваме рамка на бутона*/
display:block;
float: left;
overflow:hidden;
text-decoration:none; font-family:font-family:verdana;
font-weight:bold; /*форматиране на текста,в случая текста ще бъде удебелен*/
color:#000000; /*цвят на текста в нормално състояние*/
background:url(button2.jpg); /*задаваме фон на бутона в нормано състояние*/
}

.menu:hover {
color:CC0000; /*цвят на текста когато сме посочили бутона*/
background:url(button3.jpg);
}

От: Pavel Ivanov

Pavel Ivanov — Mon, 01 Mar 2010 09:24:45 +0000

супер много яко обяснено … евала!