It appears as if there is padding between two of my elements - content1 and footer. I do not want this 'padding' but I cannot understand why it is there at all. Here is part of problematic html text on its own - the 'padding' still appears. I've tried adding in padding: 0 and margin: 0 to both the elements with no result.
<style type="text/css">
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
</style>
<body>
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
</body>
In response to the proposed answer to this question. I have removed the image from the text and unfortunately the 'padding' was not removed.
It seems that your paragraph tag has a margin.
Apply this css rule:
.footer p {
margin: 0;
}
Here is a fiddle
You have encountered collapsing margins.
When elements have top or bottom margin, and the parent element doesn't have a border or padding, the margins collapes. The effect is that the margin is visible outside the parent element, not between the parent element boundaries and the child element.
It's the margin of the p element in the footer that is collapsing. It creates the distance between the content1 and the footer element.
By removing the margin on the p element, you get rid of the distance:
.footer p {
margin: 0;
}
Demo:
.footer p {
margin: 0;
}
body{
margin: 0;
}
.footer{
position: relative;
width: 100%;
min-width: 512px;
height: 150px;
background-color: black;
font-size: 12px;
font-family: arial;
color: gray;
z-index: 5;
}
.content1{
position: relative;
width: 100%;
height: 300px;
background-color: #E6E6E6;
z-index: 5;
}
.imagecontainer{
height: 80%;
float: right;
}
.image{
position: relative;
display: block;
height: 100%;
}
<div class="content1">
<!--<div class="textcontainer">
<p style="color: gray; font-size: 15px; font-family: arial;">this is some text</p>
</div>-->
<div class="imagecontainer">
<img class="image" src="C:\Users\wrigh\Pictures\SWITCH\capture01.png"></img>
</div>
</div>
<div class="footer">
<center><p style="padding-top:50px; max-width: 50%;">ONLY AVAILIBLE ON ANDROID<br><br>UPDATE: NO CURRENT WORK IS SCHEDULED</p></center>
</div>
if you want, you can always CSS your way through it, something like
* { margin:0; padding:0; }
It should reset All elements, after that you define new paddings and margins, which is much easier ;)
Your using a <center> tag if your using HTML5 it's not supported... if your not using HTML5 the <center> tag is a block element, add display: inline-block in the css.
Related
I have inline-block elements. These are glyphs and can contain SVG content, but don't contain text.
The problem is that these elements don't line up with text:
.example {
line-height: 32px;
margin: 12px 0;
}
.wrapper {
display: inline-block;
height: 24px;
width: 24px;
position: relative;
background-color: red;
}
.wrapper > .content {
position: absolute;
bottom: 3px;
right: 3px;
height: 12px;
width: 12px;
background-color: blue;
}
<div class=example>
<div class=wrapper>
<div class=content>
</div>
</div>
not aligned with text
<div class=wrapper>
<div class=content>
</div>
</div>
</div>
I can shift down individual elements easily enough, but it's messy and requires lots of micro tweaking.
I can't rely on the line height and icon size being identical, and the SVG inside are overlaid, which requires absolute positioning.
Is there a way to make these consistently vertically centre with text?
Specify vertical-align:bottom to wrapper class :
.example {
line-height: 24px;
margin: 12px 0;
}
.wrapper {
display: inline-block;
height: 24px;
width: 24px;
position: relative;
background-color: red;
vertical-align:bottom;
}
.wrapper > .content {
position: absolute;
bottom: 3px;
right: 3px;
height: 12px;
width: 12px;
background-color: blue;
}
<div class=example>
<div class=wrapper>
<div class=content>
</div>
</div>
aligned with text
<div class=wrapper>
<div class=content>
</div>
</div>
</div>
I want to add text on top of two images and then place them side by side. I tried do this in the following way:
#main {
position: fixed;
min-width: 100%;
min-height: 100%;
}
#front-header {
font-family: "Linux Biolinum";
font-size: 42pt;
line-height: 0pt;
font-weight: bold;
text-align: center;
}
#PI {
font-family: "Linux Libertine";
font-size: 22pt;
line-height: 0pt;
font-weight: normal;
font-style: normal;
text-align: center;
color: red;
}
#copyright {
font-family: "Latin Modern Mono";
font-size: 10pt;
line-height: 0pt;
font-weight: normal;
text-align: center;
}
#meerkat {
width: 18cm;
height: 14cm;
}
#salt {
width: 17.5cm;
height: 14cm;
}
#figu {
display: inline-block;
float: left;
margin-left: auto;
margin-right: auto;
height: 30px;
}
#container {
height: 17.5cm;
width: 14cm;
float: left;
position: relative;
}
#images {
position: relative;
float: left;
left: 0;
top: 0;
}
#text {
z-index: 100;
position: absolute;
color: white;
font-size: 24px;
font-weight: bold;
left: 50px;
top: 50px;
}
.image {
position: relative;
float: left;
/* optional */
}
.image .text {
position: absolute;
top: 10px;
/* in conjunction with left property, decides the text position */
left: 10px;
width: 300px;
/* optional, though better have one */
}
<body style=" height: 723.09px;">
<p id="front-header">Learning HTML</p>
<p id="PI">Author:TH</p>
<p>
<br>
</p>
<p>
<br>
</p>
<div>
<img title="MeerKAT" alt="MeerKAT" id="meerkat" src="meerkat.jpg" border="0">
<div style="background-image:url('SALT-1.jpg');background-repeat:no-repeat;height:20cm;width:20cm;">
<h1 style="color:white;">Hello World!.</h1>
</div>
</div>
<br>
<div>
<p id="copyright">Created Today</p>
</div>
</body>
I want to add text on top of the figures named "meerkat.jpg" & "salt-1.jpg". After that I want to place them side by side.
Please suggest. Thanks.
There are several solutions to achieve this and this is my take. I make use of the display: flex; property that is being explained at MDN. Examining the code in your question, I expect that you don't have that much experience in CSS, so I got rid of all the code and made a clean example.
When you set an image as background-image, you can just add an <hX> element inside of it to add the text on top of the image.
Another solution I provided is in the second row and makes use of position: relative; and position: absolute; together with an inline image. Setting the container to relative and the text that's inside of it to absolute will only affect the text inside the div.
You could also use float, but this can cause problems to your layout.
.container {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.image-wrapper {
background-image: url('http://i.imgur.com/AzeiaRY.jpg');
flex: 1;
width: 50%;
height: 300px;
border: 2px solid red;
/* Only to show that there are two images */
}
.image-wrapper h1 {
color: #fff;
margin: 0;
}
.container-position {
margin-top: 100px;
}
.image-wrapper-position {
position: relative;
flex: 1;
width: 50%;
}
.image-wrapper-position h1 {
position: absolute;
left: 20px;
top: 20px;
color: #fff;
margin: 0;
padding: 0;
}
<div class="container">
<div class="image-wrapper">
<h1>This is text</h1>
</div>
<div class="image-wrapper">
<h1>This is text on top of image</h1>
</div>
</div>
<div class="container container-position">
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
<div class="image-wrapper-position">
<img src="http://i.imgur.com/AzeiaRY.jpg" />
<h1>Hello world</h1>
</div>
</div>
Use the following code as a guide for your website. Alter the width and height in <img> to suit you.
<!DOCTYPE html>
<html>
<head>
<style>
.floating-box {
display: inline-block;
float: left;
width: 500;
height: 500;
margin: 50px;
border: 1px solid 0;
}
</style>
</head>
<body>
<h2>Text appearing above images</h2>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
<div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
</div>
</body>
</html>
I've hit a wall here...
I have a title that I want to align centrally on the page. I've done this by using #landingAreaContent {position: relative; margin: auto; text-align: center; background-color: blue;.
The title is wrapped in a div that is, in turn, sitting inside a full-screen div.
I then wanted to increase the title div's top margin to bring the title down. Simple, yes?
Except when I add in margin: 50px into the style for the div containing the title, the full-screen div moves down with it.
Even more annoyingly, when I try to do exactly the same thing with divs further down the page, everything works fine.
Why is this happening? See code and screen shots for context.
body {
margin: 0;
padding: 0;
}
#landingArea {
width: 100vw;
height: 100vh;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
}#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<!DOCTYPE html>
<html>
<head>
<title>Becky's Pet Services</title>
<link rel="stylesheet" type="text/css" href="bps2CSS.css">
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Raleway" rel="stylesheet">
</head>
<body>
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
</body>
</html>
P.S. The garish colours are only there for visibility of the divs. :D
You have to force parent elements to contain their children (or their childrens' margins) in some cases:
#landingArea {
...
overflow: hidden; /* or auto */
}
html,
body {
margin: 0;
padding: 0;
}
#landingArea {
height: 100vh;
overflow: hidden;
background-color: #6fc9ff;
}
#landingAreaContent {
position: relative;
margin: auto;
text-align: center;
background-color: blue;
margin-top: 50px;
}
#belowFold {
width: 100%;
height: 100%;
background-color: white;
}
#belowFoldContent {
position: relative;
margin: auto;
margin-top: 50px;
text-align: center;
}
h1 {
margin: 0;
padding: 0;
font-family: 'Dancing Script', cursive;
font-size: 60px;
}
<div id="landingArea">
<div id="landingAreaContent">
<img id="langingAreaLogo" src="">
<h1>Becky's Pet Services</h1>
</div>
</div>
<div id="belowFold">
<div id="belowFoldContent">
<h1>Welcome!</h1>
<p>This is an example of a title and some text that would be filled with a short, meaningful blurb about the company and available services.</p>
</div>
I have a div mainlogo inside another div for logo. Now, when I give it margin on top, it flows outside the outer divs. What I want is that when I give it margin-top, it should displace itself downward, instead of flowing its margin outside the parent.
.header {
width: inherit;
height: 100px;
background-color: #0080FF;
box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
}
.headerdiv img {
width: 80px;
}
.headerdiv {
width: 1020px;
margin: 0 auto;
height: inherit;
position: relative;
}
#mainlogo {
height: 80px;
width: 350px;
margin-top: 10px;
}
<div class="header">
<div class="headerdiv">
<a href="onlinequiz login.php">
<div id="mainlogo">
<img src="Images/logo.png"></img>
</div>
</a>
</div>
</div>
Why does it happen and how can I solve it?
Tricky margin spec. This page has a very good explanation of the behavior you are running into. If you don't want to change the #mainlogo whitespace to padding, you can work around the margin collapse by giving an overflow: hidden property to your .header.
.header {
width: inherit;
height: 100px;
background-color: #0080FF;
box-shadow: 0.5px 0.5px 0.5px 0.5px grey;
overflow: hidden;
}
.headerdiv img {
width: 80px;
}
.headerdiv {
width: 1020px;
margin: 0 auto;
height: inherit;
position: relative;
}
#mainlogo {
height: 80px;
width: 350px;
margin-top: 10px;
}
<div class="header">
<div class="headerdiv">
<a href="onlinequiz login.php">
<div id="mainlogo">
<img src="Images/logo.png"></img>
</div>
</a>
</div>
</div>
Also, you might consider changing the #mainlogo div into a span and self-closing your img tag to avoid unexpected cross-browser quirks.
beacuse you are using a generalize DIV's as it is. Use floating property i.e. float:left there,
and it will work
like this,
#mainlogo {
float:left;
height: 80px;
width: 350px;
margin-top:20px;
}
Try this ... Set the position property of headerdiv to position: absolute;
.headerdiv {
width: 1020px;
margin: 0 auto;
height: inherit;
position: absolute;
}
I've been search for more than a day a way to vertical align my fluid designed header so without knowing font-size nor spesific pixels my 3 divs will be the same height and the content inside them in the same line.
Here is an fiddle example of what I have now so you might understand what i need better.
And this is the code:
HTML:
<div id="container">
<div id="header">
<div id="menu">
<a href="#">
<img src='http://s16.postimg.org/uwgkp15r5/icon.png' border='0' alt="icon" />
</a>
</div>
<div id="title">
My site title
</div>
<div id="my_button">
<button id="button">My button</button>
</div>
<div style="clear: both;"></div>
</div>
<div id="content"></div>
</div>
CSS:
html,body {
height: 100%;
font-size: 2vmin;
}
#container {
height: 100%;
min-height: 100%;
}
#header {
height: 20%;
padding: 2vmin 0 2vmin 0;
box-sizing: border-box;
background: #000000;
width: 100%;
}
#menu{
background: #5f5f5f;
float: left;
width: 20%;
text-align: center;
}
#title {
background: #aaaaaa;
height: 100%;
float: left;
font-size: 3vmin;
width: 60%;
text-align: center;
}
div#my_button {
background: #cccccc;
float: right;
width: 20%;
}
button#button {
color: #aaaaaa;
border: none;
}
#content {
height: 70%;
width: 100%;
background: #eeeeee;
}
You can use :after pseudo element for solving your problem.
add this after #header styles in your CSS
#header:after{
height: 100%;
width: 1px;
font-size: 0px;
display: inline-block;
}
Then remove floats from #menu, #title and #my_buttun div's and apply
display: inline-block;
vertical-align: middle;
The inline-block will create small gaps between these div, but if you're not apply background colors to them , then it is ok.
Last: make #my_button width: 19%;
Look here: http://jsfiddle.net/D22Ln/5/
If you mean the three horizontal divs, setting height: 100%; for all of them will do the trick. From there you just modify the size of their parent element (currently at 20%) and they will adapt automatically.
http://jsfiddle.net/D22Ln/2/
If I have understood you correctly this is maybe what you are looking for, I just copied that I have done earlier. But test it out: http://jsfiddle.net/6aE72/1/
By using wrapper and a helper you will have the left and right div same size as middle and helper helps with vertical alignment
#wrapper { display: table; width: 100%; table-layout: fixed; position: absolute; top: 0;}
.content { display: table-cell; }
This FIDDLE might help you. I've used bootstrap framework. Re-size the RESULT grid.