Я не владею определениями по данной теме от слова совсем и занимаюсь от силы пару дней всем этим делом.

Мне надо сделать вот так

 

А получается вот так

Как это клятое читать далее выше цепануть?

 

Тут появился блок

Я так понимаю его быть не должно?

хотя бы твой цсс не судьба увидеть?

Nazamb сказал(а):↑

хотя бы твой цсс не судьба увидеть?

Нажмите, чтобы раскрыть...

А что конкретно кинуть? Его много просто

 

Nazamb сказал(а):↑

хотя бы твой цсс не судьба увидеть?

Нажмите, чтобы раскрыть...

html

 

   

    Главный заголовок страницы

   

 

 

 

 

 

 

 

   

    Тестовая карточка #1

   

   

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 

   

 

 

   

    Тестовая карточка #2

   

   

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in

   

   

   

    Читать далее

   

   

 

 

 

 

 

css

h1 {

 margin-left: 44px;

 font: Arial, bold, 28px;

}

.box-first {

 margin-top: 41px;

 margin-left: 44px;

 width: 360px;

 height: 245px;

 border: solid;

}

.box-second {

 margin-top: 41px;

 margin-left: 44px;

 width: 360px;

 height: 245px;

 border: solid;

 border-width: 5px;

 border-color: #d6d6d6;

}

.box-name {

 margin: 10px 99px 30px 25px;

 white-space: nowrap;

 font: Arial, 18px,;

}

.inbox-text  {

 margin: 10px 52px 35px 25px;

 font: Arial, regular, 15px;

 line-height: 18px; 

}

.box-fix {

 display: flex;

  align-items: 60px; 

}

.link-read-next  {

  padding: 0px 52px 35px 25px;

  text-decoration: underline;

  color: #22a2ec;

  display: inline-flex;

}

 

 

Я не знаю как html прикрепить  

br в <>

Как вариант обернуть всё содержимое в div и этому div делать border.

Nazamb сказал(а):↑

попробуй после этого написать br читать далее

 

br в <>

Нажмите, чтобы раскрыть...

Ничего не меняется

Deastro сказал(а):↑

Как вариант обернуть всё содержимое в div и этому div делать border.

Нажмите, чтобы раскрыть...

С какого конкретно момента? Ссылку?

ssevage сказал(а):↑

С какого конкретно момента? Ссылку?

Нажмите, чтобы раскрыть...

текст и ссылку

Nazamb сказал(а):↑

текст и ссылку

Нажмите, чтобы раскрыть...

А какие характеристики у бордера должны быть? Типо border none, а потом margin-bottom?

ssevage сказал(а):↑

А какие характеристики у бордера должны быть? Типо border none, а потом margin-bottom?

Нажмите, чтобы раскрыть...

всмысле бордер нон

делаешь див=клас_х

в середине этого дива пишешь, что тебе надо

в цсс даешь клас_х бордер

Nazamb сказал(а):↑

всмысле бордер нон

делаешь див=клас_х

в середине этого дива пишешь, что тебе надо

в цсс даешь клас_х бордер

Нажмите, чтобы раскрыть...

Я про то какие характеристики бордеру дать не понимаю

ssevage сказал(а):↑

Я не владею определениями по данной теме от слова совсем и занимаюсь от силы пару дней всем этим делом

Нажмите, чтобы раскрыть...

такие рофлы делаются через checkbox/radio input. через селекторы при разном состоянии input через псевдоклассы

 

Псевдокласс :checked | htmlbook.ru

 

ну я наверное вопрос неправильно понял, я думал там надо по нажатии ссылки разворачивать текст и все через ксс. вот я сайт дал там просто по самоучителю пройдись все понятно станет

ssevage сказал(а):↑

Я про то какие характеристики бордеру дать не понимаю

Нажмите, чтобы раскрыть...

ну так гугли параметры бордер

а  что вертикал аллайн забанили? или что? ниче не понимаю

ssevage сказал(а):↑

Я не владею определениями по данной теме от слова совсем и занимаюсь от силы пару дней всем этим делом.

