For some reason my h3 element wants to scroll. I've tried testing and it appears to be in this code.
* {
margin: 0px;
padding: 0px;
box-sizing: border-box;
overflow-x: hidden;
}
html,
body {
height: 100%;
width: 100%;
}
.model-detail-caption {
font-family: "Oswald";
font-size: 5rem;
font-weight: 700;
color: #fff;
position: absolute;
bottom: 20%;
left: 20px;
width: 100%;
border-left: 4px solid var(--accent);
padding: 0px 0px 0px 10px;
}
<h3 class="model-detail-caption">Some Text</h3>
position: absolute; bottom: 20%; left: 20px; will cause this behaviour.
Related
My header is devided in 3 sections: left, center and right. The left section is empty. In the center section I have my page title and in the right section I placed an "Account" link with an icon next to it. The link contains the word ACCOUNT and an icon. the icon is somehow pushed to the top and leaves a blank space below it next to the word. I want them both in one line and on the same hight. How can I achieve this? I added a red background to make the problem better understandable.
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 20%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 30px;
top: 15px;
}
.navigationicon {
position: relative;
width: 24px;
margin: 0;
padding: 0;
top: 50%;
bottom: 50%;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account <img class="navigationicon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png"></a>
</div>
</header>
Can you check this ?
html {
height: 100%;
box-sizing: border-box;
overflow: hidden;
}
*,
*:before,
*:after {
box-sizing: inherit;
overflow: inherit;
}
body {
background-color: #f5f5f5;
margin: 0;
padding: 0;
position: relative;
height: 100%;
}
#in {
width: 1000px;
margin-left: auto;
margin-right: auto;
height: 100%;
}
/* ------------------------------------------------------------------------ */
/* -------------------------------- HEADER -------------------------------- */
/* ------------------------------------------------------------------------ */
header {
background-color: #131b23;
border-bottom: 6px solid #0f151a;
text-align: center;
left: 0;
top: 0;
width: 100%;
height: 170px;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
z-index: 99;
}
#left {
background-color: green;
width: 20%;
position: absolute;
height: 164px;
}
#center {
background-color: red;
width: 60%;
margin-left: auto;
margin-right: auto;
height: 100%;
position: absolute;
left: 20%;
right: 25%;
height: 164px;
}
#right {
background-color: blue;
width: 20%;
height: 100%;
position: absolute;
right: 0;
height: 164px;
}
#heading {
font-size: 60px;
display: block;
margin-bottom: -7px;
margin-top: 15px;
}
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: white;
position: absolute;
left: 50px;
top: 20px;
background: url("https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/user_male2-512.png");
background-size: 24px;
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 0px;
width: 40%;
line-height: 2;
}
<header>
<div id="left">
</div>
<div id="center">
<h1 id="heading">My Page</h1>
</div>
<div id="right">
<a class="accountlink" href="login.html">Account </a>
</div>
</header>
Four changes to your css code to get there: 2 at .navigationicon and 2 at .accountlink
.accountlink {
font-family: "Helvetica";
text-decoration: none;
font-weight: 800;
color: #ffffff;
font-size: 13px;
letter-spacing: 1px;
text-transform: uppercase;
background-color: red;
position: absolute;
right: 80px;
top: 70px;
}
.navigationicon {
position: relative;
width: 12px;
margin: 0 0 2px -5px;
padding: 0;
top: 50%;
bottom: 50%;
}
this site has been giving me some issues with the width of some elements with cross-browser compatibility for the tablet and phone styling.
The class is .p_phoneand .p_phone a
.p_phone {
font-size: 20px;
width: 145px;
left: 40%;
margin: 0 !important;
height: 30px;
opacity: 1;
top: -4px;
text-align: center;
color: #fff;
position: relative;
}
.p_phone a {
color: #fff;
background-color: #1968a1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
Basically, It needs to match the width of this class, which is a image, which it does on chrome and opera, but on safari, firefox, and edge, it does not match, and breaks to the next line.
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
width: 145px;
margin: 0;
background-image: url(http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png);
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: relative;
float: left;
padding: 0;
}
Increasing the width to 150px fixes it, but it is then too wide for the image.
How it needs to be:
Try Changing these class's (have checked them on this link provided by you)
.textwidget {
font-size: 18px;
position: relative;
width: 160px;
margin: auto;
}
.p_call {
font-size: 20px !important;
top: -13px;
left: 40%;
margin: 0px;
background-image: url('http://dchna4xuxekpx.cloudfront.net/wp-content/uploads/2016/06/15142416/call-us.png');
vertical-align: middle;
height: 40px;
line-height: 40px;
text-align: center;
position: absolute;
float: left;
padding: 0px;
width: 100%;
background-size: 100%;
}
.p_phone {
font-size: 20px;
margin: 0px !important;
height: 30px;
opacity: 1;
top: 27px;
text-align: center;
color: #FFF;
position: absolute;
width: 100%;
left: 40%;
}
.p_phone a {
color: #FFF;
background-color: #1968A1;
font-weight: 800;
padding: 5px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
display: inline-block;
width: 100%;
}
The divs belonging to p_call class and p_phone were not wrapped properly by textwidget class. Hence we have to give two different width's, now since textwidget is wrapping both the class's, they will have same width. Hope it helps. Tested on both chrome and firefox.
Try to add this to your styling block for .p_phone a:
white-space: nowrap;
I'm trying to get the iframe the to the full page height, but it's not really working.
I already tried many ways to do it, but none of them would work for me...
I hope some of you know how to do it!
HTML:
<body>
<article>
<h1>Hello world</h1>
<p class="subtitle fancy ">
<span>Versie 1.0</span>
</p>
</article>
<iframe class="configurator " src="" frameBorder="0">Browser not compatible.</iframe>
<footer>
<span class="arrow "></span>
<p>© Copyright 2015</p>
</footer>
</body>
CSS:
html, body {
margin: 0;
padding: 0;
}
body {
background: #ECECEC;
margin: 0px;
color: #333;
font-family:'Cinzel Decorative', cursive;
}
h1 {
font-size: 3em;
text-align: center;
}
article {
max-width: 600px;
overflow: hidden;
margin: 0 auto 50px;
}
.subtitle {
margin: 0 0 2em 0;
}
.fancy {
text-align: center;
display: -webkit-flex;
}
.fancy:before, .fancy:after {
content:"";
border-bottom: 1px solid white;
border-top: 1px solid white;
-webkit-flex: 1;
margin: .45em 0;
}
.fancy:before {
margin-right: 15px;
}
.fancy:after {
margin-left: 15px;
}
footer {
background-color: #D7D7D7;
position: relative;
margin-bottom: 0px;
width: 100%;
height: 50px;
position: absolute;
bottom: 0;
left: 0;
font-family:'Montserrat', sans-serif;
border-top: 2px solid white;
}
footer p {
margin-left: 10px;
font-size: 15px;
color: #626262;
}
footer:before, footer:after, footer > .arrow {
content:"";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -20px;
border: 20px solid transparent;
border-bottom-color: #D7D7D7;
pointer-events: none;
}
footer:after {
margin-left: -8px;
border-width: 8px;
}
footer > .arrow {
margin-left: -11px;
border-width: 11px;
border-bottom-color: #fff;
}
.configurator {
width: 100%;
background-color: white;
position: absolute;
margin-top: -50px;
margin-bottom: -1000px;
}
So what I want is the iframe height all the way to the bottom against the top of the footer.
jsFiddle: http://jsfiddle.net/94d9tbLx/
Added script to find height .
var h = $(document).outerHeight() - $('article').outerHeight() - $('footer').outerHeight();
$('iframe').css('height', h);
Please check the fiddle - http://jsfiddle.net/afelixj/94d9tbLx/2/
Remove all styles from footer and .configurator and add the following:
footer {
background-color: #D7D7D7;
margin-bottom: 0px;
width: 100%;
height: 50px;
left: 0px;
font-family: "Montserrat",sans-serif;
border-top: 2px solid #FFF;
bottom: 0px;
position: relative;
float: left;
}
.configurator {
width: 100%;
background-color: #FFF;
height: 100vh;
float: left;
position: relative;
}
FIXED JSFIDDLE
(adjust the height to anything)
I have an issue where the height of the "content body" div (below) is exceeding the bottom of the page (and behind the page footer). I want this div to scroll when there is long content, which it does now, but it doesn't scroll to the bottom of the div as it is beyond the page. I'm not sure what is causing the issue? Here is an example: http://jsfiddle.net/Gg6qY/
CSS:
html, body {
height:100%;
width: 100%;
overflow: hidden;
margin: 0;
}
header {
position: fixed;
width: 100%;
background: #006f3b;
color: #fff;
top: 0;
height: 60px;
padding: 10px;
}
#content {
position: relative;
height: 100%;
width: 100%;
padding: 60px 0 20px 0;
/* Header height and footer height */
margin: 0 auto;
/* Center content */
}
#sidebar {
position: absolute;
background: #191919;
color: #fff;
left: 0;
top: 60px;
bottom: 0;
width: 220px;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contentHeader {
position: relative;
left: 220px;
z-index: 100;
padding: 10px;
background: #fff;
border-bottom: 1px solid #191919;
-webkit-box-shadow: 3px 3px 3px #888888;
-ms-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
#contentBody {
position: relative;
background: #fff;
height: 100%;
margin-left: 220px;
padding: 0 10px;
overflow-y: scroll;
}
footer {
position: fixed;
width: 100%;
background: #999;
color: #000;
bottom: 0;
height: 20px;
text-align: center;
}
HTML:
<body>
<header>The header</header>
<div id="content">
<div id="sidebar">The Sidebar</div>
<div id="contentHeader">The Content Header</div>
<div id="contentBody">
<p>The Content Body</p>
</div>
</div>
<footer>The Footer</footer>
Thanks!
body and #content, goes beyond the window size as height:100% means height of the content area of the body which if you add to top and bottom padding, goes beyond the window. use
box-sizing:border-box to fix this.
contentBody to expand to maximum available height, make it absolute and set top and bottom.
contentBody should also work ideally with height 100%. Have not checked that.
updated fiddle:
http://jsfiddle.net/GaYf4/1/
Not sure what your intended goal is, but I think this is what you are looking for.
html{
min-height: 100%;
}
html, body {
width: 100%;
overflow: hidden;
margin: 0;
}
body
{
height: 100%;
}
if you know exactly where you want the top and bottom of all elements to be (which is seems like you do), its usually easiest to use 'top', 'bottom', 'left', and 'right' rather than 'width' and 'height', as padding adds to the width and height and will cause nasty overflows.. anyways this works on my machine..
html, body {
height:100%;
margin: 0px;
}
header {
position: absolute;
left: 0px;
right: 0px;
background: #006f3b;
color: #fff;
top: 0px;
height: 60px;
padding: 10px;
}
#content {
position: absolute;
top: 60px;
left: 0px;
bottom: 0px;
width: 100%;
}
#sidebar {
position: absolute;
background: #191919;
color: #fff;
left: 0px;
top: 0px;
bottom: 0px;
width: 200px;
padding: 10px;
}
#contentHeader {
position: absolute;
top: 0px;
left: 220px;
height: 15px;
padding: 10px;
z-index: 2;
background: #fff;
right: 0px;
border-bottom: 1px solid #191919;
-webkit-box-shadow: 3px 3px 3px #888888;
-ms-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
#contentBody {
position: absolute;
padding: 10px;
background: #fff;
left: 220px;
top: 38px;
bottom: 20px;
right: 0px;
overflow: auto;
}
footer {
position: fixed;
left: 0px;
width: 100%;
background: #999;
color: #000;
bottom: 0;
height: 20px;
text-align: center;
}
I have a following div structure
<div id="wrapper">
<div id="header">
<div id="storeFinder">
/* html goes here */
</div>
</div>
</div>
now when i zoom in or out from the browser, "storeFinder" moves right / left ...
I have searched online and found that need a wrapper around the "storeFinder" so that it does not move with the <body> and specifying the min-width also can solve the problem.
in my case, i already have a wrapper div and specifying the min-width also dint help me.
looking for help here very badly.
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storefinderdropdown {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try putting a position: relative on the parent. That will confine the children's positions to be absolute according to the parent and not according to the document. This article gives more details and examples: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
Your correct CSS code Working Jsfiddle here
#wrapper {
background: white;
background-position: 50% 0px;
width: 984px;
margin: 0px auto 0 auto;
text-align: center;
}
#header {
width: 960px;
height: 60px;
margin: 0 5px 2px 5px;
text-align: left;
background: white;
display: block;
position: relative;
}
#storeFinder {
position: absolute;
top: 8px;
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0px;
left:342px;
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
Try this:
#storefinderdropdown {
position: absolute;
top: 8px;
left: 342px; /*Add This*/
float: none;
width: 270px;
height: 43px;
border: 5px solid #F1F1EF;
background: #F1F1EF;
z-index: 10;
margin: 20px 0 0 0; /* Change This*/
font-size: 10px;
font-weight: bold;
text-indent: 3px;
padding: 0;
}
May be this will be helpful for you.