Размещение и пропорция размещения баннера

Я работаю над проектом, и по какой-то причине я не могу получить баннер в нужном месте. Существует код, который я смотрю на Шляпа это установить, как я хочу быть:Размещение и пропорция размещения баннера

HTML:

  <!doctype html> 
      <html lang="en"> 
      <head> 
       <meta charset="utf-8"> 
       <title>Title</title> 
       <link rel="stylesheet" href="css/styles.css"> 
      </head> 
      <body> 
      <div class="container"> 

       <header> 
        <h1> 
         <a href="index.html"> 
          <img src="images/logo.png" alt="logo"> 
          <!--<div>--> 
           They're Animals 
          <!--</div>--> 
         </a> 
        </h1> 
       </header> 



      </div><!--.container--> 
      </body> 
      </html>

и CSS, который работает для моего идеального баннера:

  /* ************************************* 
       Base 
       ************************************* */ 
      body { 
       background-color: #dfeff0; 
       color: #333333; 
       font-family: Arial, Helvetica, sans-serif; 
      } 

      header a { color: #ad235e;} 
      header a:hover { color: #000000;} 
      h1 { 
       color: #ad235e; 
       font-size: 14px; 
      } 
      h1 a:hover img { opacity: 0.7;} 


      /* ************************************* 
       Modules 
       ************************************* */ 
      .container { 
       margin: 0 auto; 
       width: 90%; 
       max-width: 960px; 
       position: relative; 
      }

Я пробовал копировать CSS для ввода моего проекта (и html), и он все еще не работает.

С фактическим текстом и дополнительной информацией там нет.

Я думаю, то, что может быть более полезным является код, который я пытался сам по себе:

  <!doctype html> 

       <html lang="en"> 

       <head> 
        <meta charset="utf-8"> 
        <title>Title</title> 
        <link rel="stylesheet" href="css/styles.css"> 
       </head> 

       <div class="container"> 

       <header> 
        <h1> 
         <img src="images/banner.png" alt="banner"> 
         <!--<body background="images/banner.png" alt="banner" >--> 
         Home Page 
        </h1> 

       </header> 

       </div>

и моя попытка CSS:

  h1 
       { 
       text-decoration:underline; 
       text-align:center; 

       } 

      h1 img 
       { 
       height: 40%; 
       width: 40%; 
       margin: 0px 10px; 
       padding: 5px; 
       float: left; 
       } 
      .container 
       { 
       width: 80%; 
       max-width: 960px; 
       margin:0px auto; 
       }

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

This is what I would like my header to look like (the logo right next to the title without it pushing the content away

With my content on my page, this is how it actually looks.

источник

2014-11-29 Sakvad

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

Я считаю, вы можете добавить одну строку в свой .container CSS и исправить проблему.

overflow: auto;

источник

2014-11-29 04:53:14

Благодарю вас за предложение, но это не совсем то, что я ищу. Я собираюсь попытаться поставить фотографии, чтобы помочь визуализировать то, что я ищу. – Sakvad

Размещение и пропорция размещения баннера

ответ

Смежные вопросы