Нажмите, чтобы раскрыть...

там суть почему я сказал листать самоучитель, ну это элементарные вещи, ты их делаешь избыточно сложными, еще к тому же в итоге и не работает как надо. может я чего то не понял, вот в общем я накидал у меня все из коробки натягивается

Спойлер

krati сказал(а):↑

там суть почему я сказал листать самоучитель, ну это элементарные вещи, ты их делаешь избыточно сложными, еще к тому же в итоге и не работает как надо. может я чего то не понял, вот в общем я накидал у меня все из коробки натягивается

Спойлер

Нажмите, чтобы раскрыть...

Спасибо, это плохо что ли когда так много кода?

Nazamb сказал(а):↑

ну так гугли параметры бордер

Нажмите, чтобы раскрыть...

Понял, я просто сначала не допер какой имено бордер юзать

krati сказал(а):↑

такие рофлы делаются через checkbox/radio input. через селекторы при разном состоянии input через псевдоклассы

 

Псевдокласс :checked | htmlbook.ru

 

ну я наверное вопрос неправильно понял, я думал там надо по нажатии ссылки разворачивать текст и все через ксс. вот я сайт дал там просто по самоучителю пройдись все понятно станет

Нажмите, чтобы раскрыть...

Понял, все сейчас изучу

ssevage сказал(а):↑

это плохо что ли когда так много кода?

Нажмите, чтобы раскрыть...

ну это не критично, качество верстки в целом(то есть результат) и скорость верстания важнее. простота и лаконичность это удел задротов

ssevage сказал(а):↑

Как это клятое читать далее выше цепануть?

Нажмите, чтобы раскрыть...

a.link-read-next {

position:relative;

top: -20px;

}

 

• Отступы внутри блока от бордера делаются через padding самому блоку. А у тебя margin каждому элементу внутри прописан. Читаем про CSS Box Model.
• Судя по наличию height, у тебя прописана явная высота этого блока. И когда содержимое в этот блок по высоте не влезает, оно, соответственно, начинает вылезать за его пределы. Указывать явно высоту в CSS очень плохая практика.
• Читаем про shortcut свойства и вместо border: solid; border-width: 5px; border-color: #d6d6d6; пишем border: 5px solid #d6d6d6;.
• Указывать размеры всему что только видишь, да еще и в пикселях - очень плохо. Читаем про relative units: %/em/rem/vh/vw/vmin/vmax. Всё сразу не обязательно, но хотя бы em+vw+vh знать обязательно.
• Читаем про наследование, чтобы не писать каждому элементу font: Arial, ..., ..., ....;

 

На глаза явная нехватка теории, даже самой базовой.

ssevage сказал(а):↑

margin-top: 41px;

 margin-left: 44px;

Нажмите, чтобы раскрыть...

ssevage сказал(а):↑

padding: 0px 52px 35px 25px;

Нажмите, чтобы раскрыть...

что это за дичь? подучи позиционирование элементов. ты же не понимаешь вообще, кому нужен margin, кому padding, соответственно не можешь построить структуру

ke1evra сказал(а):↑

что это за дичь? подучи позиционирование элементов. ты же не понимаешь вообще, кому нужен margin, кому padding, соответственно не можешь построить структуру

Нажмите, чтобы раскрыть...

Да я просто второй день не понимаю какая разница между марджином и паддингом, сейчас снова буду пытаться разобраться

Ссылкам нельзя задать вертикальные отступы, потому что это инлайн элемент. Достаточно написать display: inline-block ей и дальше уже отступы лепи какие хочешь

ssevage сказал(а):↑

Я не владею определениями по данной теме от слова совсем и занимаюсь от силы пару дней всем этим делом.

Мне надо сделать вот так

Нажмите, чтобы раскрыть...

 

Залей код на JsFiddle/codepen, а так гадать на кофейней гуще нецелесообразно 

THD2 сказал(а):↑

 

Залей код на JsFiddle/codepen, а так гадать на кофейней гуще нецелесообразно 

Нажмите, чтобы раскрыть...

Я уже разобрался с этим моментом