I have a problem with my footer. I tried to use this solution http://ryanfait.com/sticky-footer/. At first it worked fine, but now it doesn't.
I am trying to use this footer solution on my website.
When I use line with:
<div class="push"></div>
The link to the website is too long:
https://jsfiddle.net/yptaufab/
When I erase this div, problem occurs when I zoom in - footer goes to side at one moment: https://jsfiddle.net/w03ca8b3/
After zooming, it seems like the footer is aligned beside the div id="centerinfoleft" and I don't know why. I feel like I tried everything. I would be very grateful for any help.
The .push element needs to go in the .wrapper element.
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -40px;
}
.footer, .push {
height: 40px;
}
.line
{
display:block;
border-bottom:1px solid #1a1aff;
padding:2x;
text-align: center;
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
color: #1a1aff;
}
t5
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
display: block;
text-decoration-color:black;
}
t5:link, t5:visited
{
color: black;
text-decoration-color: black;
}
<div id="main" class="wrapper"
style=" margin-left:auto;
margin-right: auto;
width: 100%">
<div id="head"
style=" background-color: #1a1aff;
height: 100px;
width: 100%">
<div id="insidehead"
style=" margin-left: auto;
margin-right: auto;
height: 100px;
width: 1000px">
<div id="login"
style=" float:right;
background-color: #1a1aff;
height: 100px;
width: 200px">
</div id="login">
</div id="insidehead">
</div id="head">
<div id="centerinfo" style="
margin-left: auto;
margin-right: auto;
height: 300px;
width: 1100px">
<div id="centerinfoleft" style="
margin-left: auto;
margin-right: auto;
height: 300px;
width: 550px;
float:left;"><br>
<span class="line">What is going on?</span><br>
<t5>asdf<br>
asdf</t5><br>
<span class="line">Rules</span><br>
<t5>asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf<br>
asdf</t5><br>
</div id="centerinfoleft">
</div id="centerinfo">
<div class="push"></div>
</div id="main" >
<div id="footer" class="footer"
style=" margin-left:auto;
margin-right: auto;
background: #1a1aff;
text-align:center;
width: 100%">
<t2 style="color:white; font-weight: normal;">
index <c style="color:inherit;text-decoration: none;position:relative;top:10px">l<c>
index l
index</t2>
</div id="footer">
Related
If someone could help me understand why my "rightdiv" only moves past the lowest one of my "leftdiv". I have tried using "vertical-align: top" but with no effect.
(As you can probably see I am very new to HTML and CSS so please try to help me in a way I could understand to some at least extent)
* {
font-family: Arial, Helvetica, sans-serif
}
body {
background-color: lightgrey
}
.leftdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 79%;
height: 200px;
float: left;
}
.rightdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 20%;
height: 600px;
float: right;
}
.topbar {
background-color: grey;
width: 100%;
height: 75px;
text-align: left;
}
<div class="topbar">
</div>
<br/>
<div class="leftdiv">
</div>
<div class="leftdiv">
</div>
<div class="leftdiv">
</div>
<div class="rightdiv">
</div>
* {
font-family: Arial, Helvetica, sans-serif
}
body {
background-color:lightgrey
}
.leftdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 79%;
height: 200px;
float: left;
}
.rightdiv {
background-color: whitesmoke;
border-radius: 15px;
width: 20%;
height: 600px;
float: right;
}
.topbar{
background-color: grey;
width: 100%;
height: 75px;
text-align: left;
}
<!DOCTYPE HTML!>
<html>
<head>
</head>
<body>
<div class="topbar">
</div>
<br/>
<div class="leftdiv">
</div>
<div class="rightdiv"><!--placed right div near/below leftdiv-->
</div>
<div class="leftdiv">
</div>
<div class="leftdiv">
</div>
</body>
</html>
Here we keep the right div code below 1st left div so its near 1st left div,
the reason is the float: right; property makes it right of the previous div
There are many other CSS solution But if changing the place of right div in HTML works easily why do you want to use CSS stuffs
I work with dynamicaly created boxes, and i have issues that text are not fiting inside box.
EX:
My code:
HTML:
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
CSS:
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon > img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
}
.desc-box {
color: #000;
}
So my idea was to not showing all text, just end, for example:
I try to use display: flex and justify-content: end; idea was, to add for title and sub title z-index: 1 and for image z-index: 2, and for box overflow: hidden;
But it's not working for me.
This could be done this way using white-space: nowrap; and direction: rtl;
.box {
background-color: #ccc;
margin: 10px;
border-radius: 10px;
text-align: center;
font-size: 10px;
}
.machine-icon {
vertical-align: middle;
float: left;
width: 40px;
height: 40px;
background-color: #808080;
border-radius: 20px;
margin: 2px;
}
.machine-icon>img {
margin-top: 25%;
width: 20px;
height: 20px;
}
.title-box {
color: #000;
font-size: 10px;
overflow: hidden;
font-weight: 600;
direction: rtl;
white-space: nowrap;
}
.desc-box {
color: #000;
}
<div class="box" id="box98" style="width: 110px; height: 43px;">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
Remove Height from your in the .box element.
the height should be Auto:
<div class="box" id="box98" style="width: 110px; **height: auto;**">
<div class="machine-icon" id="machine98" style="background-color: green;">
<img src="https://via.placeholder.com/150/">
</div>
<div class="title-box">SOME WERY BIG DATA 1345135131421124</div>
<div class="desc-box">SUB DATAqfqwfqwf</div>
</div>
I have 4 div, which look something like this
Desired output:
Current code:
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8 !important;">
<div style="background-color: #21BA45; width: 5%; height: 7em; float:left;"></div>
<div style="background-color: #ffdd00; width: 20%; height: 7em; float:left;"></div>
<div style="width: 100%;" class="center aligned">ABC</div>
</div>
Update: This is a part of a progress bar, so both red and yellow width will change
Wrap the colored divs in their own container and position it absolutely unde rthe content.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.wrapper {
width: 50%;
margin: 1em auto;
background: lightgrey;
height: 7em;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-weight: bold;
}
.content {
position: relative;
z-index: 1;
}
.underlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.red {
height: 100%;
background: red;
width: 25%;
float: left;
}
.yellow {
height: 100%;
background: yellow;
float: left;
width: 25%;
}
<div class="wrapper">
<div class="content">ABC</div>
<div class="underlay">
<div class="red"></div>
<div class="yellow"></div>
</div>
</div>
This produces what you're trying to putput
https://jsfiddle.net/wcsfnbuL/
<div class="center aligned" style="width: 100%;height: 7em; padding: 2em; position:absolute;">
<div style="background-color: red; width: 15%; height: 7em; float:left; margin: auto;"></div>
<div style="background-color: #ffdd00; width: 15%; height: 7em; text-align: center; vertical-align: middle; line-height: 7em; float:left; margin: auto;">ABC</div>
<div class="ui small grey label fluid progress_padding_top_bottom" style="z-index:1;height: 7em; border-radius: 0; padding-right: 0; padding-left: 0; background-color: #E8E8E8; float: left; width: 15%"></div>
</div>
I am having a problem getting the Circle text to the correct position. Specifically its vertical position. It is supposed to be centered both vertically and horizontally. And that must change.
I'm trying to get a button in the middle of the page. The two other divs will be filled in later.
body {
padding: 0;
margin: 0;
font-family: "Lato", sans-serif;
}
<div style="background-color: grey; position: static;height: 80px">
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
<div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center">
<span style=" background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >⚇</span>
</div>
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
</div>
It's likely an easy fix. Thank you for your time.
You can use the line-height property to make adjustments to vertical alignment in this situation. See snippet below.
body {
padding: 0;
margin: 0;
font-family: "Lato", sans-serif;
}
<div style="background-color: grey; position: static;height: 80px">
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
<div style="width: 10%; height: 80px;float: left; background-color: blue; text-align: center">
<span style="line-height:1.2; background-color: green; font-size: 70px; cursor:pointer; display: inherit; height: 80px" >⚇</span>
</div>
<div style="width: 45%; height: 80px; background-color: #123456; float: left;"></div>
</div>
My 2 secondary div don't want to be at the center of the primary.
I have this code :
HTML:
<div id="body">
<div id="content">
<div id="contact">
<div class="contact">
<img id="contact_photo" src="images/contact_photo.png">
</div>
<div class ="contact" id="contact-text">
some text<br>
some text<br>
some text
</div>
</div>
</div>
</div>
CSS :
#body{
background-image: url("../images/background_body.png");
height : 100%;
width:101%;
margin : 10px -10px;
overflow: hidden;
}
#content{
color: white;
padding: 0 0 0 395px;
height: 100%;
overflow: hidden;
font-family: "Lato";
font-size: 26px;
}
#contact{
font-size: 26px;
font-family: "Lato";
color: white;
width: 1035px;
/* background-color: green;*/
display: flex;
padding: 35px 80px 0 80px;
float:left;
text-align: center;
}
.contact{
float: none;
display: inline-block;
text-align:left;
}
#contact-text{
width: 385px;
height: 145px;
}
#contact_photo{
margin-right: 40px;
}
If someone can help me, I saw everywhere that they centered the div only with :
text-align: center;
and
float: none;
display: inline-block;
I don't find what's the matter.
Thank you
Try this:
.contact {
margin: 0 auto;
}
This makes the margins on right and left sides set to the same so that the item will be displayed in the center;