I just created a lockscreen theme for my iPhone. It works, but for some reason I cannot remove the black background space of the body, i.e. resize the body along the right and bottom edge of the lockscreen.
I created a short slideshow so you get the.. indeed.
Here's the relevant HTML and complete CSS code. Note that I added many unnecessary '0px' properties just to see if they'd make a difference:
<body>
<div id="background">
<img src="LockBackground.jpg" width="320" height="480">
</div>
<div id="labels">
<div id="clock">//e.g. 6:12 AM
</div>
<div id="day">//e.g. Sunday
</div>
<div id="date">//e.g. 5 Aug
</div>
</div>
</body>
CSS:
*{ margin: 0px; padding: 0px; border: 0px; }
body { background-color: #000; border: 0px; margin: 0px; padding: 0px; position: absolute; font-family: Helvetica Neue; font-size: 50px; color: #fff; width: 320px; }
img { border: 0px; margin: 0px; padding: 0px; top: 0px; left: 0px; width: 320px; z-index: 0; }
#labels { position: absolute; width: 290px; top: 50%; margin: -0.7em 0 0 30px; }
#day { line-height: 0.8; }
#date { position: absolute; margin-top: 18px; line-height: 0.6; }
Surely you just need body {width:100%; height:100%;}.
It may be more complex than this, but I can't think why it would be.
You could also try img {width:100%; height:100%;}.
Related
I have an image that I've put into a div class "outer" that's cropped to a specific size.
I've overlaid text in another div class "mythumbnail" using the styles shown.
I'm stumped as to why I can't get the div "mythumbnail" to sit adjacent to the bottom of the picture in div "outer". I'd be grateful for assistance. Also, I want div "mythumbnail" to expand or contract depending on how much title and text there are regardless of "outer" dimensions, but always collapsing the height of div "mythumbnail" to the bottom of div "outer".
#import url('https://fonts.googleapis.com/css2?family=Changa+One:ital#0;1&family=Open+Sans:ital,wght#0,400;0,700;1,400;1,700&display=swap');
h1,h2,h3{
font-family: 'Changa One',Verdana, Geneva, sans-serif;
font-weight: normal;
}
p {
padding: 0;
margin: 0;
}
body {
font-family:'Open Sans',Verdana, Geneva, sans-serif;
font-size: 1rem;
margin: 0;
padding: 1rem;
background-color: #cfbaff;
}
.outer {
height: 250px;
width: 250px;
background-color: #6561B8;
background-size: cover;
position: relative;
text-align: center;
color: white;
padding: 0;
margin: 0;
}
.outer img {
height: 250px;
width: 250px;
object-fit: cover;
}
.mythumbnail h2,
.mythumbnail p {
padding: 0 .5rem 0;
margin: 0;
}
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
width: 100%;
bottom: 0;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgb(0,0,0,0.4);
}
<html>
<body>
<div><h1>Image example</h1></div>
<div class="outer"><img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-b.jpg" />
<div class="mythumbnail">
<h2>Title</h2>
<p>My fairly simple description that takes one or two lines...</p>
</div>
</div>
<div><p>It should look something like this:</p>
<img src="https://wpgeek.low.li/wp-content/uploads/2021/03/june-2020-purple-cone-flowers-thumb.jpg" />
</div>
</body>
Change your thumbnail css to this:
.mythumbnail {
margin: 0;
padding: 0.3rem 0;
position: absolute;
bottom: 0;
right:0;
left: 0;
background-color: rgb(0,0,0,0.4);
}
Note that right:0; and left:0; make div behave same like left:0; and width:100%;. It's up to you how you write it.
Is it possible to use calc() to center an element, which has a width defined with % ?
e.g.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
width: 100%;
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 30%;
background-color: white;
text-align: center;
}
.inside h1 {
position: absolute;
left: calc(50% - 15%);
left: -webkit-calc(50% - 15%);
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
This is the slider. It has a "string", which guides through the steps of the slider and the header is always in the middle of the screen. But for design purpose, the line starts a bit to the right and ends a bit to the left, which is given with a width of 80%.
The top is slider no.1 with the string, the second slider, which is synced is the area with the big white square.
Maybe now it is a bit more clear, why I tried what I tried.
Yes, if you create a variable in the css for example:
<!DOCTYPE html>
<html>
<head>
<style>
#div1 {
--Example: 200px;
position: absolute;
left: 50px;
width: calc(100% - var(--Example)/2);
border: 1px solid black;
background-color: yellow;
padding: 5px;
text-align: center;
}
</style>
</head>
<body>
<div id="div1">Some text...</div>
</body>
</html>
If you can have fixed width just add margin: 0px auto. This will center the text horizontally.
.wrapper {
width: 100%;
background-color: black;
height: 300px;
position: absolute;
top: 0;
}
.inside {
margin-left: 30px;
background-color: yellow;
height: 250px;
margin: 20px;
}
.inside h1 {
width: 40%;
background-color: white;
text-align: center;
margin: 0px auto;
}
<div class="wrapper">
<div class="inside">
<h1>CENTERED to viewport</h1>
</div>
</div>
I have a hidden header which is shown when printing a page, but when i try to print it with chrome 40 it's not taking the full width page. why?
HTML
<div id="header">
<img id="logo" src="assets/img/brand.png">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<div id="footer">
<p class="page"></p>
</div>
CSS
#header{
top:0px;
right:0px;
width: 100%;
height: 45px;
position:fixed;
border:1px solid #ccc;
}
#logo{
position: absolute;
top: 0;
left: 0;
height: 46px;
}
#title{
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
#footer {
position: fixed;
left: 50%;
bottom: 0;
/*right: 0;*/
height: 40px;
text-align: center;
}
#footer .page:after {
content: counter(page, upper-roman);
font-size: 18px;
}
UPDATE
I changed to position absolute, and it works, it's taking the full width
but now I realized that it's not repeating in every page, even with position fixed
Also notice the footer with number page, it's wrong centered because of fixed position, but when i change it to absolute it's correct but it goes to the bottom of the content, not of the page, and in the two cases neither repeat in every page
Remove the fixed position, add absolute instead, and I've also changed the height of #logo to 100% instead of 46px
SNIPPET
body {
font-family: Arial, sans-serif;
}
#header {
top: 0px;
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
}
#logo {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title {
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
h3 {
margin-top: 100px;
}
#header-table {
top: 150px;
/*Change to 0px when supposed to use*/
right: 0px;
width: 100%;
height: 45px;
position: absolute;
border: 1px solid #ccc;
display: table;
}
#logo-cell {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
#title-cell {
display: table-cell;
vertical-align: middle;
font-size: 18px;
font-weight: bold;
text-align: right;
}
<div id="header">
<img id="logo" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<h3>Display: Table, if your title should be vertically centered</h3>
<div id="header-table">
<img id="logo-cell" src="http://img3.wikia.nocookie.net/__cb20140501181347/creepypasta/images/f/f6/Grumpy_Cat.jpg">
<div id="title-cell">Departamento de diagnostico por imagenes</div>
</div>
So, I've built multiple sites and could always fix this problem, one way or another. But this time I got stuck.
I have a wrapper div, within this div I have two div's. When the inner div exceeds the length of the wrapper div, it just overlaps it. My goal is that the wrapper div gets the same height, as the inner div.
Here is the code I use:
<body>
<!-- Begin of site -->
<div id="wrapper">
<!-- Site Wrapper -->
<div id="site-wrapper">
<!-- Header -->
<div id="header"></div>
<!-- end Header -->
<!-- Column positioner -->
<div id="colpos">
<!-- Column Left -->
<div id="columnLeft">
<div id="mainWrap">
<div id="contentBar"></div>
<div id="main">
Content
<div id="longDiv">Very long</div>
</div>
</div>
</div>
<!-- Column Right -->
<div id="columnRight">
<div id="links">
<div id="navBar"></div>
Links
</div>
</div>
</div>
<!-- einde Column positioner -->
<div id="footer">Copyright</div>
</div>
<!-- end Site Wrapper -->
</div>
<!-- end site -->
</body>
And the corresponding CSS:
/*==============================
SITE RESETS
===============================*/
html {
margin: 0px;
padding: 0px;
font-family: Calibri, arial;
}
body{
margin: 0px;
padding: 0px 0px 50px 0px;
border: 0px;
background: url('img/background.png');
}
a img { border:none; }
#longDiv{
height: 2000px;
color: white;
background-color: black;
}
/*==============================
SITE WRAPPER
===============================*/
#wrapper{
width: 1200px;
margin: 0px;
padding: 0px;
border: 0px;
}
#site-wrapper{
width: 970px;
margin: 0px 0px 30px;
padding: 0px;
border: 0px;
position: relative;
background-color: #ebebeb;
left: 115px;
top: 30px;
}
#header{
clear: both;
min-width: 970px;
width: 100%;
height: 190px;
margin: 0px;
padding: 0px;
border: 0px;
background: #fff url('img/header.png');
background-repeat: repeat-x;
position: relative;
top: 30px;
}
#colpos{
clear: both;
float: left;
height: 100%;
min-height: 100px;
width: 920px;
padding: 50px 20px 20px 20px;
margin: 0px;
border: 0px;
}
#columnLeft
{
float: left;
width: 620px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
#columnRight
{
float: right;
width: 265px;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
border: 0px;
}
/*==============================
Content
===============================*/
#mainWrap{
float: left;
width: 100%;
height: 100%;
min-height: inherit;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#contentBar{
float: left;
min-width: 620px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/content.png');
background-repeat: no-repeat;
}
#main{
clear: both;
height: 100%;
min-height: inherit;
float: left;
margin: 5px 5px 5px 5px;
max-width: 620px;
height: inherit;
font-family: Calibri, arial;
}
#links{
float: left;
width: 100%;
min-height: 250px;
margin: 0px;
padding: 0px;
background: white;
border: 1px solid #689e9f;
}
#navBar{
float: left;
min-width: 265px;
width: 100%;
min-height: 23px;
margin: 0px;
padding: 0px;
border: 0px;
background: #689e9f url('img/nav.png') right;
background-repeat: no-repeat;
}
#footer
{
clear: both;
margin: 10px 10px 10px 10px;
width: 50%;
position: relative;
top: 0.5em;
left: 25%;
font-family: Calibri, arial;
color: white;
text-align: center;
font-style: italic;
background-color: #689e9f;
}
My problem in short:
http://i.stack.imgur.com/bBW8g.jpg
I've posted as much of my code as possible, I hope one of you can point me the error I've been making. I'm usually not someone asking online for help, but this problem has been bugging me long enough.
Thanks in advance,
EvilTuinhekjeNL
By defining a height of 100% for the wrapper, you are limiting it to the height of the browser window. The very long div will extend this limitation because of its set height.
To fix this remove the height 100% from the wrapper and any other containers, If you want to limit limit the content to the size of the viewable document, you could set your divs to position: absolute and then set the top, left, right and bottom to the extremities of the screen.
I know that this is SIMILAR to a few questions already out there, but it's different in that it's not my main body background that's causing the problem, and so I'm lost.
The website is at http://www.thesweet-spot.com/test77
The problem is that when you shrink your viewport to be smaller than the content and then scroll down, the wavy line on the left stops at where the bottom of your viewport originally was. The tricky part is that I want the wavy line on the left to scroll WITH the content when the content is too long.
The relevant CSS looks like this:
body {
background: url('images/background.jpg');
margin: 0;
padding: 0;
min-width: 1000px;
}
#container {
width: 100%;
position: absolute;
top: 105px;
bottom: 0;
margin: 0;
padding: 0;
}
#sidebarbg {
background: url('images/chocolate.jpg');
width: 300px;
height: 100%;
position: fixed;
left: 0;
z-index: 11;
background-attachment:fixed;
}
#sidebar {
background: url('images/sidebar.png');
width: 300px;
height: 100%;
position: absolute;
left: 0;
z-index: 12;
}
#contentnest {
position: absolute;
top: 50px;
left: 365px;
right: 0;
z-index: 14;
}
#content {
background: url('images/contentbg.png');
-moz-border-radius: 30px;
-webkit-border-radius: 30px;
border-radius: 30px;
-khtml-border-radius: 30px;
padding: 20px;
border: #f062a4 3px solid;
width: 80%;
min-width: 350px;
margin-left: auto;
margin-right: auto;
font-size: 22px;
line-height: 150%;
font-family: QuicksandBook, Tahoma, Arial, sans-serif;
color: #905131;
}
and the HTML looks like this:
<body>
<div id="sidebarbg"></div>
<div id="sidebar"></div>
<div id="container">
<div id="contentnest">
<div id="content">
<! -- content goes here -->
</div>
</div>
</div>
</body>
What am I missing?
in #sidebar try removing height:100% and add bottom:-99999em
the other way is to make the sidebar position:fixed.
I was able to get the BG of my absolute container to extend beyond the viewport by adding this to my div style that has the BG.
min-height: 100%;
height: 100%;
overflow-y: scroll;
This will cause a double scroll bar so add this to your body style
overflow-y: hidden;