Проблем със задачите по CSS - Images


0
Здравейте!
Днес се хванах да пиша домашните, но имах проблем с показването на изображенията.
Прилагам кода на втора задача и моля за малко помощ.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>International Employees</title> <link rel="stylesheet" href="styles/InternationalEmployees.css" charset="utf-8"> </head> <body> <table> <tr > <th>Contact name</th> <th>City</th> <th>Country</th> <th>Is Promoted</th> </tr> <tbody> <tr> <td>Maria Anders</td> <td>Berlin</td> <td class="Germany">Germany</td> <td><input type="checkbox"></td> </tr> <tr> <td>Ana Trujillo</td> <td>Mexico D.F.</td> <td class="Mexico">Mexico</td> <td><input type="checkbox"></td> </tr> <tr> <td>Antion Moreno</td> <td>Mexico D.F.</td> <td class="Mexico">Mexico</td> <td><input type="checkbox" checked></td> </tr> <tr> <td>Thomas Hardy</td> <td>London</td> <td class="UK">UK</td> <td><input type="checkbox"></td> </tr> </tbody> </table> </body> </html>
table,th,td { border-collapse:collapse; border:1px solid silver; padding:5px; font-family:Arial, Helvetica, sans-serif; } th { background:#57ba06; color: whitesmoke; font-weight:100; text-align:left; } tr:nth-child(2n) { background:#eae5e5; } .Germany .Mexico .UK{ vertical-align:middle; margin-right:5px; } .Germany::before{ content: url(images/Germany.png); } .Mexico::before{ content: url(images/Mexico.png); } .UK::before{ content: url(images/UK.png); }

Изображенията съответно са си в папката, както и css файла



Отговори



3

Здравей, според мен флаговете на държавите и текста до тях е добре да са в divs и да бъдат float-нати.

Ето така:

<div class="wrapper">
    <div class="image"><img src="Images/Germany.png" /></div>
    <div class="word">Germany</div>
</div>

и съответния css:

.image {
float:left;
margin-right:5px;
}
.word {
float:right;
padding-top:5px;
}
.wrapper {
display:inline-block;
clear:both;
}

След това можеш да ги доближиш с margin :)

Успех :)




0
Оправи пътищата на снимките - опитай с (../images/Germany.png). Също така можеш да ги направиш като background-image, вместо content (това е вече въпрос на преценка). И нещо последно защо на 2 места имаш деклариран charset utf-8, след като е необходимо да е само в <meta> ?

от monsterEnergy (954 точки)


0
VS code автоматично ми го е сложило. Не съм го забелязала.
Пробвах този метод, но не помогна ;(



1

При мен с :before и content: работи нормално.

<td class="gb">UK</td>

.gb:before{
    content: url(images/gb.png);
}

Вижте да нямате грешка в името на самата папка. Или в името на файла да сте дописала на кирилица. Случвало ми се е да имам несъответствие, дори някой от символите да е на кирилица например "е", подобна дреболия може да ти скъса нервите...

Тук> https://developer.mozilla.org/en/docs/Web/CSS/content чета:

<uri> or url()
The value is a URI that designates an external resource (such as an image). If the resource or image can't be displayed, it is either ignored or some placeholder shows up.

Но мисля че не е Вашия случай!


от piperche (296 точки)


0
Пробвах го това многократно, но без успех.
В един файл работи, в другият не.
В крайна сметка го div-нах и стана. Не знам до колко е коректно, но тези картинки ми скъсаха нервите и накрая се отказах да мъча този CSS, защото започнах да омазвам нещата.


0

лудничка и аз ти гледах кода няколко пъти, не виждам от какво може да е тоя бъг :/

Между другото забелязах ти една грешка, когато изброяваш трябва да слагаш запетайки

.Germany, .Mexico, .UK{
  vertical-align:middle;
margin-right:5px;
}

иначе си селектирала елемета който е с клас UK нестнат в елемент с клас мексико и т.н. ;)


от piperche (296 точки)



0
Image файловете се слагат в html-a 

от DimiturFE (65 точки)


2
Не съм съгласен с теб - явно си пропуснал да чуеш в началните лекции, как трябва да изглежда един добре написан HTML файл без какъвто и да е CSS. Практиката е всякакви изображения да се слагат като background-image, а самият HTML да изглежа като word-document.

от monsterEnergy (954 точки)

0
Влезни в които и да е сайт и дай Disable all styles и виж дали остават image файловете.През HTML се извикват всички нужни ресурси както CSS , JS файлове така и Image , Audi , Video ... CSS е само за стилизиране на документа.

от DimiturFE (65 точки)



1

Тъй като курса е за CSS, мисля че слагането на картинка през css-а е логично, без значение какви са добрите практики, все пак показваш умения свързани със css частта.

Копирах твоя код и при мен сработи без проблем!

Опитай:

ако зададеш :before, а не ::before (само едно двоеточие) -'::' - по-новия формат за да се разграничат псевдо съдържание от псевдо селектори.

да зададеш размери на :before равен на този на картинката

...

Аз съм го направил подобно на теб, но съм задал картинката като background-image,

за да мога да се застраховам от картинки с разлини размери (с background-size: cover;)


от ivonakov (10 точки)


0
С какво направихте зеленото кръгче от първа задача?

от sannya (65 точки)


0

Кръгче

Поне аз така го направих, и го сложих в едно спанче със зелен цвят и размер.


от Yask00 (87 точки)

2

Коцето накрая на лекцията каза, че може с div и аз така и го направих.

.circle { width:13px; height:13px; border-radius:50%; background:green; display: inline-block; }


от martinboykov (1112 точки)



1
И аз доста се поизмъчих с images ... При мен проработи така: url("../images/HeaderRight.jpg");