Сверстал страничку, но выглядит она ужасно, как поправить?

просто дизайн говно вот и всё

Не понял, почему это у вас в последнем абзаце, пенис вагину ест, обычно же наоборот?

Это просто рыба, не бери близко к сердцу.

открой для себя bootstrap. И CSS складывается в минимальное количество файлов, либо вставляется в саму страницу, чтобы уменьшить время загрузки.

открой для себя bootstrap

Уже открывал. И закрыл.
Про складывание CSS в один файл знаю, у меня будет генерация и сжатие css на сервере реализована.

А что не так? Если не ужимать до 320x240, то все нормально. Можешь min-width для body добавить (800px например).

Крути @media на предмет отдельного правила под width<615px.

Попробуй line-height: 1.4 сделать. Текст будет легче читаться и не выглядеть таким тяжёлым.

Как - то твоё «это» не открывается

Наверное, ЛОР-эффект.

Не, это я осознал свою фатальную ошибку и отключил сервер. Включу, когда починю.
Хотя, ЛОР-эффект тоже сказывается, да.

по ссылке ничего не открылось (ЛОР-эффект подтверждаю).

надо что-то сверстать (пока безвозмездно, но злоупотреблять не стоит моей добротой)?

как поправить?

Shift + Del же, ну!?

Да нет, не нужно мне ничего верстать. Мне бы лучше рабочий пример: горизонтальное меню, пункты которого являются block (изменяемой высоты) и лежат на нижней границе родительского div'a.

http://www.cssplay.co.uk/menus/

горизонтальное меню блоками? не проще (а так же логичнее, правильнее и красивее в плане кода) ли сделать это списком (как на лоре)?

Не-не-не, я имел ввиду, что меню — ul, его пункты — li. А display: block.

Странно, а мне страничка по ссылке понравилась.

Доктор, у меня есть шансы?

Там не хватает ключевого вырвиглазного элемента — head.css:

header {
    text-align: center;
    border-bottom: #000 0.2em solid;
}
header h1 {
    font-size: 3em;
}
header ul {
    list-style: none;
    width: 60%;
    padding: 0.3em 0;
    margin: 0.1em 20%;
}
header ul li {
    float: left;
    width: 25%;
}
header ul li a {
    display: block;
    color: #000;
    background: #fff;
    text-decoration: none;
    padding: 0.5em 0;
}
header ul li a:hover {
    color: #fff;
    background: #000;
    text-decoration: none;
}

display:inline-block;

Мне кажется, или это не то, что мне нужно?

Заценил указание копирайта:

Lingua latina non penis canina est © 2023

1280х800 нормально. 986х545 тоже.

во-первых я не видел исходного материала.

во-вторых:

горизонтальное меню, пункты которого являются block (изменяемой высоты) и лежат на нижней границе родительского div'a.

внутри оно block, снаружи — строчный элемент, который можно vertical-align:bottom;.

в случае с простым блоком придётся его делать float, что поведёт за собой наезды элементов друг на друга, а чтобы это исправить надо будет переверстать всю шапку и начало боди. такие дела.

можно, конечно, абсолютным позиционированием присабачить каждый на своё место, но оно может себя повести не как задумано во всяких internet explorer, opera и в мобильных браузерах.

Мне тоже понравилось, возьму ваш шаблон на поиздеваться, если вы не против. А по сабжу - не подскажу, ибо вообще таким не страдал...

Сделай шрифты побольше. А в остальном — отлично выглядит.

и блокам задай min-width, а то при сильном уменьшении хрень получается

Прыгающий текст в меню делать меня плакать.

Не поможешь написать стиль для верхнего меню?

Могу попробовать, знаю чуток CSS, но по бумажке :D
Что нужно?

{background-color:#ffffff;color:#000000;font-family:sans-serif;text-align:left;border-width:0;margin:0;padding:0;font-size:xx-large;text-decoration:none;}

я вот так сделал просто и всё. В жаббере я не сижу... Пиши на мыло?

Да я тут напишу. Я хочу что-то типа того меню, что справа, только, возможно, инвертированного. Все пункты одинаковой ширины. Что-то у меня какая-то фигня выходит (всё не так, как хочу).

А просто text-align:center - не выход?
Нужно именно моноширинные пункты менюшки?

Не, нужно просто, чтобы одинаковые были, width:20% для пяти пунктов и width:25% для четырёх нормально.

Я поставил 18% и ок..

добавил ещё <li><a href=«#»>Anonima</a></li>

а стиль:
header ul li{
float:left;
list-style-type:none;
margin:0 10px;
width:18%;
}

Итак, некропост.
Сегодня собрал в кулак все свои знания CSS и решил ещё использовать везде указание, что во что вложено, чтобы ничего не поломать.
Написал CSS с нуля. Теперь адаптивный дизайн, одна колонка. На больших экранах должно выглядеть плохо, потом будет пофикшено. Цвет фона серый для «отладки», в финальной версии будет белый. Смотреть только на меню и его адаптивность.
Сочувствующие: border-radius, funeralismatic, hobbit, ossnewcomer.
Ссылка.

пункты меню при наведении подпрыгивают вверх, это так и задумано?

хромиум 18. фф16, опера12.14

Да, это специально. А плохо?

После примерно 400-500 пикселов становится в столбик, если и это - by design, то рад за тебя ^_^

сделай «подпрыгивание» поменьше (соответственно и полосу чёрную под «подсвеченным» пунктом, а то уж больно жирная), и будет более-менее.

цвета УГ. вёрстка годная.

После примерно 400-500 пикселов становится в столбик

куда меньше 800px? даже на самом стрёмном/древнем нетбуке/планшете меньше не найти, а бюджетные наладонники по определению должны страдать.

телефоны в узкоколейном режиме же

каким боком телефоны?

я например с мобилки с разрешением в 640x480 в интернеты иногда хожу, когда под рукой ничего нет

Конечно, by design. Это всё @media — адаптивная вёрстка пока имеет два режима: для устройств меньше 550 пикселей и для устройств больше 550 пикселей в ширину. Думаю, что для очень широких экранов тоже нужен свой режим с полями по краям.

Можешь на телефоне потестить?

Нет только не это, только не поля по краям.
Еще прикрути адаптацию размера шрифта и будет вообще годнота. Когда-то баловался «резинками», но забросил. Твоя выглядит вполне прилично.

неожиданно, лично мне не понравилась эта «фича».

на телефоне hover-эффекта нет, если что. могу проверить с opera mini 640х480 и 480х640

в столбик выстраивается и так и эдак

у меня на девайсе 240х320, к скроллам привык.