Невозможно разместить элементы HTML с помощью CSS

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

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "description" content = "This is the homepage of this website"> 
     <title>Home</title> 
     <style> 
      body{margin-top: 0px; background-color: #FBFBFB;} 
      .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
      .header img{float: left; padding: 5px; background-color: orange;} 
      .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; letter-spacing: 1.2px; background-color: pink;} 
      .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; top: 0px; left: 70px; background-color: lime;} 
     </style> 
    </head> 
    <body> 
     <div class = "container" > 
      <div class = "header"> 
       <img src = "a.png" alt = "logo" width = "100" height = "100"></img> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
      </div> 
     </div> 
    </body> 
</html>

Это выход я получаю

enter image description here

Я хочу взять Слоган часть ближе к названию сайта, я попытался изменить отступы и поля для 0px, но не повезло. Как я могу это сделать ? Далее Если я ввожу границу, как этот

.header{border: 1px solid black;}

Он принимает изображение в верхней части, как показано на скриншоте ниже enter image description here

Почему это происходит?

источник

2013-05-29 Call Me Dummy

Что вы изменили «padding» и «margin»? 'H1' или' p'? По умолчанию оба они имеют поля, которые могут вызывать этот интервал. – ASGM

yes Я пробовал задавать маржу и заполнение h1, p и img до 0 px –

необходимо удалить границу с тега .header h1 - вместо вашего margin-left:100px; попробуйте margin: 0 0 0 100px. Также некоторые браузеры помещают верхнюю маржу в теги p, поэтому вы можете также сбросить этот запас.

Вы не можете добавлять padding или background-color тега изображений

Если у вас есть хром, попробуйте использовать встроенный DOM Inspector (правая кнопка мыши и осмотрите элемент), он покажет вам, что происходит с элементами

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

<div class = "container" > 
     <div class = "header"> 
      <div class="imageHolder"><img src = "http://lorempixel.com/100/100" alt = "logo" /></div> 
      <div class="textHolder"> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
      </div> 
     </div> 
    </div>

, а затем вы можете использовать следующие стили:

body{margin-top: 0px; background-color: #FBFBFB;} 
.container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
.header .imageHolder {float: left; width:110px; background-color: orange;} 
.header .imageHolder img {margin:5px;} 
.header .textHolder {float:right; width:1090px;} 
.header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink; margin:0;} 
.header p {margin:0; color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; position: relative; background-color: lime; margin-left:-30px; width:1120px;}

http://jsfiddle.net/peteng/XJVW3/

источник

2013-05-29 10:52:35 Pete

Это заняло заголовок и img на верх. Но как мне поместить tagline ближе к заголовку? –

плавать и ваши h1 и p справа – Pete

плавающий не помог, он взял h1 и p вправо, как будто в одной строке, которая не то, что я хотел. Я просто хочу заполнить белый промежуток между заголовком и тегом. –

И <h1> и <p> имеют поля по умолчанию, которые могут вызвать пространство, которое Вы видите появляются. Добавление этого CSS должны это исправить:

.header h1 {margin:0 0 0 100px;} 
.header p {margin:0;}

Граница изменения положения элементов представляет собой отдельный вопрос, и из-за чего-то под названием «сворачивания полей», которая ответ на этот вопрос в другом месте на StackOverflow уже хорошо объясняет: Adding CSS border changes positioning in HTML5 webpage.

Решения этой проблемы является добавление верхнего отступа к .header элементу для компенсации сложенных полей:

.header {padding-top:30px;}

источник

2013-05-29 10:53:07 ASGM

um 30 случайное значение или вы его подсчитали? –

@CallMeDummy 30 - это случайное значение. Отрегулируйте его на досуге. – ASGM

Попробуйте ваше изображения имеет ширину 100px и отступы 5+5 так попробуйте добавить оставила 110px вместо 70px ... редактировать

добавить margin-top: 0px; header p и .header h1 margin-bottom: 0px;, чтобы удалить S темп между p and h1

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "description" content = "This is the homepage of this website"> 
     <title>Home</title> 
     <style> 
      body{margin-top: 0px; background-color: #FBFBFB;} 
      .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
      .header img{float: left; padding: 5px; background-color: orange;} 
      .header h1{font-size: 40px; font-family: "lucida console"; margin-left: 100px; margin-bottom:0px; letter-spacing: 1.2px; background-color: pink;margin-bottom: 0px;} 
      .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; top: 0px; margin-left: 110px; background-color: lime;margin-top: 0px;} 
     </style> 
    </head> 
    <body> 
     <div class = "container" > 
      <div class = "header"> 
       <img src = "a.png" alt = "logo" width = "100" height = "100"></img> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
      </div> 
     </div> 
    </body> 
</html>

источник

2013-05-29 10:56:46 sAnS

попробуйте это !!

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset = "utf-8"> 
     <meta name = "description" content = "This is the homepage of this website"> 
     <title>Home</title> 
     <style> 
      body{margin-top: 0px; background-color: #FBFBFB;} 
      .container{width: 1200px; margin-left: auto; margin-right: auto; margin-top : 0px; background-color: white; } 
      .header img{float: left; padding: 5px; background-color: orange;} 
      .header h1{font-size: 40px; font-family: "lucida console"; letter-spacing: 1.2px; background-color: pink;} 
      .header p{color: gray; font-family: Verdana; font-size: 15px; letter-spacing: 1.4px; background-color: lime;} 
     </style> 
    </head> 
    <body> 
     <div class = "container" > 
      <div class = "header""> 
       <img src = "http://thecontentwrangler.com/wp-content/uploads/2011/08/User.png" alt = "logo" width = "100" height = "100"></img> 
       <div> 
       <h1> Website name </h1> 
       <p><strong>- Tagline ,if any, goes here</strong></p> 
       </div> 
      </div> 
     </div> 
    </body> 
</html>

источник

2013-05-29 11:01:24 abhishekgarg

Невозможно разместить элементы HTML с помощью CSS

ответ

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