Позиционирование текста в блоке css

@iliayu · Регистрация: 16.10.2016

Author24 — интернет-сервис помощи студентам

У меня есть текст скины, хотел перенести чуть правее но не получается, переносится или блок или вообще ничего не происходит.

HTML5

<html>
    <head>
        <title>CSS позиционирование</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="header">
            <br>
            <font size="25" > WIKI SAMP </font>
            <br>Вся нужная информация о Gta San Andreas, для игроков и разработчиков серверов.  
        </div>
        <div id="menu" >
            <a href="" leftmargin="20%"> Cкины</a> 
        </div>
        <div id="content">контент</div>
        <div id="footer">низ сайта</div>
    </body>
</html>

CSS

body{
margin:0px;
}     
#header{
background:#3EABC9;
width:1910px;
height:100px;
}
#menu{
background:#cfcfcf;
width:100px;
height:1000px;
}
#content{
background:#cacaca;
width:1910px;
height:1000px;
position:absolute;
left:100px;
top:100px;
max-width: 1920; 
}
#footer{
background:#3EABC9;
width:1920px;
height:30px;
}

@Qwerty_Wasd · 16.10.2016, 10:23

Здравствуйте. Используйте padding. Почитайте на досуге здесь.

@iliayu · 16.10.2016, 11:06 **[ТС]**

Спасибо, щас попробую padding

@Resume · 16.10.2016, 12:23

У вас есть ошибки в коде.
1) Тэг <font> устарел и не используется уже давно. Вместо него нужно использовать тэг <h1>, поскольку текст внутри - это заголовок.
2) Тэг <br> устарел и не используется уже давно.
Здесь можно ознакомиться с тэгами, которые устарели:
http://htmlbook.ru/samhtml5/us... i-atributy

3) Чтобы задать отступ для ссылки, необходимо в стилях его прописать, потому что такого атрибута, как leftmargin="20%" у тэга <a> нету.

4) У атрибута href тэга <a> обычно ставится решетка(#).

5) Использование position: absolute не нужно, поскольку расположить на одной высоте content и menu можно при помощи свойства float: left.
http://htmlbook.ru/css/float

HTML5

<html>
    <head>
        <title>CSS позиционирование</title>
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <div id="header">
            <h1> WIKI SAMP </h1>
            <p>
            Вся нужная информация о Gta San Andreas, для игроков и разработчиков серверов. 
            </p> 
        </div>
        <div id="menu" >
            <a href="#"> Cкины</a> 
        </div>
        <div id="content">контент</div>
        <div id="footer">низ сайта</div>
    </body>
</html>

CSS

body{
margin:0px;
}     
#header{
background:#3EABC9;
width:1910px;
height:100px;
}
 
#header h1{
  font-size: 25px;
}
 
#menu{
background:#cfcfcf;
width:100px;
height:1000px;
float: left;
}
 
#menu a{
  margin-left: 20%;
}
 
#content{
background:#cacaca;
width:1910px;
height:1000px;
}
 
#footer{
background:#3EABC9;
width:1920px;
height:30px;
}

Результат: https://jsfiddle.net/o4j71n3e/1/

@mrtoxas · 16.10.2016, 12:35

Resume, тэг <br> не устарел. Устарел его атрибут clear

@jur76 · 19.10.2016, 14:49

поддерживаю mrtoxas

@Qwerty_Wasd dev - investigator 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	16.10.2016, 10:23	2
	Здравствуйте. Используйте padding. Почитайте на досуге здесь. 0

@iliayu 1 / 1 / 0 Регистрация: 16.10.2016 Сообщений: 70
	16.10.2016, 11:06 [ТС]	3
	Спасибо, щас попробую padding 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	16.10.2016, 12:35	5
	Resume, тэг <br> не устарел. Устарел его атрибут clear 0

@jur76 0 / 0 / 3 Регистрация: 19.10.2016 Сообщений: 40
	19.10.2016, 14:49	6
	поддерживаю mrtoxas 0

Позиционирование текста в блоке css

Решение