Css — Помогите переместить ссылку


Содержание

Тема: Как перемещать ссылку по сайту?

Опции темы
Отображение
  • Линейный вид
  • Комбинированный вид
  • Древовидный вид

Как перемещать ссылку по сайту?

Всем доброго времени суток!
Подскажите какими командами перемещать ссылку в нужную точку на сайте. Я использовал vspace=»85″ hspace=»86″ но происходит не приятный момент сантиметра три ниже ссылки (ссылка выполнена в виде меняющейся картинки) появляется вертикальная область на которой мышка меняется как при наведение на ссылку и при нажатии переходит на указанный сайт. На это ещё можно было бы закрыть глаза но при создании больше одной ссылки происходит колапс и ничего не работает

используйте в стилях margin, position, top, left в зависимости от требований. из вашего тпика не совсем понятно что нужно.

Перенос стилей CSS из внешнего файла внутрь кода страницы

#1 reklamarabotaet

designing own future

  • Активный участник
  • 1 031 сообщений

    • Из Санкт-Петербург

    Верстаю рассылку в модуле ccNewsletter для Joomla.

    У меня есть HTML+ файл CSS + картинки (создал почти автоматически из PSD через офигенный веб-сервис за 99 рублей).

    То есть сейчас внутри есть ссылка на отдельный CSS-файл.

    Вопрос: как НЕ ВРУЧНУЮ сделать, чтобы все стили были заданы непосредственно в коде страницы, в инструкции

    Как скопировать html вместе со стилями css?

    Иногда есть задача — скопировать html и css код с определенного элемента сайта, вроде бы просто, но css этого элемента может быть размазан по всему файлу css а также у элемента могут быть дочерние элементы их тоже нужно выискивать в файле.

    В этом случае нам поможет плагин для Chrome CSS Used

    Работа с плагином проста, устанавливаем плагин по ссылке, в правой части там же где инспектор css — в меню появился еще один пункт CSS Used .

    Выделяем нужный Html блок и плагин вытянет все стили этого элемента и в том числе дочерние.

    Основные варианты решения проблемы переноса слов в CSS

    Труднопереносимыми бывают не только люди, но и слова. К примеру, химическое соединение метилпропенилендигидроксициннаменилакрилическая кислота очень похожа на некоторых людей с « подвывертом »! Не знаем, как справляться с такими трудными личностями, но с переносом слов CSS точно поможет:

    Зачем переносить «непереносимое»

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

    Частичный перенос применяется лишь к длинным и сложным словам, состоящим из нескольких терминов и разделенных дефисом. Вот тут и возникают проблемы отображения этих слов на разных по диагонали экранах и в разных браузерах. При этом точно предугадать, как длинное слово будет « выглядеть » на клиентской стороне трудно, поэтому задавать переносы « вручную » бессмысленно:

    Решаем проблему переноса слов с помощью HTML

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

    • Использование символа мягкого разрыва ­ — позволяет задать место разрыва сложного слова. При изменении размеров окна браузера на следующую строку переносится только часть длинного слова, стоящая после &shy , а после первой половины выводится знак переноса, похожий на дефис:
    • Использование тега — элемент появился в HTML 5 . Он также служит для указания браузеру места для разрыва сложного или длинного слова. Но в отличие от предыдущего спецсимвола этот тег не выводит в месте « разлома » знак переноса, что может негативно сказаться на читаемости всего текста:


    Перенос слов средствами CSS

    Перед тем, как запретить перенос слов в CSS , давайте рассмотрим несколько свойств, способных разрешить основную проблему:

    1. word-wrap – описывает, как производить перенос слов, которые по длине не помещаются в установленные размеры контейнера. Сразу стоит предупредить, что с валидацией этого свойства возникают проблемы, и с реализацией его поддержки в CSS консорциум W3C еще не определился. Поэтому специализированные валидаторы при наличии word-wrap в коде будут выдавать ошибку:

    Тем не менее, это свойство «воспринимается» всеми современными браузерами и является эффективным решением проблемы переноса длинных слов. word-wrap принимает следующие значения:

    • normal – слова не переносятся;
    • break-word – автоматический перенос слов;
    • inherit – наследование значения родителя.

    Пример, иллюстрирующий применение этого свойства:

    В новой спецификации CSS свойство word-wrap было переименовано в overflow-wrap . Оба свойства принимают одинаковые значения. Но поддержка overflow-wrap пока реализована слабо, поэтому лучше использовать старую версию свойства:

    Как видно на расположенном выше скриншоте, новое свойство поддерживается Google Chrome , но не поддерживается в IE . Поэтому overflow-wrap лучше не использовать для переноса слов в CSS .

    1. word-break – устанавливает правила переноса строк внутри контейнера, если они не помещаются в него по ширине. Это новое свойство, и его поддержка была реализована в CSS3 . Оно является валидным, но предназначено для работы со строками, поэтому перенос слов может производиться грамматически неправильно.
    Цукерберг рекомендует:  Ruby и Rails с точки зрения системного администратора

    Свойство принимает три значения:

    • normal – используются правила переноса, установленные по умолчанию;
    • word-break – перенос строк осуществляется автоматически, чтобы слово поместилось в установленные по ширине размеры контейнера;
    • keep-all – отключает автоматический перенос слов в китайском, японском и корейском. Для остальных языков действие значения аналогично normal.
    1. hyphens – новое свойство, которое появилось с выходом CSS3 . Оно устанавливает, как браузер будет осуществлять перенос слов в выводимом тексте. Свойство принимает несколько значений:

    • none – отключает перенос слов в CSS ;
    • manual ( значение по умолчанию ) – слова переносятся в тех участках текстового блока, где это задано с помощью тега или мягкого переноса (­) ;
    • auto – браузер автоматически переносит слова на основе своих настроек.

    должен присутствовать атрибут lang со значением «ru» (lang=»ru»).

    Свойство поддерживается последними версиями IE , Opera и Firefox . Для каждого из них прописывается своя строчка CSS . Hyphens не поддерживается Google Chrome . Пример:

    Запрет переноса слов

    Иногда нужно сделать так, чтобы строка отображалась полностью без разрыва. Запрет переноса слов в css можно реализовать несколькими способами:

    • С помощью неразрывного пробела &nbsp , который устанавливается в местах переноса строки или слов;
    • Задав свойству white-space значение « nowrap » ( white-space: nowrap ).

    Теперь вы сможете переносить с помощью CSS даже самые длинные слова. Но вот с проблемой труднопереносимых людей вам придется разбираться самостоятельно. Попробуйте воздействовать на них методами CSS – может и получиться, хотя мы сами не проверяли.

    Как сделать ссылку на определенную часть страницы

    Все пользователи, которые так или иначе связаны с сайтами, их созданием или редактированием ежедневно встречаются с созданием ссылок на различные материалы. И наверняка каждых из них знает, как и при помощи какого html-тега сделать ссылку на какой-либо материал в интернете.

    Однако, далеко не все умеют ставить ссылку на определенную часть страницы. Это может быть очень полезно, если вы пишете большие статьи. В начале поста можно сделать оглавление, из каждой строчки которого потом сделать ссылку на часть текста как на этой же странице, так и на любой другой.

    Что бы понять, что мы имеем ввиду, посмотрите оформление нашей недавней инструкции про то, как включить сохранение вкладок при закрытии разных браузеров. Вверху страницы как раз реализовано такое меню, в котором сделаны ссылки на определенное место страницы.

    Как сделать ссылку на определенное место текущей страницы

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

    1. Присвойте якорь части страницы

    Первым пунктом вам нужно присвоить так называемый «якорь» (anchor) той части страницы, на которую пользователя должно перекидывать при нажатии на ссылку. Для этого перед текстом в этой части страницы вставьте следующий код

    где вместо «anchor» вставьте любое слово, желательно подходящее по смыслу к абзацу, на который ссылаетесь.


    2. Сделайте ссылку на «якорь»

    Вторым делом вам нужно сделать ссылку на установленный в первом пункте «якорь» в том месте страницы, откуда пользователь, по вашему мнению, может захотеть перейти к части текста, на которую вы ссылаетесь. Например, это может быть оглавление в начале статьи. Ссылка на «якорь» выглядит следующим образом

    где «anchor» замените на то слово, которое выбрали в первом пункте статьи.

    Как сделать ссылку на определенную часть другой страницы

    Таким же способом, который мы рассмотрели выше, можно ставить ссылки не только на часть текста на той же странице, но и на определенное место любой другой страницы. Главное, что бы у вас была возможность разместить там «якорь». Делается это следующим образом:

    1. Присвойте «якорь» странице-реципиенту

    Как и в предыдущем пункте, присвойте «якорь» нужной части той страницы, на которую пользователь должен переходить при нажатии на ссылку, выглядит это все так же:

    где вместо «anchor» вы так должны вставить любое слово по вашему желанию.

    2. Сделайте ссылку на anchor другой страницы

    Как и в предыдущем случае, вам нужно просто поставить ссылку на созданный ранее «якорь». Разница лишь в том, что ссылаясь на часть другой страницы вам нужно добавить её URL в код, который в результате будет выглядеть следующим образом

    где вместо «адрес страницы» вам нужно подставить, соответственно, URL страницы, на которую ссылаетесь, а вместо «anchor» текст, выбранный вами при создании «якоря».

    Пример ссылки на часть страницы

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

    а код ссылки выглядит вот так

    Если бы эта ссылка на начало статьи была размещена на другой странице или другом сайте, то её код выглядел бы следующим образом

    Css — Помогите переместить ссылку

    Скажем, есть действительно длинное слово в каком-то тексте, у контейнера которого недостаточно ширины для него. Типичная причина этого — длинный URL, просочившийся в текст. Что происходит? Зависит от CSS. Как этот CSS управляет раскладкой и как он этим текстом распоряжается.

    Вот как может выглядеть ситуация с не поместившимся текстом:

    Текст, вылезающий из бокса — визуальная проблема.

    Первое решение — overflow: hidden; , как этакий «лобовой» прием, чтобы не дать тексту (и чему угодно) высовываться. Но от этого пострадает доступность текста. В некоторых десктопных браузерах для выделения текста можно три раза кликнуть на нем мышью, но не каждый может об этом знать и не всегда такое возможно.


    Название свойства « overflow » — «переполнение» — здесь весьма к месту, ведь именно оно, переполнение, у нас и происходит. Ещё есть overflow: auto; , приводящее к горизонтальному скроллу. Иногда может и подойди, но наверняка вы тоже согласитесь, что обычно это решение неприемлемо.

    Цукерберг рекомендует:  Как бороться со всеми знакомыми багами IE

    Нам нужно, чтобы этот зараза длинный URL (или любой текст) разорвался, чтобы перенестись на следующую строку. Варианты есть! Для начала подготовим место, где мы будем со всем этим разбираться.

    Экспериментальная площадка

    Здесь я взял блок с содержимым, размер которого можно менять, и решил соединить его с разными CSS-свойствами и их значениями, которые можно включать/выключать, чтобы увидеть, как это влияет на содержимое.

    Уверен, что этот список неполный и не идеальный. Это лишь некоторые из знакомых мне свойств.

    Кувалда: word-break: break-all;

    Позволяет словам разрываться везде. Свойство word-break «решает» проблему:

    В переписке по электронной почте fantasai пояснила, что это работает, поскольку свойство word-break меняет определение того, что считать словом. Значение break-all по сути воспринимает любой текст как восточноазиатский, который может переноситься практически где угодно (кроме точек в конце предложений и закрывающих скобок). Значение keep-all , наоборот, воспринимает восточноазиатские иероглифы как буквы в слове, а не как целые слова.

    Прицельное решение: overflow-wrap: break-word;

    Свойство overflow-wrap кажется наиболее эффективным решением для данной проблемы.

    На первый взгляд это может походить на демо с word-break: break-all; выше, но заметьте, как в URL оно не разрывает «pen» как «pe\n», а делает перенос в конце этого слова, рядом со слешем.

    Если слово не может разорваться, переполняя контейнер, оно может разорваться где угодно во избежание переполнения.

    Решение потяжелее, иногда: hyphens: auto;

    Свойство hyphens может иногда решить проблему с URL-адресами и длинными словами, но это не точно. На длинном числе, например, он споткнется. Вдобавок, hyphens влияет на весь текст, позволяя себе вольности в разрывах ради того, чтобы сделать правый край текста более ровным.

    fantasai сказала мне:

    Если «слово» находится в конце строки, его можно переносить через дефис.

    Думаю, это «слово» в кавычках дает подсказку, в чем тут проблема. Некоторые неприемлемо длинные строки — не «слова», поэтому это решение — не панацея.

    Будущая кувалда: line-break: anywhere;

    Есть свойство line-break . В основном, кажется оно для пунктуации, но ни в одном браузере оно у меня не заработало. fantasai сказала мне, что появится новое значение anywhere , которое:

    «как word-break: break-all; » за исключением того, что она на самом деле разрывает всё, как примитивная программа на терминале.

    Другие решения в HTML


    Элемент
    разобъёт строку где угодно, если только у него не будет display:none .

    Элемент — «возможный разрыв слова», что означает, что длинному слову, обычно вызывающему раздражающую проблему с переполнением можно сказать, чтобы оно разорвалось в конкретном месте. Полезно! Оно ведёт себя, как пробел нулевой ширины.

    Другие решения на CSS

    Символ ­ ­ делает то же самое, что и элемент (На самом деле не совсем, поскольку, в отличие от , ­ добавляет дефисы при переносе. — прим. перев.)

    Можете вставить разрыв строки с помощью псевдоэлемента ::before < content: "\A"; >, если только элемент не строчный (в противном случае потребуется white-space: pre; )

    P.S. Это тоже может быть интересно:

    Если вам понравилась статья, поделитесь ей!

    Основы CSS: стилизация ссылок

    Дата публикации: 2020-02-26

    От автора: интернет был основан на ссылках. Именно идея того, что мы можем кликать/нажимать на ссылки и переходить с одной веб-страницы на другую сделала фразу «серфить интернет» бытовой. Стилизация ссылок CSS помогает сделать их какими угодно. Хотя в HTML они отличаются от обычного текста даже без CSS.

    Ссылки имеют синий цвет (просмотренные – фиолетовый). У них есть подчеркивание. В демо представлена самая простейшая ссылка.

    Но что если мы хотим немного изменить ситуацию? Возможно, синий не подходит под дизайн вашего сайта. Может, вам не нравятся подчеркивания. Причина не важна – CSS позволяет стилизовать ссылки, как и любые другие элементы. Нам лишь нужно определить ссылку в стилях.

    Хотите взять другой шрифт, сменить цвет, удалить подчеркивание и перевести все буквы в верхний регистр? Конечно, почему нет?

    Практический курс по верстке адаптивного сайта с нуля!

    Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

    Как вставить ссылку в HTML и оформить ее в CSS?

    Неотъемлемой и очень важной частью любого сайта являются ссылки, и несмотря на то, где ссылка расположена, и какие функции она выполняет ее необходимо оформить в соответствующем стиле.

    В сегодняшней статье я хотела бы вам рассказать, как вставить ссылку в HTML, и показать, как можно ее оформить.

    Как вставить ссылку в HTML?


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

    Кроме атрибута href, который задает адрес перехода, тегу можно задавать следующие атрибуты:

    • download – указывает на файл для скачивания.
    • name – якорь.
    • title — всплывающая подсказка при наведении.
    • accesskey — активация ссылки с помощью комбинации клавиш.
    • coords – задает координаты расположение активной области.
    • hreflang – определяет язык текста по ссылке.
    • rel — отношения между ссылаемым и текущим документами.
    • rev — отношения между текущим и ссылаемым документами.
    • shape — указывает форму области ссылки для изображений.
    • tabindex — последовательность переключения между ссылками при нажатии на клавишу Tab.
    • target — имя окна или фрейма, куда браузер будет загружать документ.
    • type — тип документа, на который осуществляется переход.

    Большинство из данных атрибутов используются достаточно редко. Наиболее часто используемыми атрибутами являются href, download, target и name.

    Как открыть ссылку в новой вкладке HTML?

    Для открытия новой вкладке мы можем использовать атрибут target с атрибутом _blank.

    Переводим CSS-стили в отдельный файл

    Прописывать стили CSS для каждой отдельной странички сайта очень неудобно, трудоемко да и страничка будет более медленнее открываться. Рассмотрим как сделать перенос стилей CSS в отдельный файл, который будет определять внешний вид всех страничек сайта. Для примера возьмем код того сайта, который мы оформили в CSS-стилях. Сразу выделю все прописанные нами стили.

    Цукерберг рекомендует:  Каким будет программирование через 20 лет

    /# Записываем стили для горизонтального меню #/

    #tabs10 < margin:0 auto;
    height:10px;
    width:600px;
    >
    #tabs10 ul <
    margin:0;
    padding:0px 0px 0px;
    list-style:none;
    >
    #tabs10 li <
    display:inline;
    margin:0;
    padding:0;

    > #tabs10 a <
    float:left;
    background:url(«tableft10.gif») no-repeat left top;
    margin:0;
    padding:0 0 0 4px;
    text-decoration:none;
    >

    #tabs10 a span <
    float:left;
    display:block;
    background:url(«tabright10.gif») no-repeat right top;
    padding:1px 7px 1px 1px;
    color:#FFF;
    > /* Commented Backslash Hack hides rule from IE5-Mac \*/

    #tabs10 a span /* End IE5-Mac hack */

    #tabs9 a:hover span <
    color:#FFF;
    >

    #tabs10 a:hover <
    background-position:0% -42px;
    >

    #tabs10 a:hover span <
    background-position:100% -42px;
    >

    #tabs10 #current a <
    background-position:0% -42px;
    >

    #tabs10 #current a span <
    background-position:100% -42px;
    >

    /# Здесь прописаны стили для меню левой и правой колонки #/

    #navlist <
    color: white;
    background: #17a;
    border-bottom: 0.2em solid #17a;
    border-right: 0.2em solid #17a;
    padding: 0 1px;
    margin-left: 0;
    width: 12em;
    font: normal 10px Verdana, sans-serif;
    >


    #navlist li <
    list-style: none;
    margin: 0;
    font-size: 1em;
    >

    #navlist a <
    display: block;
    text-decoration: none;
    margin-bottom: 0.5em;
    margin-top: 0.5em;
    color: white;
    background: #39c;
    border-width: 1px;
    border-style: solid;
    border-color: #5bd #035 #068 #6cf;
    border-left: 1em solid #fc0;
    padding: 0.25em 0.5em 0.4em 0.75em;
    >

    #navlist a <
    width: 99%; /* only necessary for Internet Explorer */
    >

    #navlist a <
    voice-family: «\»>\»»;
    voice-family: inherit;
    width: 9.6em; /* Tantek-hack should only used if Internet-Explorer 6 is in standards-compliant mode */
    >

    #navcontainer>#navlist a <
    width: auto; /* only necessary if you use the hacks above for the Internet Explorer */
    >

    #navlist a:hover, #navlist a#current:hover <
    background: #28b;
    border-color: #069 #6cf #5bd #fc0;
    padding: 0.4em 0.35em 0.25em 0.9em;
    >

    #navlist a:active, #navlist a#current:active <
    background: #17a;
    border-color: #069 #6cf #5bd white;
    padding: 0.4em 0.35em 0.25em 0.9em;
    >

    /# Прописываем ненумерованный список и заключим все ссылки которые находятся в этом списке в контейнер для горизонтального меню #/

    /# Записываем ненумерованный список для левого меню #/

    Разобьем этот код на, как уже было выше сказано четыре части: шапка, левое меню, место для текста и правое меню. Для большей наглядности я выделю эти участки на коде. Пока не будем весь сайт создовать при помощи CSS-стилей а возьмем и оформим только правую колонку в CSS а шапку, левое меню и саму страницу для текста мы не будем трогать а оставим как есть. Так будет видна разница

    /# Записываем ненумерованный список для правого меню #/

    Теперь мы вырежем всю выделенную часть, где у нас находятся все стили. Откроем и вставим в блокнот то что мы скопировали(вырезали) и сохраним файл под наименованием: «style.css» Естественно, файл сохраняем в туже папку, в которой находится наш сайт.

    Далее в верхней части сайта вместо записи пропишем , которая делает ссылку на тот фай где находятся все стили и который сохранен как «style.css». На сайте эта запись уже вставлена и выделена.

    Еще раз обратите внимание, что между скобкой » не должно быть расстояния,я этот пробел делаю для того, чтобы браузер не отобразил написанное как код.
    Должно быть так
    А не так

    Если вам подходит тот метод который предложен в этом обзоре, и у вас действительно нет ни времени ни желания изучать CSS но вы хотите, все-таки, самостоятельно оформить сайт с помощью CSS-стилей, можете воспользоваться программой, которая создаст меню на ваш выбор CSS Tab Designer. Нет необходимости так-же писать код структуры сайта в CSS самостоятельно. Гораздо проще прибегнуть к сторонним сервисам, с помощью которых можно c легкостью сверстать любой шаблон, удовлетворяющий ваши требования.

    Для одних стиль —
    это сложный способ
    говорить о простом,
    для других — простой способ
    говорить о сложном.

    «inpropart»

    Как сделать ссылку на определенное место другой страницы

    Привет! Сегодня рассмотрим, как создать ссылку на определенное место страницы. Казалось бы, элементарная вещь, но далеко не все знают, как это осуществить. Иногда появляется необходимость добавлять такие ссылки в свои статьи, чтобы посетитель сайта мог одним кликом мышки перейти не только на другую страницу сайта, но и в нужное место на этой странице. Чтобы понять, как это работает, перейдите по этой ссылке.

    Вы перейдете на другую страницу, и в место, где описывается, как установить и настроить плагин WP Social Buttons. Иногда это очень полезно, что позволяет избежать лишних объяснений в статье. Человек переходит по ссылке, и сразу может прочитать нужную информацию.

    Как сделать ссылку на определенное место данной страницы

    Возможно, Вы замечали, что на многих сайтах, почти в самом начале статьи, добавляют ссылки на нужное место в статье. Это удобно для посетителей, так как при клике на такую ссылку, он может перейти к нужной ему информации, и почитать то, что его интересует.

    Такие ссылки создавать достаточно просто. Для этого надо в нужном месте на странице создать «якорь», а затем на этой же странице надо добавить ссылку на этот «якорь».

    1. Ссылка на якорь Текст
    2. Якорь Текст на странице… Вместо id , можно написать атрибут name

    В кавычках ссылки и якоря, может быть любой текст, но он должен быть одинаковым:

    1. Ссылка Текст
    2. Якорь Текст на странице

    Если Вы кликните по этой ссылке, то перейдете в самое начало страницы.

    Как сделать ссылку на определенное место другой страницы

    Здесь принцип тот же, только переход осуществляется на другую страницу. Для этого надо создать на другой странице сайта, в нужном участке текста «якорь», как b в примере выше , а затем создать ссылку с якорем на эту страницу:

    Текст — ссылка на другую страницу, где вместо anchor, можно написать любые знаки, но такие же, как у якоря на другой странице.

    Как сделать ссылку в виде картинки на другую страницу в определенное место

    Здесь принцип тот же, что и в примерах выше, но, если у Вас сайт на Worpress, тогда нужно перейти в редактор картинки, затем выбрать «Произвольный URL» и добавить ссылку с якорем на другую страницу.

    Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих