This question already has answers here:
Position an element relative to its container
(5 answers)
CSS Positioning is not working as expected
(2 answers)
Media Queries: How to target desktop, tablet, and mobile?
(21 answers)
Position Relative vs Absolute?
(10 answers)
Closed 3 years ago.
So, I am using position:absolute to align elements on my website and it looks different on other resolutions. my current resolution is 1920x1080. I have another screen with 1366x768 resolution and it looks terrible on it. This is my first time of making proper website. Is there any other way to align elements to avoid this thing?
<html>
<head>
<style>
body{
background-color:gray;
overflow:hidden;
width:1366px;
height:768px;
}
.logo{
}
.mountain{
height:75px;
position:absolute;
left:15%;
top: 2%;
}
.name{
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif"; font-size: 300%; font-style: normal; font-variant: normal; font-weight: 400; line-height: 26.4px;
position:absolute;
top: 0%;
left: 19.5%;
}
.navigation{
position:relative;
top: 6%;
left: 50%;
}
.f{
height:30px;
width: 30px;
border-style:solid;
border-radius: 70px;
border-width: 1.5px;
border-color: white;
top:0px;
position:absolute;
left:20%;
}
.t{
height:30px;
width: 30px;
border-style:solid;
border-radius: 70px;
border-width: 1.5px;
border-color: white;
top:0px;
position:absolute;
left:23%;
}
.g{
height:30px;
width: 30px;
border-style:solid;
border-radius: 70px;
border-width: 1.5px;
border-color: white;
top:0px;
position:absolute;
left:26%;
}
.social{
display:inline-flexbox;
position:relative;
top: 30px;
left:1000px;
}
.content{
font-family: monospace; font-size: 500%; font-style: normal; font-variant: normal; font-weight: 700; line-height: 26.4px;
color:white;
position:absolute;
top: 30%;
left: 37%;
}
.content1{
font-family: monospace; font-size: 110%; font-style: normal; font-variant: normal; font-weight: 700; line-height: 200%;
color:white;
position:absolute;
top: 43%;
left: 24%;
}
.button{
height:50px;
width:200px;
border-style: solid;
border-width: 2px;
border-radius: 70px;
border-color:white;
position:absolute;
top: 50%;
left: 42%;
}
</style>
</head>
<body>
<div class="whole">
<div class="logo">
<img class="mountain" src="img/mountain.png">
<p class="name" style="color:white;">EVEREST</p>
</div>
<div class="navigation">
Features
Services
Contact us
</div>
<div class="social">
<div class="f">
<img src="img/f.png" style="height:25px;">
</div>
<div class="t">
<img src="img/t.jpg" style="height:25px;">
</div>
<div class="g">
<img src="img/g.png" style="height:25px;">
</div>
</div>
<div class="content">
<p> Hello World. </p>
</div>
<div class="content1">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="button">
GET STARTED
</div>
</div>
</body>
</html>
this is what is looks like on 1366x768
You need to do a responsive website using Media queries of a framework like Bootstrap using a grid.
Here an example of Media queries:
#media (min-width: 30em) and (orientation: landscape) { ... }
Here an example of the grid Bootstrap displaying 3 equals columns independent of the screen size:
<div class="container">
<div class="row">
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
<div class="col-sm">
One of three columns
</div>
</div>
</div>
Related
I want my first div "panel-1" to take the full width and height of screen.
I have been trying to break this problem from 3 days.
I tried height :100% & width:100 on parent. Then position:relative on section and position:absolute on div. I tried various other solutions on stack overflow. But none helped.
I created a fiddle at:-
https://jsfiddle.net/81uo3zfc/
<div id="navigation_panel">
<ul>
<li>Home</li>
<li>Technologies</li>
<li>Projects</li>
<li>Resources</li>
<li>Contact</li>
</ul>
</div>
<section>
<div id="panel-1">
<p class="lazyText">Hey!</p>
<p class="lazyText">Lorem ipsum dolor </p>
<p class="colorTransition">sit amet consectetur.</p>
<a class="nextBtn" id="nextBtn-1" href="#panel-2">Let's Go <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-2">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" id="nextBtn-2" href="#panel-3">Roger That <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-3">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" name="nextBtn-3" data="tech" href="javascript:;">Tech Person <img class="emoji" src="images/tech.svg" alt="Tech Icon"></a>
<a class="nextBtn" name="nextBtn-3" data="nontech" href="javascript:;" style="margin-left: 10px;">Non Tech Person <img class="emoji" src="images/non_tech.svg" alt="Non Tech Icon"></a>
</div>
</section>
Please help. I am new to CSS. And i really tried solving it on my own. But failed.
The Problem you ran into is, that the % sizes relate to the last offset parent (the body or the next relative/absolute/fixed element in the parent chain).
Since your offset parent is using the full screen height, elements using 100% will scale to that size too.
The way to go would be a flex layout.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Set the flex layout to the parent element of the navigation, set the direction to column and size it to screen height. The navigation will remain static size by adding flex-grow:0; flex-shrink:0.
The content will be shown in a additional .content container, wich takes up the rest of the screen space using flex-grow:1;. The entries will will then be scaled to the height of the .content container using height:100%;.
The footer can also be part of this setup, by placing it in the .sizer container and set flex-grow:0; flex-shrink:0
html,body{
height: 100%;
margin:0;
}
.sizer {
display:flex;
flex-direction:column;
height: 100%;
}
.content {
flex-grow:1;
overflow: scroll;
}
#navigation_panel
{
background-color: #15598f;
padding: 2%;
margin: 0;
flex-shrink: 0;
flex-grow: 0;
}
#navigation_panel>ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation_panel>ul>li
{
display: inline;
margin : 2%;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#navigation_panel>ul>li>a{
text-decoration: none;
color: #ffffff;
}
section
{
width: 70%;
margin-left: auto;
margin-right: auto;
height: 90%;
height:100%;
padding: 20px 0;
box-sizing: border-box;
}
#panel-1,#panel-2,#panel-3,#panel-4,#panel-5,#panel-6
{
border: 4px solid #27a9e0;
position: relative;
padding: 4%;
height: 100%;
box-sizing: border-box;
}
#panel-1 p,#panel-2 p:nth-child(1),#panel-3 p:nth-child(1),#panel-4 p:nth-child(1),#panel-5 p:nth-child(1),#panel-6 p:nth-child(1)
{
font-size: 40px;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
}
.normal{
font-size: 24px;
font-family: 'Open Sans', sans-serif;
}
.normal-small{
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.nextBtn
{
background-color: #15598f;
text-decoration: none;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: #ffffff;
}
.emoji
{
width: 25px;
margin-left: 5px;
vertical-align: inherit;
transition: 0.5s;
}
.emoji:hover
{
transform: rotate(-30deg);
}
.AdditionalList>li>a
{
color : #1b8ab9;
border-bottom: 1px solid #27a9e066;
text-decoration: none;
margin: auto;
}
.AdditionalList>li
{
margin-bottom: 20px;
}
footer{
margin: 5% 2% 0% 0%;
}
.third{
width: 33%;
padding: 10px;
background-color: #242f4a;
color: #ffffff;
}
/*Technologies Css*/
.techlist>li{
font-size: 34px;
font-family: 'Open Sans', sans-serif;
}
<div class="sizer">
<div id="navigation_panel">
<ul>
<li>Home</li>
<li>Technologies</li>
<li>Projects</li>
<li>Resources</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<section>
<div id="panel-1">
<p class="lazyText">Hey!</p>
<p class="lazyText">Lorem ipsum dolor </p>
<p class="colorTransition">sit amet consectetur.</p>
<a class="nextBtn" id="nextBtn-1" href="#panel-2">Let's Go <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-2">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" id="nextBtn-2" href="#panel-3">Roger That <img class="emoji" src="images/hand.svg" alt="Continue Icon"></a>
</div>
</section>
<section>
<div id="panel-3">
<p class="lazyText">Lorem ipsum</p>
<p class="normal lazyText"> dolor, sit amet </p>
<p class="normal">consectetur adipisicing elit. Voluptatum, a.</p>
<a class="nextBtn" name="nextBtn-3" data="tech" href="javascript:;">Tech Person <img class="emoji" src="images/tech.svg" alt="Tech Icon"></a>
<a class="nextBtn" name="nextBtn-3" data="nontech" href="javascript:;" style="margin-left: 10px;">Non Tech Person <img class="emoji" src="images/non_tech.svg" alt="Non Tech Icon"></a>
</div>
</section>
</div>
</div>
You can use width: 100vw; and height: 100vh to exactly match the screen/viewport size.
Set this:
#panel-1{
width: 100vw;
height:100vh;
}
try this
**css**
html,body{
/*height: 100%;*/
margin:0;
/*border:1px solid black;*/
}
#navigation_panel
{
background-color: #15598f;
padding: 2%;
margin: 0;
}
#navigation_panel>ul
{
list-style-type: none;
padding: 0;
margin: 0;
}
#navigation_panel>ul>li
{
display: inline;
margin : 2%;
font-size: 20px;
font-family: 'Open Sans', sans-serif;
font-weight: 600;
}
#navigation_panel>ul>li>a{
text-decoration: none;
color: #ffffff;
}
section
{
width:100%;
margin-left: auto;
margin-right: auto;
margin-top: 2%;
margin-bottom: 40px;
height: 100%;
}
#panel-1,#panel-2,#panel-3,#panel-4,#panel-5,#panel-6
{
border: 4px solid #27a9e0;
position: relative;
padding: 4%;
height: 90%;
max-height: 600px !important;
}
#panel-1{
height: calc(100vh - 176px);
max-height: inherit !important;
}
#panel-1 p,#panel-2 p:nth-child(1),#panel-3 p:nth-child(1),#panel-4 p:nth-child(1),#panel-5 p:nth-child(1),#panel-6 p:nth-child(1)
{
font-size: 40px;
font-family: 'Open Sans', sans-serif;
font-weight: bolder;
}
.normal{
font-size: 24px;
font-family: 'Open Sans', sans-serif;
}
.normal-small{
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.nextBtn
{
background-color: #15598f;
text-decoration: none;
padding: 20px;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
color: #ffffff;
}
.emoji
{
width: 25px;
margin-left: 5px;
vertical-align: inherit;
transition: 0.5s;
}
.emoji:hover
{
transform: rotate(-30deg);
}
.AdditionalList>li>a
{
color : #1b8ab9;
border-bottom: 1px solid #27a9e066;
text-decoration: none;
margin: auto;
}
.AdditionalList>li
{
margin-bottom: 20px;
}
footer{
margin: 5% 2% 0% 0%;
}
.third{
width: 33%;
padding: 10px;
background-color: #242f4a;
color: #ffffff;
}
/*Technologies Css*/
.techlist>li{
font-size: 34px;
font-family: 'Open Sans', sans-serif;
}
set this:
#panel-1{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
}
I'm designing this box but I have the following problem. I have an image, a header and some text inside of it but I can't align the header so that it appears above the rest of the text. It ends up looking like this:
HTML:
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="Iconos/Help/favorites_help.png" alt="Fav" class="favor_help">
</div>
<div class="Messagebox_title">
<h1 >Favorites category
</h1>
</div>
<div class="Messagebox">
<h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
CSS regarding the two text parts:
.Messagebox_title {
vertical-align:middle;
display:table-cell;
text-align:center;
color: #555;
position: relative;
font-family: monaco, monospace;
font-size: 15px;
}
.Messagebox {
vertical-align:middle;
display:table-cell;
text-align:justify;
color: #555;
position: relative;
margin-left: 2px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 0px;
font-family: monaco, monospace;
font-size: 15px;
}
You could use flexbox, you would need to wrap the text in an additional div.
Example:
.Messagebox_title {
text-align: center;
}
.Messagebox {
text-align: justify;
margin: 0 2px;
}
.box {
font-size: 15px;
font-family: monaco, monospace;
display: flex;
color: #555;
}
.text_wrapper {
display: flex;
flex-direction: column;
}
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="https://unsplash.it/150" alt="Fav" class="favor_help">
</div>
<div class="text_wrapper">
<div class="Messagebox_title">
<h1>Favorites category
</h1>
</div>
<div class="Messagebox">
<h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
</div>
You can also do something similar with CSS Grid, which reduces the amount of HTML needed.
.Favorites {
display: grid;
grid-template-columns: 150px 1fr;
grid-gap: 1em;
font-size: 15px;
font-family: monaco, monospace;
color: #555;
}
.picture {
grid-row: 1 / 3;
}
h1 {
grid-column: 2;
text-align: center;
}
h4{
grid-column: 2;
grid-row: 2;
text-align: justify;
margin: 0 2px;
}
<div class='Favorites'>
<div class="picture">
<img src="https://unsplash.it/150" alt="Fav" class="favor_help">
</div>
<h1>Favorites category</h1>
<h4>You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.</h4>
</div>
Try changing according to your need
.box{float:left;width:100%;position:relative;border:1px solid yellow;margin-bottom:15px;}
info{border:1px solid blue;}
.icon{float:left;width:100px;background:yellow;height:120px;text-align:center;position:relative;overflow:hidden;}
.info .icon{background:blue;}
.icon span{position:absolute;top:auto;margin:33% auto;left:0;right:0;bottom:auto}
.text{float:left;width:calc(100% - 100px);width:-webkit-calc(100% - 200px);padding:5px;}
<div class="box">
<div class="icon"><span>Img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
</div>
<div class="box info">
<div class="icon"><span>img</span></div>
<div class="text">
<h3>Heading comes here</h3>
<p>Lorem ipsum dolor sit amet, case discere concludaturque in mel, omnis aliquid offendit ut usu, ea minim partiendo vix</p></div>
</div>
You are doing fine.
Your code works by making a small change.
Just change display: to block and add float: left to your picture.
<style>
.picture
{
float:left;
margin-right:10px;
}
.Messagebox_title {
vertical-align:middle;
display:block;
text-align:left;
color: #555;
position: relative;
font-family: monaco, monospace;
font-size: 15px;
}
.Messagebox {
vertical-align:middle;
display:block;
text-align:justify;
color: #555;
position: relative;
margin-left: 2px;
margin-right: 2px;
margin-top: 0px;
margin-bottom: 0px;
font-family: monaco, monospace;
font-size: 15px;
}
</style>
<div class='Favorites'>
<div class='favorites_info'>
<div class="box">
<div class="picture">
<img src="http://eztechtraining.com/wp-content/uploads/2012/11/2012-10-20-21.38.35-150x150.jpg" alt="Fav" class="favor_help">
</div>
<div class="Messagebox_title">
<h1 >Favorites category
</h1>
</div>
<div class="Messagebox">
<h4 >You can select devices as favorites so you can get access to them quicklier. Devices marked as favorites will be displayed in the "Favorites" category under the "Devices" tab.
</h4>
</div>
</div>
</div>
I'm trying to hide a section of the page until a button is clicked, whats the best way to achieve this?
I have attached an image below encircled in red is the button I want to work as a toggle to show the content of the laptops section. Currently if you click the image it just opens a tab with an image and instead I want it to show open the laptops and mac section.
I have attached a JS fiddle with my current code.
https://jsfiddle.net/2j4b4bdn/2/
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<link href="style.css" rel="stylesheet" crossorigin="anonymous">
<style>
body {
background-color: #161A25;
margin:0;
}
#logo {
position:absolute;
left:0;
top:0;
}
h9
{
color: white;
position:absolute;
right:50rem;
top:4rem;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h10
{
color: white;
position:absolute;
right:30rem;
top:4rem;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h6
{
color: black;
position:absolute;
font-size: 15px;
font-family: 'Raleway', sans-serif;
}
h7
{
color: #32CE87;
position:absolute;
right:6rem;
top:2.5rem;
font-size: 9px;
font-family: 'Raleway', sans-serif;
}
h8
{
color: white;
position:absolute;
right:6rem;
top:3.5rem;
font-family: 'Raleway', sans-serif;
font-size: 22px;
color: #32CE87;
}
.footer {
position: fixed;
right:0;
bottom: 0;
width: 100%;
height:110px;
background-color: #2A3046;
color: white;
}
img.logo {
height: 80px;
left:3em;
position: relative
}
img.logo1 {
height: 40px;
left:3em;
bottom:2rem;
position:absolute;
}
.my-button {
display: inline-block;
margin: 1px;
background: #32CE87;
color: white;
font-family: 'Raleway', sans-serif;
text-align: center;
border-radius: 5px;
padding: 8px 16px;
-moz-transition: all 0.2s;
-webkit-transition: all 0.2s;
transition: all 0.2s;
width: 100px;
text-decoration: none;
}
.my-button:hover {
background: #666;
color: #c1e1e0;
}
.center-bottom {
position: fixed;
bottom: 12rem;
width: 100%;
text-align: center;
}
img.arrow {
max-height: 40px;
}
.row {
background-color: white;
max-width:100%;
margin-top: 0.5rem;
margin-left: 10px;
margin-right: 10px;
border-radius: 5px;
}
.box1 {
background-color: white;
max-width:100%;
height:250px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
img {
margin-top:0.5rem;
}
div.container1 {
background-color: white;
max-width:100%;
height:250px;
padding-bottom:50px;
margin-top: 0.5rem;
margin-left: 25px;
margin-right: 25px;
border-radius: 5px;
}
div.container {
margin-top:14rem;
}
p {
font-size:7px;
width:490px;
position: absolute;
right:12em;
text-align: left;
bottom: 1.5rem;
}
img.laptop {
height: 80px;
position: absolute;
left:0px;
right: 0px;
margin-top: -0.5rem;
margin-left: auto;
margin-right: auto;
}
div.bottomtext {
position: relative;
left:0px;
right: 0px;
font-family: 'Raleway', sans-serif;
margin-left: auto;
margin-right: auto;
text-align: center;
width:800px;
top:7rem;
font-size: 1.2rem;
}
img.textimage
{
height:20px;
left:8rem;
position: absolute;
font-family: 'Raleway', sans-serif;
}
.images {
display: inline;
margin: 0px;
padding: 0px;
vertical-align:middle;
width:200px;
}
#content {
display: block;
margin: 0px;
padding: 0px;
position: relative;
top: 90px;
height: auto;
max-width: auto;
overflow-y: hidden;
overflow-x:auto;
word-wrap:normal;
white-space:nowrap;
height: 50px;
}
img.column {
height:50px;
width: 100%;
position: relative;
padding: 0px;
margin: 0px;
}
img.row
{height:60px;
}
h9:hover {
color: #32CE87;
}
h10:hover {
color: #32CE87;
}
p:hover {
color: #32CE87;
}
h7:hover {
color: white;
}
h8:hover {
color: white;
}
.pt-inner-wrap {
color: #ecf0f1;
text-align: center;
color: black;
border-right: 1px solid #d4d4d4;
bottom:-6px;
}
.pt-inner-wrap1 {
color: #ecf0f1;
height: 200px;
text-align: center;
color: black;
border-right: 1px solid #d4d4d4;
bottom:-6px;
}
img.img-responsive {
width: 230px;
height: 32px;
}
img.img-responsive1 {
width: 260px;
height: 50px;
margin-top: 12rem;
}
h4 {
font-size: 18px;
font-family: 'Raleway', sans-serif;
top: 1rem;
}
h6.pt-title {
font-size: 20px;
text-align: center;
vertical-align: middle;
position: absolute;
}
h6.pt-title1 {
margin-top:8rem;
font-size: 20px;
width: 200px;
margin-left:12rem;
position: absolute
}
figcaption {
font-family: 'Raleway', sans-serif;
}
.col-xs-2{
background: #32CE87;;
color:#FFF;
border-radius: 5px;
height: 50px;
text-align: center;
padding-top: 5px;
font-size: 3rem;
}
.col-half-offset{
margin-left:4.166666667%;
text-align: center;
vertical-align:middle;
padding-top: 5px;
}
p.text1 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:86rem;
border-right: 1px solid;
}
p.text2 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:63rem;
border-right: 1px solid;
}
p.text3 {
position:fixed;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
right:39rem;
border-right: 1px solid;
}
p.text4 {
position:fixed;
right: 16rem;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
}
p.text5 {
position:fixed;
left:17rem;
bottom:23rem;
text-align:center;
width:160px;
font-size:16px;
font-family: 'Raleway', sans-serif;
border-right: 1px solid;
}
</style>
</head>
<body>
<img src="Logo-Trans.png" class="logo" >
<div class="toptext">
<h9> GET A QUOTE</h9>
<h10> RETRIEVE A QUOTE</h10>
<h7>NEED HELP OR ADVICE?CALL US <br style> </h7>
<h8> 0800 0481804</h8>
</div>
<img src="nav.png" class="column">
<div class="container1">
<div class="row">
<div class="col-sm-4">
<div class="pt-inner-wrap">
<i class="fa fa-mobile fa-4x"></i>
<h4 class="pt-title">Mobiles & Smartphones</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Total Value when new</figcaption>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Would you like instant replacement?<i class="fa fa-question-circle" aria-hidden="true" style="margin-right;1rem; color:grey" ></i></figcaption>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
</div>
</div>
<div class="col-sm-4">
<div class="pt-inner-wrap">
<img src="tablet.png" style="height:50px;">
<h4 class="pt-title">iPad's & Tablets</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Total Value when new</figcaption>
<img src="10000.png" width="200px" class="img-responsive" style="margin: 0 auto;"> <figcaption>Would you like instant replacement?<i class="fa fa-question-circle" aria-hidden="true" style="right;1rem; color:grey"></i></figcaption>
<img src="replacement.png" width="200px" class="img-responsive" style="margin: 0 auto;">
</div>
</div>
<div class="col-sm-4" >
<div class="pt-inner-wrap" style="border-right: 0px ">
<i class="fa fa-laptop fa-4x"></i>
<h4 class="pt-title">Laptops & Macbooks</h4>
<figcaption>How many would you like to insure?</figcaption>
<img src="10.png" width="200px" class="img-responsive" style="margin: 0 auto;">
<figcaption>Select the value range for the device(s)</figcaption>
<img src="2000.png" width="100px" class="img-responsive" style="margin: 0 auto;"> <figcaption>OR</figcaption>
<h6 class="pt-title"></h6>
<img src="multiple.png" width="200px" class="img-responsive" style="margin: 0 auto;" onclick="window.open(this.src)">
</div>
</div>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="box1">
<div> <img src="laptop.png" class="laptop"> </div>
<div class="bottomtext">Please enter a figure for the number of individual laptops/macbooks that you would like to insure in each price range. Where you dont want cover with a particular price range, please leave bank.</div>
<div class="container">
<div class="row" style="">
<div class="col-xs-2" id="p1">0</div>
<p class=Text1>Up to £500 <br>How many would you like to insure?</p>
<div class="col-xs-2 col-half-offset" id="p2">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text2>Up to £500 <br>How many would you like to insure?</p></div>
<div class="col-xs-2 col-half-offset" id="p3">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text3>Up to £500 <br>How many would you like to insure?</p> </div>
<div class="col-xs-2 col-half-offset" id="p4">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text4>Up to £500 <br>How many would you like to insure?</p></div>
<div class="col-xs-2 col-half-offset" id="p5">0</div>
<div style="position:absolute; left:10rem;">
<p class=Text5>Up to £500 <br>How many would you like to insure?</p></div>
<div></div>
</div>
</div>
</div>
<div class="footer">
<div class="center-bottom">
<a class="my-button" title="Relevant Title" href="#">BACK</a>
<a class="my-button" title="Relevant Title" href="#">NEXT</a>
</div>
<p> © Insync Insurance Solutions Ltd 2016 All rights reserved. Mobiru is a trading style of Insync Insurance Solutions Ltd which is authorised and regulated by the Financial Conduct Authority. Our registered office is Midland House, 2 Poole Road, Bournemouth, Dorset BH2 5QY and we are registered in England under company number 08810662. Should you have cause to complain, and you are not satisfied with our response to your complaint, you may be able to refer it to the Financial Ombudsman Service, which can be contacted as follows: The Financial Ombudsman Service Exchange Tower, London, E14 9SR | <br>Tel: 0800 023 4567 or 0300 123 9 123 | www.financial-ombudsman.org.uk | Terms of Business </p>
<img src="Logo-Trans.png" class="logo1">
</div>
</body>
</html>
First, in the future I would suggest that you copy over only the relevant code to the problem you're facing. Dumping all the HTML, CSS, and JS into a single block like that, much of it not being pertinent to the problem you're trying to solve, makes it difficult for others to slog through.
Now, since your already including jQuery (though you need to include it in your <head> tag), you might as well just use some CSS and the .toggleClass() function included with it.
Below is some code that displays it in action, as yours was a bit cluttered to display a concise concept. You basically need to execute the .toggleClass() function on the desired element (the laptop/mac section) when the button is clicked. If you want it to look smoother, you'll want to look into the .hide() and .show() functions. Documentation can be found here.
$( "#toggleBtn" ).click(function() {
$( ".laptops" ).toggleClass( "show" );
});
body {
padding: 10px 0px;
}
.laptops {
padding: 5px 10px;
margin-top: 10px;
background-color: #32CE87;
display: none;
}
<html>
<head>
<meta charset="utf-8">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div>
<button id="toggleBtn">Show and Hide</button>
</div>
<div class="laptops">
<p>
The content you want to show and hide. Here is the mac/laptop section.<br>
More stuff about laptops.<br>
Event more content if you wanted it.
</p>
</div>
</div>
</body>
</html>
I'm not completely sure what you're trying to achieve, but if you just want an element to appear when another element is clicked, you can easily do so using js. I normally handle the visiblity in css, and add a class to make the element appear.
HTML:
<div class="toggler">
Click me
</div>
<div class="element">
Hello
</div>
CSS:
.element{
opacity:0;
}
.element.show{
opacity:1;
}
JS:
var elementToClick = document.querySelector(".toggler");
var elementToShow = document.querySelector(".element");
if(elementToClick){
elementToClick.addEventListener("click", showElement)
}
function showElement(){
elementToShow.classList.add("show");
}
https://jsfiddle.net/L3r43pg0/
I have to code something like this in html/css (I'm also using the Skeleton framework):
design preview
I tried lots of ways to make the background and the image overlap and used absolute positioning for the image. Not sure if it's the best option, especially since when I change the width of the browser the design starts to fall apart, and I want it to be responsive.
Is there a better way to implement this? If not, how do I make the image vertically centered with regard to the gray background. Thank you!
Here are the html/css files + skeleton and the image (for testing purposes): Dropbox folder
And here's the pure code. HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="news twelve columns">
<div class="imgcont seven columns">
<img src="newsimg.jpg">
</div>
<div class="newsimage ten columns">
<div class="newstext six columns">
<div class="row">
<h2>Latest News</h2>
<h3>New video coming out soon!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
</div>
<div class="row">
<div class="more">MORE</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
And CSS:
.news{
margin-top: 3.125em;
}
.newsimage{
position: relative;
float: right;
background-color: #594f4e;
height: 100%;
}
.imgcont{
position: absolute;
top: 6em;
left: 0;
z-index: 200;
}
.newstext{
float:right;
}
.newstext h2{
display: inline-block;
font-size: 2.6em;
text-transform: uppercase;
float: right;
padding: 0.5em 0.75em 0 0;
letter-spacing: 0.02em;
}
.newstext h3{
display: inline-block;
font-size: 2.35em;
float: left;
padding: 0 0.5em 0 0;
line-height: 1.2em;
}
.newstext p{
display: inline-block;
font-size: 1.55em;
float: left;
padding: 0 1em 0 0;
line-height: 1.3em;
margin-bottom: 0.5em;
}
.more{
display: inline-block;
background-color: #716960;
margin: 0 1em 1em auto;
float: right;
}
.more a{
display: block;
color: white;
padding: 0.5em 0.75em;
text-decoration: none;
font-size: 1.35em;
text-transform: uppercase;
letter-spacing: 0.03em;
float: right;
}
img{max-width:100%;}
h1, h2, h3, p{
color: white;
}
A possible solution, probably there is a better solution, i dont know skeleton.cssHTML-Code:
<div class="container">
<div class="row custom">
<div class="news nine columns">
<div class="newstext six columns">
</div>
</div>
</div>
</div>
CSS-Code:
.row.custom {
background: url(newsimg.jpg);
background-size: 40% 60%;
background-position: 20% center;
background-repeat: no-repeat;
margin: 50px auto;
}
.news.nine.columns {
position: relative;
float: right;
height: 100%;
background-color: #594f4e;
z-index:-1;
}
You have to adjust background-size, background-position...
Explanation:https://css-tricks.com/almanac/properties/b/background-position/ https://css-tricks.com/almanac/properties/b/background-size/
After that you need to add media queries to your CSS-Code, to adjust your design for smaller screens: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
My footer isn't at the bottom of the page.
Solutions I have tried:
- W3C validator (now passed)
- Cleaning up code (indenting etc)
- Checked all divs and tags were ended
None of the above worked, and the problem still persists.
Here is a screen shot of the problem:
Please not the red bar across the middle is the footer. Its meant to be at the bottom, not in the middle of the page.
My Html:
<body>
<div id="call-back"></div>
<div id="header">
<br>
<span style="color:#BB2131;">
Welcome to Madhouse Creative </span>
<div style="float:right;">
<img src="images/social/twitter.png" class="social_button" alt="">
<img src="images/social/facebook.png" class="social_button" alt="">
</div>
<br>
<br>
<img src="images/logo.png" alt="logo">
<div id="nav">
<ul id="list-nav">
<li>HOME</li>
<li>ABOUT</li>
<li>PORTFOLIO</li>
<li>CONTACT</li>
</ul>
</div>
</div>
<div id="head-slider-break"></div>
<div id="home-slider">
<script type="text/javascript">
$(window).load(function()
{
$('#slider').nivoSlider();
});
</script>
<div class="slider-wrapper theme-default">
<div class="ribbon"></div>
<div id="slider" class="nivoSlider" style="margin-top:30px;">
<img src="images/middleimage3.png" alt="" >
<img src="images/middleimage.png" alt="" >
<img src="images/middleimage2.png" alt="" >
</div>
</div>
</div>
<div id="wrapper">
<h1>A <span style="color:#BB2131;">WEB</span> AND <span style="color:#BB2131;">GRAPHIC DESIGN</span> COMPANY</h1>
<p>Madhouse Creative is a new, innovative company looking to bring a fresh look to how businesses market and present themselves on the internet with elegant designs that contain endless potential. Specialists in user immersing visualisations, they bring a unique approach to brand identity.</p>
<p>Based in Kent, working with business throughout the UK. We aim to change the way your business is seen, heard and talked about. Contact us today to see how we could help your business.</p>
<div style="width:960px;border:1px dashed #cccccc; margin-top:40px;"></div>
<h1>WHAT <span style="color:#BB2131;">WE</span> CAN <span style="color:#BB2131;">OFFER</span>?</h1>
<div id="what-we-offer" style="border:2px solid #cccccc;">
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">WEB DESIGN</h3>
</div>
<img src="images/design-web-image.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">WEB MARKETING</h3>
</div>
<img src="images/web-marketing.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">GRAPHIC DESIGN</h3>
</div>
<img src="images/graphic-design.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">LOGO DESIGN</h3>
</div>
<img src="images/logodesign.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">VISUALIZATION</h3>
</div>
<img src="images/visualization.png" class="home-thumb-image" alt="">
</div>
<div class="col">
<div class="red-box">
<h3 style="margin-top:0px;">WEB APPS</h3>
</div>
<img src="images/web-marketing2.png" class="home-thumb-image" alt="">
</div>
</div>
</div>
<div id="footer">
</div>
Here is my CSS:
body {
background-color:#ffffff;
margin: 0px;
}
h1 {
font-family: "Helvetica Neue" bold;
color:#cccccc;
font-size: 35pt;
line-height: 1.1;
}
#content h1 {font-family: "Helvetica Neue" bold;
color:#cccccc;
font-size: 35pt;
line-height: 1.1;
margin-bottom: -10px;
}
h2, h3, h4, h5, h6{
font-family: "Helvetica Neue" bold;
color:#808080;
}
a {color:#BB2131; text-decoration: none;}
a:hover {color:#BB2131; text-decoration: underline;}
#header{height: 50px; width: 100%;font-family: "Helvetica Neue";
}
#home-slider {
margin:0 auto;width:960px; height:auto;
}
#head-slider-break {height:60px;}
#wrapper{
width:960px;
margin:0 auto;
color:#000000;
font-family: "Helvetica Neue";
font-size:12pt;
line-height:1.2;
word-spacing:1.5;
}
#social{
text-align: right;
padding-top: 4px;
}
#header1{height: 50px; width: 100%; background-image: url(images/header.png);}
#headtxt {margin-top: -40px;}
#nav {width:400px; float: right;}
ul#list-nav {
list-style:none;
padding:0px;
float: right;
}
ul#list-nav li {
display:inline;
}
ul#list-nav li a {
text-decoration:none;
height: 40px;
padding: 7px;
color:#808080;
float:left;
text-align:center;
line-height: 3;
font-size: 15px;
font-family: "Helvetica Neue" bold;
font-weight: bolder;
}
ul#list-nav li a:hover {
color:#BB2131;
}
#head{
color: #ffff66;
font-family: ;
font-size: 30px;
}
.container {
padding-left: 20px;
padding-right: 20px;
}
.social_button {
width:36px;
height:36px;
}
#index_middle_image {
margin-top:30px;
}
#request_call_back {
margin-left:10px;
}
.nivoSlider {
position:relative;
width:960px; /* Change this to your images width */
height:397px; /* Change this to your images height */
background:url(images/loading.gif) no-repeat 50% 50%;
}
.nivoSlider img {
position:relative;
top:0px;
left:0px;
display:none;
}
.nivoSlider a {
border:0;
display:block;
}
#redbox {background-image:url('images/red-box-for-web.png'); width:160px;
height:75px;;color:#ffffff; font-size:14pt;
font-family: "Helvetica Neue"; float:left; text-align:center; line-height:80px; padding-right: 30px;overflow: hidden;}
#greybox {background-image:url('images/grey-box-for-web.png'); width:160px;
height:75px;color:#BB2131; font-size:14pt;
font-family: "Helvetica Neue"; float:left;text-align:center;line-height:80px; padding-right: 30px; overflow: hidden;}
#what-we-offer .col {float: left; width: 315px; padding: 2px;}
#what-we-offer {width: 960px;margin-bottom: 10px;
padding: 5px;
height: auto;
float: left;}
.red-box {
background-image: url(images/red-box.png);
width: 315px;
height: 68px;
margin-bottom: 5px;
margin-top: 5px;
}
#what-we-offer h3 {color: #ffffff; text-align: center; line-height: 4;}
.home-thumb-image {width:315px; height: 179px;}
#call-back{background-image: url(images/REQUEST-CALL-BACK-2.png); float: right; width: 100px; height: 100px; top: 0; right: 0; position: fixed; }
#footer {background-image: url(images/footer2.png); height: 300px;}
#home-text {width:960px; height:auto;}
#header {
width:960px;
margin:0 auto;
font-family: "Helvetica Neue";
font-size:12pt;
word-spacing:1.5;
}
I have done my best to include any necessary code and edit out any unnecessary CSS.
If anyone could help diagnose what is wrong with my code and/or what I need to add it would be a great help.
It looks like you are floating #what-we-offer. Add clear:both to #footer to make sure you clear all the floating elements.
Try to add clear: both; to your footer's CSS. This should solve the problem.