CODEWITHSUNDEEP
htmlcssdjangotwitter-bootstrapbootstrap-modal
P3P5
P3P5

Reputation: 1003

Why is django displaying white lite on top of the page when using bootstrap

when I render my html file, I want to display on top of the page my header, but django displays a white line on top. This is how it looks like:

enter image description here

I want all, from top of the page to be orange, and not to have that white line on top of the page. How to do that?

This is my html code:

{% load staticfiles %}
<!DOCTYPE html>

<html lang="en">
<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <title>{% block title %}{% endblock %}</title>

    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <!-- Custom Fonts -->
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>

    <link href="{% static "css/blog.css" %}" rel="stylesheet" type="text/css" />

    <!-- Theme CSS -->

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body><!-- Navigation -->
    <!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->

    <div class="page-header">
        <h1>My First Bootstrap Page</h1>
        <p>Resize this responsive page to see the effect!</p>
    </div>

    <!-- Main Content -->
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                {% block content %}
                {% endblock %}
            </div>
        </div>
    </div>
</body>
</html>

My css file:

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding-top: 0;
    padding: 20px 20px 20px 40px;
}

When I just double click my html file to open it in the browser it looks fine, but when I start my server via django, it doesn't look good. Thank you for your help.

Upvotes: 0

Views: 154

Answers (1)

Fran&#231;ois Constant
Fran&#231;ois Constant

Reputation: 5496

django displays a white line on top

This has nothing to do with Django. It's a CSS issue.

You wrote this:

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding-top: 0;
    padding: 20px 20px 20px 40px;
}

The last line overwrite padding-top with 20px. Replace your CSS with:

.page-header {
    background-color: #ff9400;
    margin-top: 0;
    padding: 0 20px 20px 40px;
}

When I just double click my html file to open it in the browser it looks fine, but when I start my server via django, it doesn't look good.

That's probably because your custom CSS isn't loaded when you just open the HTML file. Your browser cannot read {% static "css/blog.css" %}.

Upvotes: 1

Related Questions