I have the following code, that I am looking to make responsive for mobile display:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!DOCTYPE html>
<html>
<head>
<title>Login Retrieve</title>
</head>
<body>
<div class="container" id="container" style="min-height: 530px !important;margin-top: 5%;">
<div class="form-container log-in-container" style=" background: white;">
Hellow world
</div>
<div class="overlay-container" style="background-image:url('/assets/iphone.png'); background-repeat: no-repeat;
background-size: 100%;">
<div class="overlay-right" style="color: white;font-weight: 600;margin-top: 94%;margin-left: 14px;">
Test 1233
</div>
</div>
</div>
</body>
</html>
I thought that adding the first line would help, but it doesnt. The two containers are still showing next to each others.
Is there a way to fix it with css only (ideally).
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 768px;
max-width: 100%;
min-height: 480px;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
}
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
}
.overlay {
background: #44B5EB;
background: -webkit-linear-gradient(to right, #44B5EB, #0daaf5);
background: linear-gradient(to right, #44B5EB, #0daaf5);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
}
.myClass {
background: image-url('Admiralty.png');
}
I have just added the styling that I am currently using.
Use a media query. I would also suggest removing your inline styling as well as the !important property - This will override any other elements you style.
Ok, I found some sort of solution, not sure if it is the most elegant, but this is isL: I replace the straight:
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
with :
/* Desktops and laptops ----------- */
#media only screen
and (min-width : 1224px) {
.log-in-container {
left: 0;
width: 50%;
z-index: 2;
}
}
#media only screen
and (max-width : 1224px) {
.log-in-container {
left: 0;
width: 100%;
z-index: 2;
}
}
So i adjust the width of the container based on the size of the screen, choosing 1224px as the threshold
Related
I've been given the following code:
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
width: 50vw;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The background</title>
</head>
<body>
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can
understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
</body>
</html>
There are two goals here:
Make it work with ::after instead of ::before
There is a missing line of code somewhere in CSS and its absence ruins everything. Add the missing property to the right place to make it look as intended.
I've found the missing line of code (content: "";), and replaced ::before with ::after, here's where I got:
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
z-index: -1;
}
I'm struggling to get the background image to expand to it's full size, because otherwise the task is solved. The code editor tells me task 2 is correct, but for some reason task 1 is not being accepted and I assume it has to do with the image size, but I might be wrong.
Ideally it should look like this: https://ucarecdn.com/d24c1329-c0a3-4bd6-948c-5cfd83466c86/
Super appreciate any help with this!
Try to use this, with .container {width: 50vw;}
.container::after {
content: '';
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(0.5);
position: absolute;
top: 50%; /* changed */
left: 50%; /* changed */
bottom: 0; /* added */
right: 0; /* added */
width: 100vw; /* changed */
height: 100vh; /* changed */
transform: translate(-50%, -50%); /* added */
z-index: -1;
}
The result:
* {
margin: 0; /* added */
padding: 0; /* added */
box-sizing: border-box; /* added */
}
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
width: 50vw;
}
.container::after {
content: '';
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(0.5);
position: absolute;
top: 50%; /* changed */
left: 50%; /* changed */
bottom: 0; /* added */
right: 0; /* added */
width: calc(100vw - 30px); /* changed 3 times */
height: calc(100vh - 30px); /* changed 2 times */
transform: translate(-50%, -50%); /* added */
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: 100%; /* changed */
justify-content: center;
padding: 2em;
text-align: center;
width: 100%; /* changed */
}
.small {
color: #e9e9e9;
font-size: 0.7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
As Mihai T pointed out, the issue is with width. I simply removed width from the first container and it solved the problem.
FINAL SOLUTION
.container {
color: white;
height: 80vh;
margin: 10vh 0 0 25vw;
position: relative;
}
.container::after {
content: "";
background: url('https://i.ibb.co/ngx7VSR/photo-2021-04-19-21-24-36.jpg');
background-position: center;
background-size: cover;
filter: brightness(.5);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}
.container_inside {
align-items: center;
display: flex;
flex-direction: column;
font-size: 1.5em;
height: calc(100% - 4em);
justify-content: center;
padding: 2em;
text-align: center;
width: calc(100% - 4em);
}
.small {
color: #e9e9e9;
font-size: .7em;
}
<div class="container">
<div class="container_inside">
<p>Any fool can write code that a computer can understand. Good programmers write code that humans can understand.</p>
<p class="small">Martin Fowler</p>
</div>
</div>
So I want to center "innerDiv1" vertically and horizontally in "outerDiv".
"innerDiv1" has to be position absolute, so "innerDiv2" can over lap it.
I have tried line-height, this doesn't work because "outerDiv" can change size. Line-height doesn't react to percentage the way I want it to.
Here's my snippet:
html, body {
margin: 0;
}
.wrapper {
background: lightblue;
width: 300px;
height: 300px;
}
.outerDiv {
background: red;
height: 50%;
width: 50%;
}
.innerDiv1 {
background: seagreen;
position: absolute;
}
.innerDiv2 {
background: rgba(255,255,255,0.5);
height: 100%;
}
<div class="wrapper">
<div class="outerDiv">
<div class="innerDiv1">Hello World!</div>
<div class="innerDiv2"></div>
</div>
</div>
Thanks for your help.
See for yourself. See the comments in the CSS on what you need to include.
html, body {
margin: 0;
}
.wrapper {
background: lightblue;
width: 300px;
height: 300px;
position: relative; /* 1. Add this. */
}
.outerDiv {
background: red;
height: 50%;
width: 50%;
position: absolute;
top: 25%; /* 2. Add this. */
left: 25%; /* 3. Add this. */
}
.innerDiv1 {
background: seagreen;
position: absolute; /* 4. Add this. */
top: 50%; /* 5. Add this. */
left: 50%; /* 6. Add this. */
transform: translate(-50%, -50%); /* 7. Add this. */
text-align: center; /* 8. Add this if you want the text to be centered. */
}
.innerDiv2 {
background: rgba(255, 255, 255, 0.5);
height: 100%;
top: 50%;
left: 50%;
}
<div class="wrapper">
<div class="outerDiv">
<div class="innerDiv1">Hello World!</div>
<div class="innerDiv2"></div>
</div>
</div>
Add this to your css:
.outerDiv {
position: relative;
}
.innerDiv1 {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
I have an issue with my CSS based page.
I would like to change the background-image on mouse-over the two div and point to another page when click.
I have 3 issues:
The change of background works fine when the screen is in portrait resolution but not in landscape.
I would like to have a fade animation on the background change but I couldn't figure out how.
I would need div1 and div2 to be link so that not only the background change, it also point to another page if user click. I couldn't add on the div without blocking the flex display.
Thank you!
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#media screen and (orientation:landscape) {
.container {
position: absolute;
display: flex;
width: 75vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32.5vmin;
height: 100vmin;
background-color: #ddd;
}
}
#media screen and (orientation:portrait) {
.container {
position: absolute;
display: flex;
width: 100vmin;
height: 133vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50vmin;
height: 133vmin;
background-color: hsla(0, 0%, 0%, 0.1);
}
}
.background1,
.background2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
display: none;
z-index: -1;
}
.background1 {
background: url("http://i.imgur.com/zFYHM67.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.background2 {
background: url("http://i.imgur.com/nYKEFNF.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.div1:hover~.background1 {
display: flex;
}
.div2:hover~.background2 {
display: flex;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="div1">Div 1</div>
<div class="background1"></div>
<div class="div2">Div 2</div>
<div class="background2"></div>
</div>
</body>
</html>
I made some changes in your code (mainly css) see the snippet below:
for issue 1 : you were using #media screen and (orientation:portrait) so the style inside only works for portrait
for issue 2 : i used opacity and transition to have an animation effect
for issue 3: i just changed div tag to a tag
* {
padding: 0;
margin: 0;
}
html,
body {
height: 100%;
text-align: center;
}
#media screen and (orientation:landscape) {
.container {
position: absolute;
display: flex;
width: 75vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 32.5vmin;
height: 100vmin;
background-color: #ddd;
}
}
.container {
position: absolute;
display: flex;
width: 100vmin;
height: 100vmin;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
.div1,
.div2 {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 50vmin;
height: 100vmin;
background-color: hsla(0, 0%, 0%, 0.1);
}
.background1,
.background2 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: -1;
transition: all 1s;
}
.background1 {
background: url("https://www.w3schools.com/css/img_fjords.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.background2 {
background: url("https://www.w3schools.com/howto/img_mountains.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.div1:hover~.background1 {
display: flex;
opacity: 1;
}
.div2:hover~.background2 {
display: flex;
opacity: 1;
}
<div class="container">
Div 1
<div class="background1"></div>
Div 2
<div class="background2"></div>
</div>
I've got such code:
<div id="virtual-studio" class="banner-box">
<a href="some_url" target="_blank">
<img src="some.png" alt="some_alt" class="logo">
</a>
<div class="banner-text">
<img src="some.png" alt="" />
</div>
<a href="some_url" target="_blank" class="see-more-button">
<img src="some.png" alt="some_alt" />
</a>
</div>
and here are styles to this banner-box:
.banner-box {
display: inline-block;
width: 26%;
max-width: 26%;
min-height: 100%;
max-height: 100%;
height: 100%;
margin: 0 auto;
}
.banner-box a {
display: block;
clear: both;
width: 100%;
top: 0;
margin: 0 auto;
padding: 0;
}
.logo {
position: relative;
display: block;
clear: both;
margin: 0 auto;
}
.banner-text {
display: block;
clear: both;
width: 100%;
margin: 0 auto;
}
.banner-text img {
position: relative;
display: block;
clear: both;
margin: 0 auto;
}
.see-more-button {
display: block;
clear: both;
width: 100%;
bottom: 0;
margin: 0 auto;
padding: 0;
}
.see-more-button img {
position: relative;
display: block;
clear: both;
margin: 0 auto;
}
There are three such boxes, horizontally aligned - left, middle, right - and they're inside bigger box named #content, which is in another box named #container.
My whole layout is meant to be 100% fluid - I haven't used pixels anywhere - just percentages.
I'd like to structurize this three images, that they will be aligned vertically inside box, on top-middle-bottom style, but without need to making even one element fixed size.
Every element in layout should have percentage-based size.
Also images I use, should be fluid.
Here's whole .html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
<div id="header">
<div>
<img src="some.png" alt="some-alt" />
</div>
</div>
<div id="container">
<div id="content">
<div id="virtual-studio" class="banner-box">
<a href="some-url.com" target="_blank">
<img src="some.png" alt="some-alt" class="logo">
</a>
<div class="banner-text">
<img src="some.png" alt="some-alt" />
</div>
<a href="some-url.com" target="_blank" class="see-more-button">
<img src="some.png" alt="some-alt" />
</a>
</div>
<div id="mu-interactive" class="banner-box">
<a href="some-url.com" target="_blank">
<img src="some.png" alt="some-alt" class="logo">
</a>
<div class="banner-text">
<img src="some.png" alt="some-alt" />
</div>
<a href="some-url.com" target="_blank" class="see-more-button">
<img src="some.png" alt="some-alt" />
</a>
</div>
<div id="mu-animation" class="banner-box">
<a href="some-url.com" target="_blank">
<img src="some.png" alt="some-alt" class="logo">
</a>
<div class="banner-text">
<img src="some.png" alt="some-alt" />
</div>
<a href="some-url.com" target="_blank" class="see-more-button">
<img src="see-more.png" alt="some-alt" />
</a>
</div>
</div>
<div id="shadows">
<img src="shadows.png" alt="Shadows" />
</div>
</div>
<div id="footer">
<img src="footer-line.png" alt="Footer.png" />
<div id="contact">
<p><span>company</span> co.</p>
<p>mail: <span>contact#mail.com</span></p>
</div>
</div>
</div>
</body>
</html>
and .css:
/*#import url("http://fonts.googleapis.com/css?family=Open+Sans:300italic,300,400italic,400,600italic,600,700italic,700,800italic,800");
*/
/** {
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
/*-moz-box-sizing: border-box; /* Firefox, other Gecko */
/*box-sizing: border-box; /* Opera/IE 8+ */
/*}*/
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
/*-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;*/
}
body {
/*position: relative;*/
width: 100%;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
/*font-size: 15px;*/
font: 1em 'Open Sans', Arial, Helvetica, sans-serif;
/*font: "Arial Black", Gadget, sans-serif;*/
}
img {
max-width: 100%;
height: auto;
/*display: block;
clear: both;
position: relative;
margin: 0 auto;*/
}
#wrapper {
position: absolute;
margin: 10% 15%;
}
#header {
/*position: relative;*/
display: block;
clear: both;
width: 100%;
height: 24%;
margin: 0 auto;
padding: 0 auto;
}
#header div {
/*position: relative;*/
display: block;
clear: both;
width: 100%;
height: 100%;
margin: 0 auto;
padding: 0 auto;
}
#header img {
position: relative;
display: block;
clear: both;
/*width: auto;
height: auto;*/
margin: 0 auto;
/*left: 0; right: 0; bottom: 0;*/
}
#container {
position: relative;
display: block;
width: 100%;
height: 70%;
margin: 0 auto;
padding: 7% 0 0 0;
text-align: center;
}
#content {
position: relative;
display: block;
width: 100%;
height: 85%;
margin: 0 auto;
padding: 0;
text-align: center;
}
.banner-box {
/*position: relative;*/
display: inline-block;
width: 26%;
max-width: 26%;
min-height: 100%;
max-height: 100%;
height: 100%;
margin: 0 auto;
}
.banner-box a {
/*position: relative;*/
display: block;
clear: both;
width: 100%;
/*min-height: 50%;
height: 50%;*/
top: 0;
margin: 0 auto;
padding: 0;
}
.logo {
position: relative;
/*display: inline-block;*/
display: block;
clear: both;
/*width: 100%;
height: 100%;*/
margin: 0 auto;
/*vertical-align: top;*/
}
.logo:hover {
cursor: pointer;
height: auto;
width: auto;
transform:scale(1.1);
-ms-transform:scale(1.1); /* IE 9 */
-moz-transform:scale(1.1); /* Firefox */
-webkit-transform:scale(1.1); /* Safari and Chrome */
-o-transform:scale(1.1); /* Opera */
}
.banner-text {
/*position: relative;*/
/*display: inline-block;*/
display: block;
clear: both;
width: 100%;
/*height: 25%;
min-height: 25%;*/
margin: 0 auto;
top: 50%;
/*padding: 5% 0;
/*font: 0/0 a;
vertical-align: middle;*/
}
.banner-text img {
position: relative;
display: block;
clear: both;
margin: 0 auto;
/*vertical-align: middle;*/
}
.see-more-button {
/*position: relative;*/
display: block;
clear: both;
width: 100%;
/*height: 25%;
min-height: 25%;*/
/*vertical-align: bottom;*/
bottom: 0;
margin: 0 auto;
padding: 0;
}
.see-more-button img {
position: relative;
display: block;
clear: both;
/*width: 100%;
/*height: 100%;*/
margin: 0 auto;
/*font: 0/0 a;*/
}
#virtual-studio {
/*position: relative;
display: inline-block;*/
float: left;
/*width: 290px;
margin: 0 auto;*//*margin: auto;
top: 0; left: 0; bottom: 0; right: 0;*/
}
/*#virtual-studio a {
}
#virtual-studio a img {
}*/
/*#mu-interactive {
/*position: relative;
display: inline-block;*/
/*float: left;*/
/*width: 290px;
margin: 0 auto;*//*margin: auto;
top: 0; left: 0; bottom: 0; right: 0;
}*/
/*#mu-interactive a {
}
#mu-interactive a img {
}*/
#mu-animation {
/*position: relative;
display: inline-block;*/
float: right;
/*width: 290px;
margin: 0 auto;*//*margin: auto;
top: 0; left: 0; bottom: 0; right: 0;*/
}
/*
#mu-animation a {
}
#mu-animation a img {
}/*
/*#virtual-studio a img:hover, #mu-interactive a img:hover, #mu-animation a img:hover {
width: 101%;
height: 101%;
}*/
#shadows {
/*position: relative;*/
display: block;
clear: both;
width: 100%;
height: 10%;
margin: 0 auto;
}
#shadows img {
position: relative;
display: block;
clear: both;
margin: 0 auto;
width: 100%;
/*height: 100%;*/
/*bottom: 15%;*/
/*height: 100%;
top: 0; right: 0; left: 0;*/
}
#footer {
position: relative;
display: block;
clear: both;
width: 100%;
height: auto;
margin: 0 auto;
padding: 0 0 0 0;
/*font-size: 1em;*/
/*top: 0; right: 0; left: 0;*/
}
#footer img {
position: relative;
display: block;
clear: both;
width: 95%;
/*height: auto;*/
margin: 0 auto;
/*padding: 2% 0 0 0;
/*top: 0; right: 0; left: 0;*/
}
#footer #contact {
position: relative;
margin: 1% 0 0 0;
}
#footer p {
display: block;
clear: both;
/*position: relative;*/
margin: 0 auto;
color: #AFBEA5;
text-align: center;
width: auto;
}
#footer span {
font-weight: bold;
color: #BDC9AF;
}
#media only screen
and (max-device-width: 320px) {
html {
background: url('some-background-320.png') no-repeat center center fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
}
#media only screen
and (min-device-width: 321px)
and (max-device-width: 480px) {
html {
background: url('some-background-480.png') no-repeat center center fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
}
#media only screen
and (min-device-width: 481px)
and (max-device-width: 768px) {
html {
background: url('some-background-768.png') no-repeat center center fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
}
#media only screen
and (min-device-width: 767px)
and (max-device-width: 1024px) {
html {
background: url('some-background-1024.png') no-repeat center center fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
}
#media only screen
and (min-device-width: 1025px)
and (max-device-width: 1680px) {
html {
background: url('some-background-1680.png') no-repeat center center fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
}
#media only screen
and (min-device-width: 1681px) {
html {
background: url('some-background-1920.png') no-repeat center center fixed;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: 100% 100%;
}
}
I've tried using position: absolute; or changing to display: table-cell; but nothing worked - maybe I've made mistakes somewhere, when trying this..
When positioning images to absolute, they've collapsed out from own containers and even from #banner-box container
My main problem is I don't know how to make every element of page behave like fixed-size but still be described through percents.
And, how to structurize this #banner-box container, to make it stretch into #content 100% height, and then align those thre images vertically inside #banner-box.
I'd strongly prefer not to use a line of JS, no frameworks and base my layout 100% on percentages, so that's why I' racking my brains on this problem. I'd like to use only XHTML/CSS2 or HTML5/CSS3 but to make this website work on IE8+ and modern browsers.
But if there won't be any chance not using even a pixel, what grid size (website fixed size, not grid framework like Bootstrap .etc) would be best for me? 960px or 1024px?
Cheers and sorry if my simple&stupid (probably), yet tough for me, problem is annoying for ya.
I recommend you to read this tutorial: http://tinyurl.com/qb6q78o
Specifically the Tuscany Luxury Resorts example, which you can check live in here: http://cameronmoll.com/projects/book/
It is a totally fluid design, including images. I programmed my own version in a couple of days having only 10 days of experience in CSS.
I'm trying to replicate this mockup:
I know how to create a semi-circle in CSS but I don't want an entire semi-circle. I want just the top, center portion of a much larger circle.
I'm specifically looking for the CSS code to create the black circle in the above mockup. Thanks!
Here is my attempt:
<!DOCTYPE html>
<html>
<head>
<title>Landing Page</title>
<link rel="stylesheet" href="/stylesheets/style.css">
</head>
<body>
<h1>
<img id="logo" src="/images/logo.png">
</h1>
<div id="half_circle">
<div id="footer_container">
<div id="learn">
Learn more.
</div>
<div id="signin">
<div>
Sign in to start callin'it
</div>
</div>
</div>
</div>
</body>
</html>
#half_circle {
width: 100%;
height: 50%;
border-radius: 100% 100% 0 0;
background-color: #111111;
display: block;
position: absolute;
bottom: 0;
}
#footer_container {
display: block;
position: relative;
height: 100%;
width: 100%;
}
#learn {
text-align: center;
padding-top: 3em;
}
#footer_container a {
color:white;
}
#signin {
display: block;
width: 100%;
position: absolute;
bottom: 10%;
margin-right: auto;
margin-left: auto;
}
#signin div {
text-align: center;
}
Just make a big circle and hide it :)
Demo: http://jsfiddle.net/Ye35w/1/
body {
overflow: hidden;
}
.circle {
position: absolute;
top: 65%;
left: -25%;
display: block;
width: 150%;
height: 150%;
background-color: #ccc;
border-radius: 50%;
}