I have tried searching for answers but nothing worked. I am trying to align a paragraph. I am pretty sure nothing is overwriting code in CSS. Here is the HTML and CSS:
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main {
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow: auto;
height: 100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}
<body id="top">
<div id="main">
<p id="center">
<h1> TEST </h1>
</p>
</div>
</body>
What is the mistake here?
text-align: center affects pure text nodes as well as child elements that have display: inline; or display: inline-block;. Your assumed child element is h1 which by default has display: block;. So even if it were allowed to have an h1 inside a p, this still wouldn't work (for example if you replaced the <p id="center"> by a <div id="center"> you'd still run into "non-working" centering).
p can only have so-called phrasing content, that is, only certain elements are allowed as child elements inside a paragraph.
Usage of any flow content elements (like e.g. h1) results in automated closing of the "surrounding" p tag. So this is what your browser really renders:
<div id="main">
<p id="center"> </p>
<h1> TEST </h1>
</div>
One last thing, because you said that you're a beginner in frontend matters:
Do not use #id selectors in CSS. Always use CSS .classes instead. When you've progressed alot more, read about the why here: http://oli.jp/2011/ids/
For the text-align: center to work you have to pass also the margin: auto option.
Your HTML is invalid. A <p> can't contain a <h1>. Most browsers will attempt to correct the mistake by closing the paragraph before the heading, and then creating another paragraph after it.
You can remove either the heading or the paragraph and use CSS to style as needed.
jsFiddle example
Give text-align: center to #main h1, like:
#main h1 {
text-align: center;
}
Although you've used <h1> inside of <p>, which is an invalid HTML, and your browser handle it by closing the <p></p> before starting <h1>.
Have a look at the snippet below:
#main h1 {
text-align: center;
}
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main{
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow:auto;
height:100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}
<html>
<head>
<title>HTML PAMOKOS</title>
<link rel="stylesheet" href="../assets/css/html.css" />
</head>
<body id="top">
<div id="main">
<p id="center"></p>
<h1> TEST </h1>
</div>
</body>
</html>
Hope this helps!
body {
background-image: url("../../images/pic01.jpg");
background-repeat;
}
#main{
background-color: rgb(255, 84, 0);
width: 75%;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
margin-top: auto;
overflow:auto;
height:100%;
color: rgb(255, 255, 255);
}
#center {
text-align: center;
}
h1{
text-align: center;
}
<!DOCTYPE HTML>
<html>
<head>
<title>HTML PAMOKOS</title>
<link rel="stylesheet" href="../assets/css/html.css" />
</head>
<body id="top">
<div id="main">
<p id="center"> <h1> TEST </h1> </p>
</div>
</body>
</html>
Related
For some reason, the first word of my paragraphs keep appearing above my blockquotes. My code structure looks something like this:
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<head>
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
<!-- CSS style to put div side by side -->
<style type="text/css">
.container {
width:600px;
height:190px;
}
#ab-box {
float:left;
width:360px;
height:160px;
background-color:white;
}
#tb-box {
float:left;
width:180px;
height:160px;
background-color:white;
}
</style>
</head>
<body>
<div class="container">
<div id="ab-box">
<blockquote style="border: 2px solid #666; padding: 10px; background-color: #fff; width: 240px"> <b>AUTHOR:</b>
<br><br>{{NAME}}</blockquote>
</div>
<div id="tb-box">
<blockquote style="border: 2px dotted #666; padding: 10px; background-color: #fff; width: 240px"> <b>PUBLISHED:</b>
<br><br>December 1993</blockquote>
</div>
</div>
<div>
<p>Dear *|SUBSCRIBER|* - <br /><br />We're happy to have you onboard!</p>
</div>
</body>
This isn't a perfect representation... But the word "Dear" in the paragraph below keeps appearing above the blockquotes for some reason. The rest of the paragraph moves just fine and is perfectly in line - it's just that one word. And if I duplicate the paragraph, I get the same issue. Please assist; thank you in advance!
close your "style" tag
<style>
blockquote {
display: block;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0px;
margin-right: 0px;
}
p {
width: 640px;
}
</style>
Hello and welcome to StackOverflow. Your code has two errors: first of all, you opened the style tag two times, firstly after the head open and then after the comment
<!-- CSS style to put div side by side -->
Second, the comment is an Html comment, not a Css one: inside Style tags you cant use html comments
<!-- blabla -->
Instead, you have to write them like this
body {
background: red;
height: 100%;
/*
width: 100%;
display: flex;
Multi line comment
*/
}
Here you can find a more detailed example.
https://www.w3schools.com/css/css_comments.asp
Cheers!
I am trying myself a bit on Website layout.
So I have started designing a page.
I want my start page to be divided with a horizontal division line.
So far, so good.
Now each of the two fields needs some text and I want the text to have a vertical align: bottom.
My research on the internet got me the result that there is no real possibility to do like that for <div> tags. But there is one for a table cell.
My HTML code looks like that:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>TITLE</title>
<link href="firstPage.css" rel="stylesheet" type="text/css">
</head>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<section class="half">
<div class="titletext">
TEXT
<br>
TEXT
</div>
</section>
<body>
</body>
</html>
and my CSS class looks like that:
#charset "UTF-8";
* {
margin: 0; padding: 0;
}
html, body, #container {
height: 100%;
font-family: 'corbertregular', arial, sans-serif;
font-size:24px;
}
header {
height: 50px;
background: gray;
}
main {
height: calc(100% - 50px);
background: green;
}
.half {
height: 50%;
position: relative;
}
.half:first-child {
background: #F3A008;
}
.half:last-child {
background: #950049;
}
.titletext{
text-align:center;
display: table-cell;
vertical-align: bottom;
}
I have found that site as a useful solution,
but it does not work for me....
http://phrogz.net/css/vertical-align/
What am I doing for a mistake?
Change this class in your CSS:
.titletext{
text-align: center;
display: table-cell;
position: absolute;
bottom: 0;
}
I have a simple HTML page in which i want to align Div vertically middle of another div. There is one way of using positioning concept. But i want to use vertical-align property.
Below is my html and css files.
What i am trying to do is to place <div class='plink'> vertically centered which is inside of
<div class='tiles'>
.plink{
height: 100%;
vertical-align: middle;
}
is also not working
index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="/favicon.icon" type="image/jpeg">
<link rel="stylesheet" href="style.css" type="text/css">
<title>Some title</title>
</head>
<body>
<main>
<h1>Some heading</h1>
<hr>
<div id="tilescontainer">
<div class="tiles" id="tile_1">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_2">
<div class="plink">some text</div>
</div>
<br>
<div class="tiles" id="tile_3">
<div class="plink">some text</div>
</div>
<div class="tiles" id="tile_4">
<div class="plink">some text</div>
</div>
</div>
</main>
</body>
</html>
style.css
/*Main style sheet*/
main{
height: 600px;text-align: center;
}
a{
text-decoration: none;
}
/*tilescontainer*/
#tilescontainer{
text-align: center;position: relative;top: 10%;
}
/*tilescontainer*/
/*tiles*/
.tiles{
display: inline-block;height: 200px;width: 200px;box-shadow: 2px 2px 2px #808080;margin: 5px;text-align: center;vertical-align: middle;
}
/*tile_1*/
#tile_1{
background-color: #ff8000;
}
#tile_1:hover{
background-color: #808080;
}
/*tile_1*/
/**/
#tile_2{
background-color: #00aced;
}
#tile_2:hover{
background-color: #808080;
}
/**/
/**/
#tile_3{
background-color: #82858a;
}
#tile_3:hover{
background-color: #808080;
}
/**/
#tile_4{
background-color: ;
}
#tile_4:hover{
background-color: #808080;
}
span{
border: 2px solid;
}
/*tiles*/
Here at w3schools example is give i tried this link
Have you tried working with the table display modes?
When I am doing css styling I find vertical alignment to work well with these technique.
Example:
.title{
display: table;
}
.plink{
display:table-cell;
height: 100%;
vertical-align: middle;
}
I think what you want to do with the vertical-align property is not what it was designed to do and therefor not possible. This article explains why:
Vertical Alignment
Hey beginner coder here:
I'm trying to achieve this: http://i.imgur.com/aVawhET.png with this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Uppgift 5</title>
<style>
body{
margin-top: 25px;
margin-left: 15px;
width: 100%;
height: 100%;
}
#text{
width: 90%;
display: inline-block;
}
#text p{
word-break: break-all;
}
#image{
height: 500px;
width: 5%;
display: inline-block;
background-image: url("bakgrund.jpg");
background-repeat: repeat-y;
}
</style>
<div id="container">
<div id="text">
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
<p>
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextv
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
TextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextTextText
</p>
</div>
<div id="image">
</div>
</div>
but I fail and get this result: http://imgur.com/ac0nSqz what am I doing wrong? I've tried things like adding minus margin values. Why is it jumping down?
The correct answer is:
#text,
#image { vertical-align: top; }
The reason is because inline-block elements are, by default, aligned by their baselines - so the bottom of both div's are in line with each other - meaning that their will be a space at the top of the shorter div when it's placed in line with a taller div to make the bottoms of these divs line up.
CSS
body{
margin-top: 25px; ///Remove this
}
Add margin-top: 0 in body tag
I have some simple css that is meant to display a paragraph element in the middle(vertically) of its parents div.
My Problem: The paragraph element does't vertically align to the middle it always sits at the top. This solution only has to work on Safari(iPad's Safari version specifically).
Do you know how to get my paragraph element to vertically align to the middle?
<html>
<head>
<style type="text/css">
<!--
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
}
.buttonBoxContainer {
cursor: pointer;
}
-->
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>
If your box will always have a static height, you can use line-height to center the paragraph element, as shown here.
If it won't be static, the best solution (In my experience) is to use javascript.
<html>
<head>
<style>
.ButtonBox {
cursor: pointer;
vertical-align: middle;
text-align: center;
background-color: blue;
height: 200px;
color: #fff;
}
.buttonBoxContainer {
cursor: pointer;
line-height: 200px;
}
</style>
</head>
<body>
<div class="ButtonBox">
<p class="buttonBoxContainer">Press Me</p>
</div>
</body>
</html>