When you try to apply top margin on the second page the header does not behave correctly.
Page 1:
Page 2:
CSS
body {
font-family: Arial, Helvetica Neue, Helvetica,sans-serif;
font-size: 14px;
}
#page {
margin: 100px 25px;
}
header {
position: fixed;
top: -70px;
left: 0px;
right: 0px;
height: 50px;
}
main {
margin-top: 60px;
}
footer {
position: fixed;
bottom: -100px;
left: -60px;
right: -60px;
background-color: #3f8d99;
height: 60px;
border-top: 1px solid #333;
font-size: 12px;
width: 100%;
padding-top: 6px;
padding-left: 60px;
padding-right: 60px;
color: white;
}
footer .pagenum:before {
content: counter(page);
}
footer .pagenum-container {
margin-top: 16px;
float: right;
}
I tried to follow some ideas, especially from this Post, but I did not succeed.
Thanks for the help.
I found a solution to my problem. I changed some lines of the CSS file.
#page {
margin: 140px 25px 100px 25px;
}
header {
position: fixed;
top: -136px;
left: -60px;
right: -60px;
width: 100%;
}
And removed main class.
/*main {
margin-top: 30px;
}*/
See the result. Page 2:
Related
So as the title say I put a color on top of an image and I then tried to put some text on top of it, but then all the div got moved to the bottom and the text got moved to the top of the div and when I inspect the heading, it shows a space colored in yellow. I'm trying to understand CSS position and I'm starting to understand it, but right now I don't understand haha. I think it's something with a margin, but I reinitialized it at the beginning of the CSS.
(Also sorry! If you feel the need to tell me that my CSS is bad don't hesitate to tell me off i want to learn from my mistake!)
The HTML
<div id="section3">
<div id="layer">
<h1>Parmi les premiers de classe !</h1>
</div>
</div>
And CSS
#section3 img {
width: 1903px;
margin-left: 0px;
margin-top: -645px;
z-index: 100;
}
#section3 h1 {
margin-top: 260px;
margin-left: 420px;
font-size: 80px;
}
#section3 p {
margin-top: 10px;
margin-left: 590px;
font-size: 30px;
}
.img4{
position: relative;
top: 641px;
}
#section3{
background: url('../Images/CF3.jpg');
position: relative;
bottom:4px;
width: 1903px;
height: 930px;
}
#layer{
background-color: #4c96eb75;
width: 100%;
height: 100%;
}
#layer h1{
display: block;
}
The reset at the start of CSS
* {
margin: 0;
padding: 0;
font-family: Segoe UI;
}
You used up higher values of height and width that's why it happened. I changed that:
#section3 h1 {
/* margin-top: 260px;
margin-left: 420px; */
font-size: 80px;
}
#section3 p {
margin-top: 10px;
margin-left: 590px;
font-size: 30px;
}
.img4{
position: relative;
top: 641px;
}
#section3{
background: url('../Images/CF3.jpg');
position: relative;
bottom:4px;
width: 390px;
height: 300px;
}
#layer{
background-color: #4c96eb75;
width: 100%;
height: 100%;
}
#layer h1{
display: block;
margin: 0;
}
<div id="section3">
<div id="layer">
<h1>Parmi les premiers de classe !</h1>
</div>
</div>
Change the css to this:
#section3 img {
width: 1903px;
margin-left: 0px;
margin-top: -645px;
z-index: 100;
}
#section3 h1 {
/* margin-top: 260px;
margin-left: 420px; */
font-size: 80px;
}
#section3 p {
margin-top: 10px;
margin-left: 590px;
font-size: 30px;
}
.img4{
position: relative;
top: 641px;
}
#section3{
background: url('../Images/CF3.jpg');
position: relative;
bottom:4px;
width: 1903px;
height: 930px;
}
#layer{
background-color: #4c96eb75;
width: 100%;
height: 100%;
}
#layer h1{
display: block;
margin: 0;
}
I have added a margin:0, to the header and removed other styles margin for #section3 h1, that was the reason div was placed at the bottom and
I'm creating a website to school project and i want to put a strikethrough behind my title like in this image. I want that green lines behind text
I am working with HTML and CSS , someone know the code to get that beautiful strikethrough?
Short example including overlaying both strikes should be
p {font-size: 130px; color: #f00;}
span {position: relative;}
span:before, span:after {content: ''; background: rgba(0,0,0,.5); border-radius: 20px; position: absolute; top: calc(50% - 20px); width: 56%; height: 40px; z-index: -1}
span:before {left: 0;}
span:after {right: 0;}
span.left:before {width: 100%;}
span.left:after {width: 100px; left: 0;}
span.longer:before {width: 60%; left: 8%}
span.longer:after {width: 43%; left: 47%;}
<p>
<span>TEXT</span> <br>
<span>WITH</span> <br>
<span>STRIKE</span><br>
<span class="left">LEFT</span>
<span class="longer">OTHER</span>
</p>
Using classes you can make overlays with different widths, etc. The basic idea is obvious.
This is an example , adjust as you wish, but you get the idea.
h2 {
font: 33px sans-serif;
margin-top: 30px;
text-align: center;
text-transform: uppercase;
color: red;
}
h2.background {
position: relative;
z-index: 1;
}
h2.background:before {
border-top: 2px solid #000;
content:"";
margin: 0 auto; /* this centers the line to the full width specified */
position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
top: 50%; left: 0; right: 0; bottom: 0;
width: 95%;
z-index: -1;
}
<h2 class="background">Random Title</h2>
I did it (Image example) but when i change resolution this happen: not responsive... How can i put it to be responsive? here is my HTML and here is my CSS... Thank you for all resolution but i'm using panther's example
#titulo1{
font-size: 5vw;
font-weight: 400;
color:#f5dc9f;
font-family: 'Moon Light' , sans-serif;
float: right;
margin-bottom: 0;
margin-top: 15vw;
margin-right: 15vw;
display: flex;
}
#titulo2{
color: #f5dc9f;
font-size:6.7vw;
font-family: 'Moon Bold', sans-serif;
clear: right;
float: right;
margin-top: 0;
margin-bottom: 0;
margin-right: 13vw;
}
#titulo3{
font-size: 4.8vw;
font-weight: 400;
color:#f5dc9f;
font-family: 'Moon Light' , sans-serif;
float: right;
margin-top: 0;
margin-right: 3vw;
}
#titulo2:before, #titulo2:after {
content: '';
background: rgba(0,0,255,0.3);;
border-radius: 40px;
position: absolute;
top: calc(53% - 1vw);
width: 50%;
height: 5%;
z-index: -1
}
#titulo2:before{
left: 54vw;
width: 15vw;
}
#titulo2:after{
right: 11vw;
width: 26vw;
}
#titulo1:before, #titulo1:after {
content: '';
background: rgba(0,0,255,0.3);;
border-radius: 40px;
position: absolute;
top: calc(40% - 20px);
width: 50%;
height: 5%;
z-index: -1
}
#titulo1:before{
left: 52vw;
width: 17vw;
height: 2vw;
}
#titulo1:after{
right: 15vw;
width: 20vw;
height: 2vw;
}
#titulo3:before, #titulo3:after {
content: '';
background: rgba(0,0,255,0.3);;
border-radius: 40px;
position: absolute;
top: calc(66% - 20px);
width: 50%;
height: 5%;
z-index: -1
}
#titulo3:before{
width: 3em;
height: 0.4em;
}
#titulo3:after{
right: 0.5em;
width: 9em;
height: 0.4em;
}
<h2 id="titulo1">Aqui vai ser</h2><br>
<h1 id="titulo2">o titulo</h1><br>
<h2 id="titulo3">do nosso trabalho!</h2><br>
here is the snippet but is very diferent from what i see on my browser
im currently in need of some help regarding this issue. Id like the loading gif to be placed above the drop down.
Here is the CSS for the dropdown and loading gif.
dropdown
.form-horizontal .control-group {
position: relative;
z-index: 0;
*zoom: 1;
}
here is the code for the loading image
.uiGridLoading,
.uiOtherLoading
{
position: absolute;
bottom: 11px;
right: 11px;
left: 11px;
top: 53px;
background: #ffffff;
/*z-index: 900;*/
}
.uiOtherLoading
{
bottom: 0px;
right: 0px;
left: 0px;
top: 0px;
}
div.uiGridLoading-outer,
div.uiOtherLoading-outer
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100%;
}
div.uiGridLoading-inner,
div.uiOtherLoading-inner
{
text-align: center;
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
span.uiGridLoading-text,
span.uiOtherLoading-text
{
text-align: center;
background: url('/img/progress.gif') top center no-repeat;
padding-top: 47px;
font-size: 14px;
line-height: 22px;
color: #666666;
font-weight: 600;
display: block;
margin: 0 auto;
min-width: 32px;
}
As you can see the gif loading image is behind the drop down. I know z-index is not the problem
My code display correctly on local, with a diamond shape in the middle of the navigation bar, but the "plus" sign missing the bottom part.(It's what I want to know how to fix it)
However, the outlook changed significantly after I pasted code into JSfiddle and Codepen.io
http://codepen.io/yumikohey/pen/PwPYxN
http://jsfiddle.net/yumiko/ae1zmqpa/
CSS
body{
}
header{
width: 100%;
height: 80px;
}
#top{
width: 100%;
height: 50px;
background-color: #000;
border-bottom: 10px solid #C2973C;
}
#socialBar_top{
width: 25%;
height: 30px;
margin: 0 10px;
float: right;
}
ul {
list-style-type: none;
padding: 10px;
}
ul li {
display: inline;
}
#expandButton {
width: 100%;
padding-left: 46%;
margin-top: 10px;
}
.centerBox{
margin-top: -50px;
padding-top: -10px;
}
#diamondButton {
width: 0;
height: 0;
border: 30px solid transparent;
border-bottom-color: #C2973C;
position: relative;
top: -30px;
}
#diamondButton:after {
content: '';
position: absolute;
left: -30px;
top: 30px;
width: 0;
height: 0;
border: 30px solid transparent;
border-top-color: #C2973C;
}
#plusSign {
margin: -30px 0 -0 -14px;
color: #fff;
font-size: 3em;
}
Thanks in advance for your generous help.
Try this :
#plusSign {
color: #fff;
font-size: 2em;
margin: 0 0 0 -9px;
position: absolute;
top: 29px;
z-index: 100000;
}
Fixed the issue with this code,
#plusSign {
margin-left: -14px;
color: #fff;
font-size: 3em;
position: absolute;
top: 0;
z-index: 100;
}
But can anyone explain why codePen and JSfiddle cannot display my code correctly?
I have a Html page with a menu bar created in the footer . Presently , the whole page is scrollable. How do restrict the scrolling for the footer. SO, i am looking for scrolling only on content of page .
code for the footer menu bar is as follows:
#menu-bar {
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
width: 100%;
margin: 0px;
padding: 0px;
line-height: 10px;
background: #F07C1F;
z-index: 1000;
}
positioned elements, is what you are looking for...
http://jsfiddle.net/7fuQm/1/
#menu-bar {
height: 50px;
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
margin: 0px;
padding: 0px;
line-height: 10px;
background: #F07C1F;
z-index: 1000;
}
#body {
position: absolute;
top:0px;
bottom:50px;
left: 0px;
overflow:auto;
}
p
{
margin: 10px;
}