Вопрос:

HTML5 выравнивание текста

html css html5

305 просмотра

3 ответа

15 Репутация автора

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

введите описание изображения здесь

header, nav, main, footer { display: block; }

* { box-sizing: border-box; }

body	{ background-color: #3f2860;
	  color: #3f2860;
          font-family: Veranda, Arial, sans-serif; }

header  { background-color: #9bc1c2;
          background-image: url(lilyheader.jpg);
          background-position: right;
          background-repeat: no-repeat;
          height: 150px; }  

h1	{ padding-top: 50px;
          padding-left: 2em; } 
          
nav	{ font-weight: bold;
	  float: left;
          width: 160px;
	  padding: 1em; }

nav a	{ text-decoration: none; 
          font-weight: bold;
          padding: 1em;
          display: block;
          text-align: center;
          border: 3px outset #CCCCCC;
          margin-botton: 1em;}

nav a:link { color: #497777; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
              border: 3px inset #333333; }

nav ul { list-style-type: none;
         padding-left: 0; }


main    { padding-right: 2em;
          margin-left: 170px;
          padding-top: 1em;
          display: block; }

floatleft { float: left;
            margin-right: 4em; }

.studio { font-style: italic; }

.company{ font-style: italic; }

footer	{ background-color: #9bc1c2;
	  font-size: .60em;
	  font-style: italic;
	  text-align: center;
          padding: 1em; }

clear { clear: both; }

#wrapper { background-color: #f5f5f5; 
           min-width: 1200px; 
           max-width: 1480px;
           width: 80%; 
           margin-right: auto;
           margin-left: auto; } 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
  <!-- [if it IE 9]>
    <script src="html5shiv.js>
    </script>
    <![endif]-->
</head>

<body>
<div id="wrapper">
<header>
   <h1>Path of Light Yoga Studio</h1>
</header>
 
<nav>
  <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="classes.html">Classes</a></li>
        <li><a href="schedule.html">Schedule</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
   
</nav>
<main>
   <img class="floatleft" src="yogadoor.jpg" alt="yoga door" width="225" height="300">
   <h2>Find Your Inner Light</h2>
   <p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice
      in a tranquil, peaceful environment. Whether you are new to
      yoga or an experienced practitioner, our dedicated instructions
      can develop a practice to meet your needs. Let your inner light
      shine at the <span class="company">Path Of Light Yoga Studio</span>. 
   </p>
<ul>
   <li>Hatha, Vinyasa, and Restorative Yoga classes</li>
   <li>Drop-ins welcome</li>
   <li>Mats, blocks, and blankets provided</li>
   <li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div>
<span class="company">Path of Light Yoga Studio</span><br>
   612 Serenity Way<br>
   El Dorado, CA 96162<br><br>
   888-555-5555<br><br>
</div>
</main>
<footer>
   Copyright &copy; 2016 Path of Light Yoga<br>
   <a href="mailto:Brittany@Tracy.com">Brittany@tracy.com</a><br><br>
</footer>
</div>
</body>
</html>

Автор: brittmoe09 Источник Размещён: 09.11.2017 12:01

Ответы (3)


0 плюса

13 Репутация автора

Я полагаю, вы просто пропустили "." для вашего класса поплавка. Итак, ваш CSS будет выглядеть так:

header, nav, main, footer { display: block; }

* { box-sizing: border-box; }

body	{ background-color: #3f2860;
	  color: #3f2860;
          font-family: Veranda, Arial, sans-serif; }

header  { background-color: #9bc1c2;
          background-image: url(lilyheader.jpg);
          background-position: right;
          background-repeat: no-repeat;
          height: 150px; }  

h1	{ padding-top: 50px;
          padding-left: 2em; } 
          
nav	{ font-weight: bold;
	  float: left;
          width: 160px;
	  padding: 1em; }

nav a	{ text-decoration: none; 
          font-weight: bold;
          padding: 1em;
          display: block;
          text-align: center;
          border: 3px outset #CCCCCC;
          margin-botton: 1em;}

nav a:link { color: #497777; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100;
              border: 3px inset #333333; }

nav ul { list-style-type: none;
         padding-left: 0; }


main    { padding-right: 2em;
          margin-left: 170px;
          padding-top: 1em;
          display: block; }

/*This was missing -->*/ .floatleft { float: left;
            margin-right: 4em; } 

.studio { font-style: italic; }

.company{ font-style: italic; }

footer	{ background-color: #9bc1c2;
	  font-size: .60em;
	  font-style: italic;
	  text-align: center;
          padding: 1em; }

clear { clear: both; }

#wrapper { background-color: #f5f5f5; 
           min-width: 1200px; 
           max-width: 1480px;
           width: 80%; 
           margin-right: auto;
           margin-left: auto; }

Автор: Aureus Размещён: 09.11.2017 12:23

0 плюса

5581 Репутация автора

