I'm getting a little problem with my HTML page. I would like to set my horizontal line to the left side.
Up to now, my line is always situated in the center of my page and I don't reach to move this line between my text.
This is my little HTML script :
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
margin:left;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
(variable)
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
(variable)
</div>
</html>
And my HTML page looks like :
Do you have an idea ?
You can try set display: inline-block; to your <hr> to render the horizontal line as an inline element with block properties.
Also make sure that your markup and CSS is valid! E.g. a CSS rule margin: left; is wrong. Right would be: margin-left: 10px;.
Plus: It's not recommended to use inline styles, as the code becomes less maintainable. Try defining the rules in the CSS section of your HTML document or a separate CSS file.
.header {
line-height: 80%;
}
hr {
width: 10%;
display: inline-block;
}
<div class="header">
<h3> Département </h3>
<p>(variable)</p>
<hr>
<h3> Commune </h3>
<p>(variable)</p>
</div>
Just add (variable) text inside any HTML element. So that hr tag will come below it.
<html>
<head>
{% load staticfiles %}
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="{% static 'css/Base.css' %}"/>
<style>
body {
font-family: Courier New, Courier, monospace;
text-align: justify;
list-style-type: none;
}
.header {
line-height: 80%;
}
</style>
</head>
<body>
<div class = "header">
<h3> Département </h3>
<p></p>
<span>(variable)</span>
<hr align="left" width="10%">
<h3> Commune </h3>
<p></p>
<span>(variable)</span>
</div>
</html>
Related
I was trying to link a css file to my html, and for some reason the css won't load in. Below I'll supply the html and css code. When I open the page source, the css href works fine, I can click on it and it takes me to the css file, but when I inspect I can see that the css file is not part of sources. I've tested my code on JSFiddle and it works fine there, as well as on the snippet here. I also tried pressing ctrl + f5 and shift + f5 to refresh the page without caches, but nothing changed. So I don't know what else to do to fix this. I've been doing it on Chrome so I tested it real quick on Firefox but still, no changes. Thanks in advance for any help.
raw html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="'stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
</head>
<header>
<div class="site-header" width="100%" height="100px">
<h3><a class="site-header-link" href="/polls">Home</a></h3>
</div>
</header>
<body>
{% block content %}{% endblock %}
</body>
</html>
Runnable html and css.
li a {
color: green;
}
body {
background: grey;
}
.question-display {
border-color: black;
border-width: 5px;
position: center;
}
.question-link {
text-decoration-line: none;
}
.choices {
}
.question-container {
}
.site-header {
color: aqua;
}
.site-header-link {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="'stylesheet" type="text/css" href="/static/polls/styles.css">
</head>
<header>
<div class="site-header" width="100%" height="100px">
<h3><a class="site-header-link" href="/polls">Home</a></h3>
</div>
</header>
<body>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="3/">What's your favorite game?</a></ln>
</div>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="2/">How are you?</a></ln>
</div>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="1/">What's up?</a></ln>
</div>
</body>
</html>
You have an additional quote in the rel= property. It should be:
<link rel="stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
I'm trying to design a simple page about pets I would like to have. I can't seem to figure out why my HTML won't link to my CSS file. I'm using Atom.
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
}
p {
text-decoration: line-through;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> My Website about Pets</title>
<link rel="stylesheet" href="styles.css" type = "text/css" />
</head>
<body>
<h1> Pets</h1>
<h3> Below is a list of descriptions of pets that I would like to have. </h3>
<div class="center">
<img src="https://s7d1.scene7.com/is/image/PETCO/ball-python-1" alt="Ball Python"
height="200">
<p> A picture of a noodly boi</p>
</div>
<h2>Ball Python</h2>
<p> I would like to have a pet ball python. I don't care what gender it is, but it's name will be Goose.</p>
</body>
</html>
These files are both in the same folder on my desktop.
The image tag does not work. Not sure if I'm missing something or I added the image tag incorrectly. The image is in the same folder, so there's no problem in inserting the picture.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="type the content description here" />
<meta name="keywords" content="type, keywords, here" />
<link rel="stylesheet" href="text.css" type="text/css" />
<style type="text/css">
h1.align1 { text-align: center; }
h2.align2 { text-align: center; }
h3.align3 { text-align: center; }
</style>
</head>
<body style="background-color: black;">
<h1 class="align1" style="color: yellow;"><font size="8"> TEXT </h1>
<hr style="white" />
<h2 class="align2" style="color: red;"><font size="10"> TEXT </h2>
<hr style="white" />
<h3 class="align3" style="color: blue;"><font size="10"> TEXT </h3>
<img src="years1.jpg" />
</body>
</html>
You have to close your font tags (the unfinished tags may affect elements following these, in this case "image").
For example:
<h1 class="align1" style="color: yellow;"><font size="8"> TEXT </font></h1>
font tag is deprecated obsolete in HTML5 anyway, so you should write like this:
<h1 class="align1" style="color: yellow; font-size: 8em; "> TEXT </h1>
It's a img path issue. Please use a suitable file path for the image,
and also remove the font tag and use it under style.
I have made a style sheet and have tried to place it inside the head tags of my .html file, but the style is not executing. What am I missing?
Here is my style sheet, saved as myStyle.css:
body {
color: white;
font-family: Verdana;
text-align: center;
background-color: #333333;
}
p {
font-size: medium;
}
h1 {
font-size: xx-large;
}
and here is my HTML code...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="myStyle.css" />
</head>
<body>
<h1>Something Something</h1>
<p>Launching in the Summer 2016</p>
<p>ipsum loren il advica en tu tucci el ario</p>
<div id="slideshow">
<div>
<img src="...\354\Images\trovi.jpg">
</div>
</div>
<p></p>
DIGIT Game Studios
</body>
</html>
This code works. The problem is with your link to the CSS. What is your directory structure?
https://stackoverflow.com/questions/13568693/collapsed-wesite-template-when-i-mininize-the-browser. Sorry for my previous meaningless question.
I have a HTML website template with 100% width. The webpage is showed correctly in full browser window. But i change the size of the browser window means the entire design collapsed. I think the fault is in css html and body tag. can any one fix this error.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>title</title>
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen" />
</head>
<body>
<header id="header">
<hgroup>
<h1 class="site_title">Admin</h1>
<h2 class="section_title">Dashboard</h2><div class="btn_view_site">View </div>
</hgroup>
</header> <!-- end of header bar -->
<section id="secondary_bar">
<div class="user">
<p>John Doe (3 Messages)</p>
<!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container">
<article class="breadcrumbs">Admin <div class="breadcrumb_divider"></div> <a class="current"></a></article>
</div>
</section><!-- end of secondary bar -->
css :
html, div, map, dt, isindex, form, header, aside, section, section, article, footer {
display: block;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
background: #F8F8F8;
font-size: 12px;
}
.clear {
clear: both;
}
I'm still not sure exactly what you want. However, if you don't want the width of the page to resize then you need to use a size unit that will not change with the width of the window, such as px or em, for example:
width: 1000px;