I'm working on a project where I have a picture on top of my website and with a small space under the picture I want to add a text between 2 horizontal lines . I have made the text and the 2 lines but I have trouble positioning it under my image . I have put the text and the 2 lines inside a div element and I try to position it .
My code :
* {box-sizing: border-box}
body{
font-family:Aleo;
}
.background-container{
position:fixed;
top :0px;
left:0px;
height:auto;
width:100%;
margin:0;
}
.background-container > img {
width:100%;
height:350px;
display:block;
}
.inside-pic{
position:absolute;
top: 8px;
left: 16px;
color:white;
font-size:45px;
}
.inside-pic>span{
color:orange;
}
#between{
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
#between:before, #between:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: grey;
}
#between:before {
margin-left: -50%;
text-align: right;
}
<body>
<div class = "background-container">
<img src = "IMAGES/selfhelp.jpg">
<div class = "inside-pic" >Book<span >House</span> </div>
</div>
<br/>
<div id = "title"> <h1 id = "between"> List of self-help books </h1> </div>
<br/><br/>
</body>
How the webpage is actually displayed :
I would appreciate your help with guiding me to position the title with the lines under the image . Thank you in advance
https://jsfiddle.net/g62nx8ya/
remove this
.background-container{
position:fixed;
top :0px;
left:0px;
height:auto;
width:100%;
margin:0;
}
and add margin:0 to the body
body{
font-family:Aleo;
margin: 0;
}
* {box-sizing: border-box}
body{
font-family:Aleo;
}
.background-container{
/*position:fixed;*/
top :0px;
left:0px;
height:auto;
width:100%;
margin:0;
}
.background-container > img {
width:100%;
height:350px;
display:block;
}
.inside-pic{
position:absolute;
top: 8px;
left: 16px;
color:white;
font-size:45px;
}
.inside-pic>span{
color:orange;
}
#between{
position: relative;
font-size: 30px;
z-index: 1;
overflow: hidden;
text-align: center;
}
#between:before, #between:after {
position: absolute;
top: 51%;
overflow: hidden;
width: 50%;
height: 1px;
content: '\a0';
background-color: grey;
}
#between:before {
margin-left: -50%;
text-align: right;
}
<body>
<div class = "background-container">
<img src = "IMAGES/selfhelp.jpg">
<div class = "inside-pic" >Book<span >House</span> </div>
</div>
<br/>
<div id = "title"> <h1 id = "between"> List of self-help books </h1> </div>
<br/><br/>
</body>
Related
I am trying to code a pop-up that triggers when an image is clicked, and it is essentially working but the popup is aligning itself to the image that triggered it. I need to align it to the center of the overall page, I have tried messing with the margins and setting all the div class to align="center" but none of that has helped. This is inside an Elementor widget, which I believe is basically just a CSS flexbox.
<div class="popup">
<img src="image1.png">
</div>
<div class="showcompliant">
<div class="overlay"></div>
<div class="img-showcompliant" align="center">
<div align="right"><span>X</span></div>
<div class="icon">
</div>
<div class="description">
Lorem ipsum dolor amet sit.
</div>
<div class="illustrationcomplaints"></div>
<style>
.illustrationcomplaints {
background-image: url("image2.png");
background-repeat: no-repeat;
width:600px;
height: 100px;
}
</style>
<div align="center">
<div class="dismiss-btn">
</div>
</div>
</div>
</div>
<style>
.popup{
margin: auto;
text-align: center
}
.popup:hover {
position: relative;
top: -5px;
}
.popup img{
width: 390px;
height: 140px;
cursor: pointer
z-index: 75;
}
.showcompliant{
display: none;
z-index: 101;
align-self: center;
margin-left: 50%;
margin-right: 50%;
}
.showcompliant .img-showcompliant{
width:650px;
height:350px;
align-content: center;
background: #F2F2F2;
padding: 20px;
position: relative;
z-index: 100;
}
.img-showcompliant span{
position: absolute;
cursor: pointer;
}
.img-showcompliant img{
top: 0;
left: 0;
}
.description {
padding:25px;
color: #1a1a1a;
}
.overlay {
align-content: center;
}
</style>
<script>
$(function () {
"use strict";
$(".popup img").click(function () {
var $src = $(this).attr("src");
$(".showcompliant").fadeIn();
$(".img-showcompliant img").attr("src", $src);
});
$("span, .overlay").click(function () {
$(".showcompliant").fadeOut();
});
});
</script>
Good day. Try to help you...
As I understand you need to use flexbox and use "flex-direction: column;"
Please see this pretty simple html + css how to use it.
Let me know if it helps you?
html,body{
height:100%;
padding:0;
margin:0;
}
*{
box-sizing:border-box;
}
.box{
width:100px;
height:100px;
background-color:blue;
}
.container{
width:100%;
height:100%;
background-color:#ccc;
flex-direction:column;
display:flex;
justify-content:center;
align-items:center;
}
<div class="container">
<div class="box"></div>
<img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png">
</div>
I built a menu using this method: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push
I need to make it manually resizable by the user.
I added resize: horizontal; to the menu class in CSS, but:
the user can only grab the panel at the very bottom right of the menu, which is very small, it would be better if the mouse could catch and drag the menu border on any place of its vertical right border
the animation to open the menu is now polluting the manual resize, it's like we have to pull very strong on the menu to change its size :) do I have to drop the animation completely if the menu is resizable?
function openMenu() {
document.getElementById("menu").style.width = "500px";
document.getElementById("main").style.marginLeft = "500px";
}
function closeMenu() {
document.getElementById("menu").style.width = "0";
document.getElementById("main").style.marginLeft= "0";
}
openMenu();
body {
margin-top: 0;
}
.header {
position: fixed;
top: 0;
padding: 5px;
background-color: white;
}
.middle {
padding-top: 100px;
}
.menu {
height: calc(100% - 110px);
width: 0;
position: fixed;
z-index: 1;
left: 0;
background-color: #d3d3d3;
overflow-x: hidden;
transition: 0.5s;
padding-top: 10px;
margin-bottom: 30px;
margin-top: 0;
resize: horizontal;
}
#main {
transition: margin-left .5s;
padding: 16px;
}
/* ----- MENU CONTENT ----- */
.closebtn {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.closebtn:hover {
color: black;
}
.menuContent {
padding-left: 10px;
height: 100%;
}
h1 {
font-family: 'Rouge Script', cursive;font-family: 'Princess Sofia', cursive;
font-size: 50px;
margin: 0;
}
h2 {
margin-bottom: 3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
</style>
</head>
<body>
<div class="header">
LOGO IMAGE
</div>
<div class="middle">
<div id="menu" class="menu">
<div class="menuContent">
<h1>Title h1</h1>
×
<h2>Title h2 - 1</h2>
<p>Hello</p>
<h2>Title h2 - 2</h2>
<p>Hello</p>
<h2>Title h2 - 3</h2>
<p>Hello</p>
<h2>Title h2 - 4</h2>
<p>Hello</p>
<h2>Title h2 - 5</h2>
<p>Hello</p>
<h2>Title h2 - 6</h2>
<p>Hello</p>
</div>
</div>
<div id="main">
<span style="font-size:30px;cursor:pointer" onclick="openMenu()">☰ menu</span>
<div id="mapBody"></div>
</div>
</div>
</body>
<script>
</script>
</html>
You can add a bit of javascript code and tweak some design of the project to make the bar a bit easy to resize.
code in HTML
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;
}
#sidebar{
background-color: IndianRed;
margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
<div id="sidebar">
<span id="position"></span>
<div id="dragbar"></div>
sidebar
</div>
<div id="main">
main
</div>
code in css for the HTML :
body,html{width:100%;height:100%;padding:0;margin:0;}
#main{
background-color: BurlyWood;
float: right;
position: absolute;
height:200px;
right: 0;
left:200px;
margin-top:10px;
}
#sidebar{
background-color: IndianRed;
margin-top:10px;
width:200px;
float: left;
position: absolute;
height:200px;
overflow-y: hidden;
}
#dragbar{
background-color:black;
height:100%;
float: right;
width: 3px;
cursor: col-resize;
}
#ghostbar{
width:3px;
background-color:#000;
opacity:0.5;
position:absolute;
cursor: col-resize;
z-index:999}
Javascript :
var i = 0;
var dragging = false;
$('#dragbar').mousedown(function(e){
e.preventDefault();
dragging = true;
var main = $('#main');
var ghostbar = $('<div>',
{id:'ghostbar',
css: {
height: main.outerHeight(),
top: main.offset().top,
left: main.offset().left
}
}).appendTo('body');
$(document).mousemove(function(e){
ghostbar.css("left",e.pageX+2);
});
});
$(document).mouseup(function(e){
if (dragging)
{
$('#sidebar').css("width",e.pageX+2);
$('#main').css("left",e.pageX+2);
$('#ghostbar').remove();
$(document).unbind('mousemove');
dragging = false;
}
});
Hope this gives an idea of what you're trying to do.
I have an html page displaying an image.
When the image is larger than the window of the browser, the image is resized (keeping the same ratio) to fit in the window with Firefox.
But with Chrome, the image is compressed
Here is the html code:
<div class="container">
<div class="auto">
<img class="full-width" src="http://laurent.delrocq.free.fr/test/img-1.jpg" />
<div class="absolute">
<img src="http://laurent.delrocq.free.fr/test/left.png" alt="#" class="left">
<img src="http://laurent.delrocq.free.fr/test/right.png" alt="#" class="right">
</div>
</div>
</div>
and the css:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
text-align: center;
}
.auto {
width:auto;
height:auto;
position:relative;
display:inline-block;
}
.absolute {
position:absolute;
top:0;
left:0;
height:100%;
width:100%;
z-index:2;
}
.left {
position:absolute;
top:50%;
left:15px;
transform: translateY(-50%);
}
.right {
position:absolute;
top:50%;
right:15px;
transform: translateY(-50%);
}
.full-width {
width:auto;
max-width:100%;
max-height: 100vh;
height:100%;
}
How can I change the code so that it works (resize) both on Firefox and Chrome ?
Mate, here is solution you search for:
https://jsfiddle.net/d5z3fnjh/1/
Check '.container', '.auto' and '.full-width' width and height values:
.full-width {
width:100%;
}
.container {
text-align: center;
width: 100vw;
}
.auto {
width:100%;
position:relative;
display:inline-block;
}
UPD:
Here is a solution with JS:
https://jsfiddle.net/d5z3fnjh/4/
I finally used js to set the correct size of the div according to the size of the image.
html:
<div class='fill-screen'>
<img id="photo" class='make-it-fit' src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
<div id="over_image">
<div class="left">
<a href="https://en.wikipedia.org/wiki/Arrow_(symbol)#/media/File:U%2B2190.svg" style="outline:0">
<img src="http://laurent.delrocq.free.fr/test/left.png" alt="#">
</a>
</div>
<div class="right">
<a href="https://en.wikipedia.org/wiki/Arrow_(symbol)#/media/File:U%2B2192.svg">
<img src="http://laurent.delrocq.free.fr/test/right.png" alt="#">
</a>
</div></div>
</div>
css:
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 100%;
max-height: 100%;
}
#over_image {
margin:0px;
padding:0px;
display: inline-block;
text-align: center;
color: #fff;
position: absolute;
height:100%;
background: rgba(0,0,0,.5);
}
.left{
opacity:0;
position:absolute;
width:20%;
height:100%;
}
.left a, .right a{
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
}
.right{
opacity:0;
position:absolute;
margin-left: 80%;
width:20%;
height:100%;
}
.left:hover{
opacity:1;
}
.right:hover{
opacity:1;
}
js:
function resizeDiv()
{
var img = document.getElementById('photo');
var width = img.clientWidth;
var height = img.clientHeight;
var left = img.offsetLeft;
var top = img.offsetTop;
document.getElementById('over_image').style.width= width + 'px';
document.getElementById('over_image').style.height= height + 'px';
document.getElementById('over_image').style.top= top + 'px';
document.getElementById('over_image').style.left= left + 'px';
}
$(document).ready(function() {
resizeDiv();
})
$(window).resize(function() {
resizeDiv();
})
The corresponding jsfiddle is here: https://jsfiddle.net/4kxjt813/
How can I get the caption text on these images to move around when then the browser window is resized? My implementation is jicky and I need a way to keep the text from sliding around when the window is resized.
Codepen
<div class="row">
<div class="col-md-6">
<img src="http://placekitten.com/600/375" class="img-responsive" />
<h2 class="homeImageLink">
<span>Caption Text</span>
</h2>
</div>
<div class="col-md-6">
<img src="http://placekitten.com/600/375" class="img-responsive" />
<h2 class="homeImageLink">
<span>Caption Text</span>
</h2>
</div>
</div>
.homeImageLink {
position: absolute;
top: 110px;
left: 0;
text-align: center;
width: 100%;
}
.homeImageLink span {
color: red;
font-weight: 300;
font-style: italic;
text-transform: uppercase;
letter-spacing: 15px;
pointer-events: none;
}
Just add one class to parent container, make it's position relative.
.img-container {
position:relative;
}
And then make homeImageLink absolute and give top at around 45%..
It will make it vertically centered..
.homeImageLink {
position: absolute;
top: calc(50% - 24px); //24px is font size of H1 I assume
left: 0;
text-align: center;
width: 100%;
}
Demo here : http://codepen.io/anon/pen/bJadE
I came up with another solution, here's a working demo:
http://codepen.io/niente0/pen/jyzdRp
HTML:
<DIV class=wrapper>
<DIV class=divimage></DIV>
<DIV class=divtext>THIS IS A TEST</DIV>
</DIV>
CSS:
HTML,BODY {
max-width:1200px;
}
.wrapper {
position:relative;
width:100%;
max-width:1200px;
height:100%;
min-height:320px
}
.divimage { position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:url(https://thumbs.dreamstime.com/t/empty-red-banner-corners-ropes-textile-white-background-d-illustration-70434974.jpg);
background-repeat:no-repeat;
background-size:100% auto;
}
.divtext {
position:absolute;
top:0;
left:0;
width:100%;
padding-top:13.5%;
text-align:center;
font-weight:bold;
font-size:5vw;
color:white;
font-family:arial;
}
#media (min-width: 1200px) {
.divtext{
font-size:60px;
}
}
So I have this template design that is currently absolutely positioned, but I'm trying to make it centered in any widescreen browser. I've tried making the width auto on the left and right side in my container, but it is still aligned with the left side.
Css
.JosephSettin_png
{
position: absolute;
left:0px;
top:0px;
width:216px;
height:40px;
background: url("JosephSettin.png") no-repeat;
}
.home_png
{
position: absolute;
left:472px;
top:16px;
width:48px;
height:16px;
}
.discography_png
{
position: absolute;
left:528px;
top:16px;
width:80px;
height:24px;
}
.purchase_png
{
position: absolute;
left:608px;
top:16px;
width:88px;
height:24px;
}
.about_png
{
position: absolute;
left:696px;
top:16px;
width:48px;
height:24px;
}
.contact_png
{
position: absolute;
left:744px;
top:16px;
width:56px;
height:24px;
}
.main__pic_png
{
position: absolute;
left:0px;
top:56px;
width:264px;
height:264px;
background: url("main_pic.png") no-repeat;
}
.footer__lines_png
{
position: absolute;
left:0px;
top:512px;
width:800px;
height:24px;
background: url("footer_lines.png") no-repeat;
}
.info__heading_png
{
position: absolute;
left:32px;
top:360px;
width:216px;
height:32px;
background: url("info_heading.png") no-repeat;
}
.info__pic3_png
{
position: absolute;
left:265px;
top:360px;
width:159px;
height:112px;
background: url("info_pic3.png") no-repeat;
}
.info__pic2_png
{
position: absolute;
left:432px;
top:360px;
width:176px;
height:112px;
background: url("info_pic2.png") no-repeat;
}
.info__pic1_png
{
position: absolute;
left:616px;
top:360px;
width:177px;
height:112px;
background: url("info_pic1.png") no-repeat;
}
.info__pane_png
{
position: absolute;
left:0px;
top:345px;
width:800px;
height:144px;
background: url("info_pane.png") no-repeat;
}
body
{
text-align: center;
background-color:maroon;
}
#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
#a {
text-decoration: none;
color:white;
font-weight:bold;
}
.style1 {
font-weight: bold;
color: #FFFFFF;
}
html
<body>
<center>
<div id="wrapper">
<div class="JosephSettin_png"> </div>
<div class="home_png"> Home</div>
<div class="discography_png"> Discography</div>
<div class="purchase_png"><span class="style1">Store</span></div>
<div class="about_png">About</div>
<div class="contact_png"><span class="style1"></span>Contact</div>
<div class="ad_png"> </div>
<div class="main__pic_png"> </div>
<div class="welcome__header_png"> </div>
<div class="welcome__text_png"> </div>
<div class="footer__lines_png"> </div>
<div class="footer__text_png"> </div>
<div class="info__pane_png"></div>
<div class="info__heading_png"> </div>
<div class="info__text_png"> </div>
<div class="info__pic3_png"> </div>
<div class="info__pic2_png"> </div>
<div class="info__pic1_png"> </div>
<div class="info__pic3_png"> </div>
</div>
</center>
</body>
I know the container I create works if all my div classes aren't absolutely positioned. Do I have to change the position or did I make another error?
Add position: relative; to the .wrapper definition.
http://www.w3.org/TR/CSS2/visuren.html#choose-position
An absolutely positioned item must be inside of a relatively positioned item, or it will not display as you intended.
Your main problem is that your wrapper needs to be position:relative; and margin:0 auto; will center the wrapper. also you can get rid of you HTML element its not needed.
CSS:
#wrapper {
position:relative;
width: 800px;
margin:0 auto;
text-align: left;
}
Hope this helps.
I strongly suggest using a CSS framework like "Blueprint CSS". It'll save you a lot of time and helps not just with positioning of elements but comes with a lot of nice features like typography, css reset for multi-browser support, etc.