Вы используете элементы уровня блока ( pи h*), просто измените их или добавьте display:inlineк ним, например так:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Path of Light Yoga Studio</title>
<meta charset="utf-8">
<link rel="stylesheet" href="yoga.css">
  <!-- [if it IE 9]>
    <script src="html5shiv.js>
    </script>
    <![endif]-->
</head>

<body>
<div id="wrapper">
<header>
   <h1>Path of Light Yoga Studio</h1>
</header>

<nav>
  <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="classes.html">Classes</a></li>
        <li><a href="schedule.html">Schedule</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>

</nav>
<main>
   <img class="floatleft" src="yogadoor.jpg" alt="yoga door" width="225" height="300">
   <h2 style="display:inline">Find Your Inner Light</h2>
   <p style="display:inline"><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice
      in a tranquil, peaceful environment. Whether you are new to
      yoga or an experienced practitioner, our dedicated instructions
      can develop a practice to meet your needs. Let your inner light
      shine at the <span class="company">Path Of Light Yoga Studio</span>. 
   </p>
<ul>
   <li>Hatha, Vinyasa, and Restorative Yoga classes</li>
   <li>Drop-ins welcome</li>
   <li>Mats, blocks, and blankets provided</li>
   <li>Relax in our Serenity Lounge before or after your class</li>
</ul>
<div>
<span class="company">Path of Light Yoga Studio</span><br>
   612 Serenity Way<br>
   El Dorado, CA 96162<br><br>
   888-555-5555<br><br>
</div>
</main>
<footer>
   Copyright &copy; 2016 Path of Light Yoga<br>
   <a href="mailto:Brittany@Tracy.com">Brittany@tracy.com</a><br><br>
</footer>
</div>
</body>
</html>
Автор: mok Размещён: 09.11.2017 12:28

0 плюса

4463 Репутация автора

Да, вы пропустили точку (.) В floatleftклассе. А также я добавил место для вашего адреса.

header,
nav,
main,
footer {
  display: block;
}

* {
  box-sizing: border-box;
}

body {
  background-color: #3f2860;
  color: #3f2860;
  font-family: Veranda, Arial, sans-serif;
}

header {
  background-color: #9bc1c2;
  background-image: url(lilyheader.jpg);
  background-position: right;
  background-repeat: no-repeat;
  height: 150px;
}

h1 {
  padding-top: 50px;
  padding-left: 2em;
}

nav {
  font-weight: bold;
  float: left;
  width: 160px;
  padding: 1em;
}

nav a {
  text-decoration: none;
  font-weight: bold;
  padding: 1em;
  display: block;
  text-align: center;
  border: 3px outset #CCCCCC;
  margin-botton: 1em;
}

nav a:link {
  color: #497777;
}

nav a:visited {
  color: #497777;
}

nav a:hover {
  color: #A26100;
  border: 3px inset #333333;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
}

main {
  padding-right: 2em;
  margin-left: 170px;
  padding-top: 1em;
  display: block;
}

.floatleft {
  float: left;
  margin-right: 4em;
}

.studio {
  font-style: italic;
}

.company {
  font-style: italic;
}

footer {
  background-color: #9bc1c2;
  font-size: .60em;
  font-style: italic;
  text-align: center;
  padding: 1em;
}

clear {
  clear: both;
}

#wrapper {
  background-color: #f5f5f5;
  min-width: 1200px;
  max-width: 1480px;
  width: 80%;
  margin-right: auto;
  margin-left: auto;
}
<body>
  <div id="wrapper">
    <header>
      <h1>Path of Light Yoga Studio</h1>
    </header>

    <nav>
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="classes.html">Classes</a></li>
        <li><a href="schedule.html">Schedule</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>

    </nav>
    <main>
      <img class="floatleft" src="https://img00.deviantart.net/acf3/i/2013/125/7/7/tegoshi_yuuya___portray_by_lightkataomi-d648nyj.jpg" alt="yoga door" width="225" height="300">
      <h2>Find Your Inner Light</h2>
      <p><span class="company">Path of Light Yoga Studio</span> provides all levels of yoga practice in a tranquil, peaceful environment. Whether you are new to yoga or an experienced practitioner, our dedicated instructions can develop a practice to meet
        your needs. Let your inner light shine at the <span class="company">Path Of Light Yoga Studio</span>.
      </p>
      <ul>
        <li>Hatha, Vinyasa, and Restorative Yoga classes</li>
        <li>Drop-ins welcome</li>
        <li>Mats, blocks, and blankets provided</li>
        <li>Relax in our Serenity Lounge before or after your class</li>
      </ul>
      <br><br><br><br><br>
      <div class='address'>
        <span class="company">Path of Light Yoga Studio</span><br> 612 Serenity Way<br> El Dorado, CA 96162<br><br> 888-555-5555
        <br><br>
      </div>
    </main>
    <footer>
      Copyright &copy; 2016 Path of Light Yoga<br>
      <a href="mailto:Brittany@Tracy.com">Brittany@tracy.com</a><br><br>
    </footer>
  </div>
</body>

Автор: Dhaval Jardosh Размещён: 09.11.2017 12:35
Вопросы из категории :
32x32