Как сделать так, чтобы ссылка HTML фокусировалась на тексте - PullRequest
Новая
       2

Как сделать так, чтобы ссылка HTML фокусировалась на тексте

0 голосов
/ 08 мая 2020

Я не могу заставить ссылку отображаться только в тексте «TJ» вверху, она всегда отображается справа по всему заголовку. Может кто поможет? Я пытался заменить header1 абзацем, но это не помогло. Я новичок в HTML и CSS, поэтому, если бы кто-то мог помочь, я был бы очень признателен. 

/* Imported Fonts*/

@font-face {
  font-family: 'Fira Sans';
  src: url('Fonts/firasans-regular-webfont.woff2') format('woff2'), url('Fonts/firasans-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

a:link {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: red;
}

a:visited {
  text-decoration: none;
  color: black;
}

.TopRow {
  font-family: Fira Sans, sans-serif;
  letter-spacing: 0px;
  width: 100%;
}

.Image1Nav {
  background-color: grey;
  margin: 2%;
}

.Image1 {
  width: 25%;
  padding: 2%;
}
<header>
  <div class=T opRow>
    <a href="https://www.google.com">
      <h1>
        Tj
      </h1>
    </a>
  </div>
</header>
<div class='Image1Nav'>
  <a href="https://www.google.com">
    <img class="Image1" src="Images/noimg.jpg" alt="noimg.jpg">
  </a>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident quidem magni impedit totam esse sapiente, molestias exercitationem tenetur nihil libero, consectetur perferendis illum placeat hic. Ipsum rem incidunt omnis sed.
  </p>
</div>

Ответы [ 3 ]

1 голос
/ 08 мая 2020

Перемещение тега a в тег h1 (вместо), а не наоборот, решит эту проблему, например: 

/* Imported Fonts*/
@font-face {
    font-family: 'Fira Sans';
    src: url('Fonts/firasans-regular-webfont.woff2') format('woff2'),
         url('Fonts/firasans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}
a:link{
    text-decoration:none;
    color:black;
}
a:hover{
    text-decoration: none;
    color:red;
}
a:visited{
    text-decoration:none;
    color:black;
}

.TopRow{
    
    font-family: Fira Sans, sans-serif;
    letter-spacing: 0px;
    width:100%;
}
.Image1Nav{
    background-color: grey;
    margin:2%;
}
.Image1{
    width:25%;
    padding:2%;
}
<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="CSS/style.css">
<head>
        <title>TJ</title>
</head>
<body>
    <header>
        <div class = TopRow>
        <h1>
           <a href="https://www.google.com">Tj</a>
        </h1>
        <!-- edits made above -->
        </div>
    </header>
    <div class = 'Image1Nav'>
        <a href="https://www.google.com">
        <img class="Image1" src="Images/noimg.jpg" alt="noimg.jpg">
        </a>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident quidem magni impedit totam esse sapiente, molestias exercitationem tenetur nihil libero, consectetur perferendis illum placeat hic. Ipsum rem incidunt omnis sed.
        </p>
    </div>
</body>
</html>
1 голос
/ 08 мая 2020

Чтобы получить ссылку внутри тега h1, попробуйте поместить привязку в свой тег h1. 

<h1>
<a href="https://www.google.com">Tj</a>
</h1>
0 голосов
/ 08 мая 2020

Перемещение тега a внутри тега h1 устраняет вашу проблему следующим образом: 

<h1>
   <a href="https://www.google.com">
   Tj
   </a>
</h1>


/* Imported Fonts*/
@font-face {
    font-family: 'Fira Sans';
    src: url('Fonts/firasans-regular-webfont.woff2') format('woff2'),
         url('Fonts/firasans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}
a:link{
    text-decoration:none;
    color:black;
}
a:hover{
    text-decoration: none;
    color:red;
}
a:visited{
    text-decoration:none;
    color:black;
}

.TopRow{
    
    font-family: Fira Sans, sans-serif;
    letter-spacing: 0px;
    width:100%;
}
.Image1Nav{
    background-color: grey;
    margin:2%;
}
.Image1{
    width:25%;
    padding:2%;
}
<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="CSS/style.css">
<head>
        <title>TJ</title>
</head>
<body>
    <header>
        <div class = TopRow>
        
        <h1>
        <a href="https://www.google.com">
        Tj
        </a>
        </h1>
        </div>
    </header>
    <div class = 'Image1Nav'>
        <a href="https://www.google.com">
        <img class="Image1" src="Images/noimg.jpg" alt="noimg.jpg">
        </a>
        <p>
            Lorem ipsum, dolor sit amet consectetur adipisicing elit. Provident quidem magni impedit totam esse sapiente, molestias exercitationem tenetur nihil libero, consectetur perferendis illum placeat hic. Ipsum rem incidunt omnis sed.
        </p>
    </div>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...