HTML / CSS div не выравнивается вверху страницы - PullRequest
Новая
       5

HTML / CSS div не выравнивается вверху страницы

2 голосов
/ 02 марта 2012

извините за то, что кажется мне вопросом на вопрос, но никто из них не решил мою проблему.

все настройки полей, полей и отступов установлены на 0px, кроме отступа margin-left и margin-right основного раздела страницы, который установлен на 15px с обеих сторон. по крайней мере, я нигде не вижу, я забыл установить один из них в 0px ...

по какой-то причине верхний элемент страницы не будет выравниваться по верху страницы.

если я помещу какой-либо текст между тегом <body> и тегом <div class="main">, это будет трудно в верхней части экрана, но любой текст внутри тега div "main" или div "header" тег будет иметь отступ около 15 пикселей от верхней части экрана.

header.php: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<?php header('Content-Type: text/html; charset=utf-8'); ?>
<title><?php echo $title; ?></title>
<link href='css/main.css' rel='stylesheet' type='text/css' />
</head>

<body>

<div class='main'>
    <div class="header">

        <img src="images/header1.png" id="header" />
    </div>

    <p class='heading_1'>Welcome to D T Hourn Photography</p>
    <p class='bodycontent'>
        Introduction blob
    </p>
    <p class='bodycontent'>
        Albums:
    </p>

css.main: 

html
{
border:0px;
padding:0px;
margin:0px;
}

body
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
background-image: url('../images/bg1.png');
background-attachment:fixed;
padding:0px;
margin:0px;
border:0px;
}

.main
{
top:0px;
margin-top:0px;
margin-right:15px;
margin-left:15px;
margin-bottom:0px;
border-top:0xp;
border-left: 2px outset #445566;
border-right: 2px outset #445566;
width:93%;
max-width:1400px;
background: rgb(222, 222, 222);
background-color:rgba(255, 255, 255, 0.6);
}   


.header
{
    border-bottom: 2px groove red;  
    margin:0px;
    background-image:url('../images/header1.png');
    background-size:100% 100%;
    height:200px;
}


img#header
{
    width:100%;
    height:200px;
    vertical-align: bottom;
    border:0px;
    padding:0px;
    margin:0px;

}

.heading_1 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    height:1.5em;
    font-weight: bold;
    color: #000000;
}

.heading_2
{
    font-weight: bold;
}

table
{
    border:1px solid #0000ff;
    padding:0px;
    border-collapse:collapse;
    background-color:#ffffff;

}
.tables_heading 
{
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 1em;
    font-weight: bold;
    background-color: #99ccff;
    border-bottom:1px solid #0000ff;
}

РЕДАКТИРОВАТЬ: добавлен дополнительный код из файла header.php. как сказал, если я положил простой текст между ними, а затем этот текст трудно в верхней части браузера. но что-нибудь между div имеет границу ~ 15 пикселей.

фактический онлайн-сайт (что я делал до сих пор) можно увидеть на http://dthourn.com/photography

Живая версия отображается так, как я хочу, в Firefox (по крайней мере, на моем компьютере), но не в I.E или Google Chrome. он не отображается так, как я хочу, в любом браузере на моем локальном компьютере.

Ответы [ 7 ]

14 голосов
/ 28 апреля 2013

Добавьте просто этот файл в свой CSS-файл: 

body { margin:0px; }

Надеюсь, это решит вашу проблему.

1 голос
/ 01 августа 2016

Просто используйте ... 

*{margin: 0; padding: 0; border: 0; outline: 0;}
0 голосов
/ 01 сентября 2016

Я подумал, что я бы забрал здесь свои два цента: просто фрагмент вашего css, много ненужного кода здесь, поэтому вынул его и сократил его: 

.main
{
margin: 0 auto;
border-left: 2px outset #445566;
border-right: 2px outset #445566;
width:93%;
max-width:1400px;
background: rgb(222, 222, 222);
background-color:rgba(255, 255, 255, 0.6);
}

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

0 голосов
/ 01 апреля 2016

Для людей, плохо знакомых с HTML, некоторые теги (например, <p> и <h1>) добавляют отступы, чтобы они не доходили до верхней части страницы. Мне нравится использовать <span>, когда я сталкиваюсь с этой проблемой.

0 голосов
/ 07 декабря 2013

Я работал над этим тестом в течение нескольких часов.Я скопировал и вставил ответ квестиста, и наконец он сработал.Больше нет места наверху.Я сбросил все, что мог подумать, до 0px, но я явно пропустил один.

0 голосов
/ 03 марта 2013

Добавьте следующее в начало вашего CSS-файла: 

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; }

Затем, далее, убедитесь, что снова добавили различные элементы внутри вашего div-элемента, например: 

p { font-size: 12px; padding: 12px; }

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

0 голосов
/ 02 марта 2012

попробуй: 

.main
{
top:0px!important;
margin-top:0px!important;
margin-right:15px!important;
margin-left:15px!important;
margin-bottom:0px!important;
border-top:0xp!important;
border-left: 2px outset #445566!important;
border-right: 2px outset #445566!important;
width:93%!important;
max-width:1400px!important;
background: rgb(222, 222, 222)!important;
background-color:rgba(255, 255, 255, 0.6)!important;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...