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
Related
Sorry for bad english. How do you align this image to center and adding space on top after the header and for the footer.
Image Link (bc new user)
If I tried this code
margin-left: auto;
margin-right: auto;
width: 50%;
it goes to the center but the background also moves.
What I want is to move the image in the center, having spaces in both header and footer. And background color stays. Below is the code I use.
HTML
<template>
<div class="list">
<headerpc></headerpc>
<dropdown />
<div class="main">
<img src="../home-img/list.png" alt="" />
</div>
<div class="count">
<footerpc></footerpc>
</div>
</div>
</template>
CSS
<style scoped lang="scss">
$font-color: #fff;
.list {
.main {
position: relative;
display: block;
z-index: 1;
background: #131a28;
}
.count {
background: #131a28;
}
}
</style>
you can try giving a specific height to the image and set margin as auto.
img{
width: 300px;
height: 200px;
margin: auto;
}
this will center the image along both axes in its container div.
To center an image, set left and right margin to auto and make it into a block element. here, I have provide the sample code for aligning an image in the center for your reference.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top:10%
margin-bottom:10%
}
</style>
</head>
<body>
<h2>Center</h2>
<img src="img_flower.jpg" style="width:50%;">
</body>
</html>
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>
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 an issue with text from a DIV overlapping the footer section of my webpage. There are 2 DIVS side by side which are a main text area and a links section. However when I type in the left hand box it appears to overflow and fill over the footer section.
Here is a very simple example of my issue, hope someone can show where I am going wrong.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
body{
margin: 0px;
padding: 0px;
text-align: left;
background-color: rgb(242, 242, 242);
}
.wrapper {
width: 940px;
height: auto;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
margin-top: 0px;
min-height: 500px;
background-color: #FFF;
}
.textarea{
width: 65%;
float: left;
height: auto;
background-color: #FFF;
min-height: 0px;
background-color:#F00;
}
#rightmenu{
padding: 0px;
width: 271px;
height: 100%;
float: right;
margin-right: 20px;
}
</style>
</head>
<body>
<div>
<div class="wrapper">
<div class="textarea"> Text Area
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p>This DIV overflows my footer</p>
</div>
<div id="rightmenu">
Side Menu Links
</div>
</div>
<footer>
Footer Section
</footer>
</div>
</body>
</html>
Thanks in advance
Have you tried using the clear style? Have a read here - http://css-tricks.com/the-how-and-why-of-clearing-floats/
Or using overflow good example here - http://css-tricks.com/almanac/properties/o/overflow/
On your footer, try "clear:both" in your CSS.
So:
footer{
clear:both;
}
It will make your footer clear any floated divs (move below them).
I'm (hopefully) trying to horizontally align the text in two div boxes , but as you can see below it isn't happening for me . Please help as I can't see what I'm doing wrong
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.left-div {
vertical-align:top;
float: left;
width: 400px;
height: 250px;
}
.right-div {
vertical-align:top;
margin-left: 400px;
}
</style>
</head>
<body>
<div class="left-div">
<H2> Telephone:</H2>
<strong>Mobile: </strong> 123456789<br />
<strong>Office: </strong> 123456789(answer service)<br />
<strong> Email: </strong>pgbathrooms#hotmail.co.uk
</div>
<div class="right-div">
<H2>Address:</H2>
house<br />
town<br />
county<br />
</div>
</body>
</html>
Here's a working Fiddle
The problem you were having was actually the margin-collapse problem, which was manifesting because your h2 has margin-top, and it was being reflected in one div and not the other.
Vertical-align does not work on block-level elements, only inline-block or inline elements.
You could do one of two things:
Remove the margin-top from your h2: div h2 {margin-top: 0;}
You could add padding to the top of the divs to give the margin something to "push off of"
Changing your css as follows takes care of the problem:
.left-div {
float: left;
width: 400px;
height: 250px;
padding-top: 1px;
}
.right-div {
margin-left: 400px;
padding-top: 1px;
}