Как сделать, чтобы одна ссылка или часть текста находилась слева строки, а другая справа? | HTML и CSS
Существует несколько способов реализации, например, с помощью position: absolute;. Но наиболее подходящим я считаю этот (в нём минимум HTML, пригоден для резиновой вёрстки, ссылки разбегаются по углам):
#raz < overflow: hidden; >/* убирать действие float */ #raz a:nth-of-type(1) < float: left; >#raz a:nth-of-type(2)НазадВперёд
4 комментария:
Анонимный А можно так что бы это не ссылки были? А просто текст? NMitra
Amoor при этом для span нужно поправить:
#raz span:nth-of-type(1) < float: left; >
#raz span:nth-of-type(2) < float: right; >NMitra Да, вы абсолютно правы, проморгала!
При этом надо помнить, что область ссылки ограничена размером текста. элемент блочный, он занимает всю ширину области просмотра, а ссылка строчная, её размер определяется размером содержимого. Так что щелчок не по тексту, а просто по этой строке ничего не даст. Для данного примера это может и не принципиально, а вот для какого-нибудь меню, где пункты меню визуально больше текста, важно. Поэтому мы модифицируем стиль ссылки, чтобы она занимала всё пространство внутри блока.
Вот теперь размер ссылки равен размеру блока и щелчок по любому месту блока воспринимается как переход по ссылке.
Как заголовок сделать ссылкой?
В блогах заголовок сообщения обычно служит и ссылкой на полный текст. Чтобы заголовок, который создаётся с помощью тега превратить в ссылку, следует текст обернуть тегом . В HTML5 порядок тегов не имеет значения, поэтому блочный элемент можно вставить внутрь строчного элемента , но в HTML4 и XHTML тег обязан находиться внутри , но никак не наоборот.
Последняя линия справа
Придумайте три способа, как убрать последнюю линию справа от ссылки. При этом допускается только редактировать стили без изменения HTML-кода внутри .
Рис. 1. Ссылки с линией справа
Разноцветные ссылки
С помощью стилей задайте цвет ссылок, как показано на рис. 1.
Рис. 1. Разноцветные ссылки
Как открыть ссылку в новом окне?
По умолчанию ссылки открываются в том же окне, где они расположены. Чтобы любая ссылка открывалась в новом окне, к тегу следует добавить атрибут target со значением _blank .
Как добавить рисунок к внешним ссылкам?
Внешними называются ссылки, которые ведут на другой сайт. Чтобы пользователь мог отличить такие ссылки от обычных, к внешним ссылкам добавляют небольшой рисунок (например, такой ), который информирует о том, что ссылка указывает на другой ресурс.
Для изменения стиля ссылок создадим новый стилевой класс external и для него добавим рисунок в виде фона с помощью свойства background . При этом следует указать значение no-repeat , чтобы фон не повторялся.
Как добавить пунктирное подчеркивание к ссылкам?
Пунктирное подчеркивание у ссылок в последнее время стало стандартом оформления ссылок, щелчок по которым не открывает ссылку, а выполняет некоторое действие в текущем документе. Активное использование технологии AJAX, когда страница обновляется без ее перезагрузки, привело к новому виду ссылок, которые отличаются от обычных ссылок пунктирной линией.
Для создания линии следует использовать свойство border-bottom со значением dashed , добавляя его к селектору A . Чтобы подчеркивание применялось не ко всем ссылкам, следует указать уникальный класс, назовем его, например dot . Также необходимо убрать исходное подчеркивание у ссылок с помощью свойства text-decoration со значением none .
Как с помощью стилей выделить ссылки, которые ссылаются на другой сайт?
Универсальный способ, работающий во всех браузерах, состоит в создании нового класса и его добавлении к определенным ссылкам. Например, вводим класс blank и с помощью атрибута class применяем его к желаемым тегам .
Как на странице сделать ссылки разных цветов?
Ссылки разных цветов обычно нужны для размещения на странице, имеющей несколько различающихся по фоновому цвету областей. На темном фоне логичнее располагать ссылки светлых тонов, а на светлом, наоборот, ссылки темного цвета.
Как изменить вид ссылки при наведении на нее курсора мыши?
Псевдокласс :hover , который добавляется к селектору A , как раз определяет стиль ссылки, когда на нее наводится курсор мыши. В таблице стилей вначале указывается селектор A , потом через двоеточие hover .
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Популярные материалы
- Самоучитель HTML4
- Самоучитель CSS
- Как добавить картинку на веб-страницу?
- Спецсимволы
- Структура HTML-кода
- Введение в HTML
- Способы добавления стилей на страницу
- Выравнивание текста
- Якоря
- Позиционирование элементов
- Как добавить иконку сайта в адресную строку браузера?
- Ссылки
Как сделать ссылку справа в html
только начали учить HTML, вопрос жутко ламерский, есть строка, в ней есть просто текст (выровнен по центру) и есть ссылка, она находится справа от текста и ее надо выровнять по правому краю, я не знаю как это сделать она на той же строке где текст, то есть например:
вот как тут Link выровнять по правому краю.
| NewLamer&Programer |
| Посмотреть профиль |
| Найти ещё сообщения от NewLamer&Programer |
Белик Виталий 🙂
Регистрация: 23.07.2007
Сообщений: 57,792
"100%"> "middle">Text "right">"page2.html">Link
Я так верстаю. Хотя говорят что верстать таблицами в наше время вышло из моды, превратившись в говнокод, меня пока устраивает.
I’m learning to live.
Форумчанин
Регистрация: 23.11.2012
Сообщений: 428
Stilet, Text не по центру получился
| NewLamer&Programer |
| Посмотреть профиль |
| Найти ещё сообщения от NewLamer&Programer |
Форумчанин
Регистрация: 08.06.2011
Сообщений: 693
Форумчанин
Регистрация: 07.10.2008
Сообщений: 213
Без всяких таблиц можно это сделать:
Link TextИ старайтесь align не использовать, он deprecated.
Форумчанин
Регистрация: 23.11.2012
Сообщений: 428
tools, уже больше подходит, но все равно все сползает
вот посмотрите код:
p . head
text — align : center ;
font — family : calibri ;
font — size : 13pt ;
>
p . mid
text — align : center ;
font — size : 15pt ;
font — family : calibri ;
margin — top : 15 %;
>
p . right margin — left : 80 %;
margin — top : 10 %;
font — family : calibri ;
font size : 13pt ;
>
div . end
text — align : center ;
margin — top : 10 %;
font — family : calibri ;
font size : 12pt ;
>
< body >
< p class= "head" >
Министерство образования Российской федерации < BR >
Пензенский государственный университет < BR >
Кафедра «Вычислительная техника»
< p class= "mid" >ОТЧЕТ < br >
по лабораторной работе №5 < BR >
по курсу информатика < BR >
на тему : Разработка документа сложной структуры < BR >
с использованием языка HTML .
< p class= "right" >
Выполнили : < br >студенты гр.12ВВ1 < br >
Панов И . А .
< br >< br >
Приняли : < br >
Бурукина И . П .< br >
Финогеев А . А .
< div style = "float: right" > < a href = "page2.html" >Вперед
< div class= "end" >Пенза , 2013г .
Последний раз редактировалось NewLamer&Programer; 10.05.2013 в 14:31 .
| NewLamer&Programer |
| Посмотреть профиль |
| Найти ещё сообщения от NewLamer&Programer |
Как сделать — Меню по правому краю
Узнать, как создать панель навигации с выровненными по левому краю и по правому краю ссылками.
Ссылки меню выровнены по правому краю
Создание верхней панели навигации
Шаг 1) Добавить HTML:
Пример
Пример
/* Добавить черный цвет фона для верхней навигации */
.topnav background-color: #333;
overflow: hidden;
>
/* Стиль ссылок внутри панели навигации */
.topnav a float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
>
/* Изменение цвета ссылок при наведении курсора */
.topnav a:hover background-color: #ddd;
color: black;
>
/* Добавить цвет для активной/текущей ссылки */
.topnav a.active background-color: #4CAF50;
color: white;
>
/* Выровненный по правому краю раздел внутри верхней навигации */
.topnav-right float: right;
>
Совет: Чтобы создать удобные для мобильных устройств, отзывчивые навигационные панели, прочитайте наш учебник Как сделать — Отзывчиую верхнюю навигацию.
Совет: Зайдите на наш учебник CSS Навигация чтобы узнать больше о навигационных барах.