I am new to CSS but have a relatively simple goal. My objective is to format a webpage to display a series of maps with text in between. In the end, the layout will be as follows with the page scrollable:
text
map
text
map
text
map
Both text and maps should be centered. In order to place the maps in the center of the page, I attach each map to the map-container but I am not sure that this is the right method. The following markdown overlaps the maps, and does not allow one to scroll down the page.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.js'></script>
<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.38.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map {
position:absolute;
top:50%; bottom:0;
width:100%;
height:50%;
overflow: auto;}
#map2 {
position:fixed;
top:75%;
bottom:0;
width:100%;
height:50%;
overflow: auto;}
#map-container {
overflow: scroll;
position: absolute;
height: 500px;
width: 500px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transform: -webkit-translate(-50%, -50%);
transform: -moz-translate(-50%, -50%);
transform: -ms-translate(-50%, -50%);
}
</style>
</head>
<body>
<style>
button {
position: fixed;
margin: 5px;
right: 0px;
z-index: 1010101010
}
#pause::after {
content: 'Pause';
}
#pause.pause::after {
content: 'Play';
}
</style>
<div id='map-container'><div style="position:absolute; color:#282828; font-family:Arial; font-weight:200;"><br><b>TEST </b></br>
</div>
<div id='map'>
<button id='pause'></button>
</div>
<div id='map2'></div>
</div>
<script src="script.js"></script>
</body>
</html>
Both maps are children of the same parent element. I have tried changing the position parameter, changing top/bottom although nothing works - either one map covers the other or they overlap. What am I doing wrong ? Any suggestions or basic template on how to put maps in between text would be very helpful.
You can achieve this via flexbox. No need for additional containers. Demo:
body {
/* Make body a flex-container */
display: flex;
/* Specify direction where all items will */
flex-direction: column;
/* Center all items in this direction */
align-items: center;
}
Look how many maps we've got!
<img src="https://i.stack.imgur.com/YoxkJ.jpg" />
Some text
<img src="https://i.stack.imgur.com/70PBD.jpg" />
This is also text
<img src="https://i.stack.imgur.com/C8Kaj.jpg" />
Maps are awesome
Use this code and all of your content is in the center
<style>
body { margin:0; padding:0; }
#map {
width:100%;
height:50%;
overflow: auto;}
#map2 {
width:100%;
height:50%;
overflow: auto;}
.text{
color:#282828; font-family:Arial; font-weight:200;
}
#map-container{
text-align: center;
}
<body>
<div id='map-container'>
<div class="text">TEXT</div>
<div id='map'></div>
<div class="text">TEXT</div>
<div id='map2'></div>
<div class="text">TEXT</div>
</div>
<script src="script.js"></script>
</body>
Related
I am trying to create a responsive header that has two adjacent background images, split diagonally.
The placement of the angle should be adjustable like so:
Most of the ways that this can be done result in the background image becoming skewed, using transparent borders that are not responsive or using clip-path, which unfortunately lacks browser support for ie.
.one,
.two {
flex: 1 1 auto;
}
.spotlight {
height:350px;
overflow:hidden;
}
.one, .two {
background: url(https://via.placeholder.com/150);
transform: skewX(-20deg)
}
.one {
}
.two {
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex spotlight">
<div class="one">a</div>
<div class="two">a</div>
</div>
codepen
Are there any other alternative ways of going about this?
body {
overflow:hidden;
}
.view {
bottom:0;
left:0;
position:absolute;
right:0;
top:0;
-ms-transform:skew(-5deg);
-o-transform:skew(-5deg);
-moz-transform:skew(-5deg);
-webkit-transform:skew(-5deg);
transform:skew(-5deg);
}
.left,
.right {
bottom:0;
overflow:hidden;
position:absolute;
top:0;
}
.left {
left:-5%;
right:50%;
}
.right {
left:50%;
right:-5%;
}
.img {
bottom:-5%;
left:-5%;
position:absolute;
right:-5%;
top:-5%;
-ms-transform:skew(5deg);
-o-transform:skew(5deg);
-moz-transform:skew(5deg);
-webkit-transform:skew(5deg);
transform:skew(5deg);
}
.left-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
background-position:center center;
background-size:cover;
}
.right-img {
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
background-position:center center;
background-size:cover;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="view">
<div class="left">
<div class="img left-img"></div>
</div>
<div class="right">
<div class="img right-img"></div>
</div>
</div>
</body>
</html>
Adjust position as you want on .right and .left class
I've seen there are a couple questions similar to this one but none of them seem to solve my problem.
I want a very simple design:
Two or more divs stacked on top of each other, each of them docked to the right. I'm practicing for a test on which using the float property is not allowed.
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Now, when I only had one div (header), this worked, it was docked right. But when I add the 'cen' div it is also docked right but, instead of going underneath the 'header' div, it just goes over it.
Any ideas how to fix this?
Thanks.
Absolute elements won't behave in a decent manner they won't bother any blocks in their ways.
Since the element header has a height you can add the cen element under it by giving top:"whatever the height the header is"
Here the height of the header is 225px
Stack the cen in a position of top: 255px so it will be below the header.
Try this...
*{box-sizing:border-box;}
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
top:0;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
top:225px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Statically positioned block elements (divs) will stack like you describe by default. So there is no need for absolute positioning.
Also, there is no need to set a width because:
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
body {
width: 900px;
margin-left: auto;
margin-right: 0;
}
#header {
height: 225px;
border: 1px solid black;
}
#cen {
height: 240px;
border: 1px solid orange;
}
<div id="header">
</div>
<div id="cen">
</div>
You can use flexbox for something like this:
.container {
width:100vw;
display:flex;
justify-content: flex-end;
}
.column {
display: flex;
flex-direction:column;
flex-basis:33%;
}
.row {
display: flex;
background-color: red;
width: 100%;
flex-grow: 1;
height: 100px; /* can be whatever you like */
margin: .25rem;
}
<div class="container">
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
CSS Grid would probable work even better, but I haven't worked with it enough.
I am beginner in this field.I want the logo(image used) to appear on the strip itself but when I use this code it appears below that strip.Basically, I want a strip with background colour black and a heading/title in the centre with a logo at the rightmost corner of that coloured strip.
Here's my code:-
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width=100%;
text-align: cente
border-bottom:solid 2px red;
}
#Shift{
margin-top:10px;
font-size:100px;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img src="logo.jpg" align="right" height="75">
</div>
</body>
</html>
Are you looking for something like this? I corrected a few mistakes in your CSS code, added position: relative; to your class .topbar and created a new class .logo which I added to the <img>-Tag.
Also, keep in mind the comment from ThisGuyHasTwoThumbs, you shouldn't use inline CSS
For further reading on relative/absolute positioning, I recommend the MDN articles: https://developer.mozilla.org/en-US/docs/Web/CSS/position
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width: 100%;
text-align: center;
border-bottom:solid 2px red;
/* Position the element relative */
position: relative;
}
#Shift{
margin-top:10px;
font-size:100px;
}
.logo {
/* Absolute position for this element */
position: absolute;
/* Distance from the right side */
right: 0;
/* Center image vertically */
top: 50%;
transform: translateY(-50%);
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<p align="center" style="font-size:100px">MIT Pulse</p>
<img class="logo" src="http://via.placeholder.com/75x75" align="right" height="75">
</div>
</body>
</html>
The logo is appearing below the title because <p> is a block-level element -- that is, it will force the next element to appear on the next line.
By making the title a span with inline-block display you can achieve something like this snippet. (As with other replies I've fixed some typos and removed unused CSS. Also, I second the comment regarding inline CSS.)
EDIT: more on layouts & block vs. inline at this MDN tutorial
<html>
<head>
<title>MIT PULSE-Home</title>
<style>
.topbar{
color:white;
background-color:black;
height:125px;
width:100%;
text-align: center;
border-bottom:solid 2px red;
}
.right {
float: right;
}
.title {
font-size: 100px;
display:inline-block;
margin: 0 auto;
}
body{
margin:0;
padding:0;
}
</style>
</head>
<body>
<div class="topbar">
<span class="title">MIT Pulse</span>
<img src="logo.jpg" class="right" height="75" >
</div>
</body>
</html>
I am trying to find a way to center the logo + text. The image+text should be center vertically and horizontally.
I tried couple of things and now i have this html
<html>
<head>
<title>XXX</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
margin:50px 0px; padding:0px; /* Need to set body margin and padding to get consistency between browsers. */
text-align:center; /* Hack for IE5/Win */
}
#floater {float:left; height:50%; margin-bottom:-120px;}
#Content {
clear:both;
width:500px;
margin:0px auto; /* Right and left margin widths set to "auto" */
text-align:center; /* Counteract to IE5/Win Hack */
padding:15px;
height:240px;
position:relative;
}
#text-center{
text-align:center;
font-family:Tahoma, Geneva, sans-serif
}
</style>
</head>
<body>
<div id="Content">
<img src="logo_small.jpg" width="400" height="143">
<p id="text-center">Coming soon</p>
<p id="text-center">more text</a></p>
</div>
</body>
</html>
I don't know anything related to html/css
Here's what I came up with: http://jsfiddle.net/CMfEH/
I used a variant of what's descriped in Vertically Centering in CSS.
Vertically aligning content is typically a bad practice but can be achieved using
EDIT: had to switch up some css...
#Content {
margin: 0px auto;
...
height: 100%;
}
#subContent {
position: absolute;
top: 50%;
height:240px;
margin-top: -120px;
}
And creating a <div id="subContent"> div inside your Content parent div.
I have a image centered on the screen. I need to display some text above the image and I want to set the text coordinates relative to image.
If a user have a different resolution:
The image always located on the top and center of the browser.
The text will be on the same position in the image.
I have tried:
<style type="text/css">
#l1 {
position: relative;
left: 20px;
top: 30px;
color: #03C;
}
</style>
<div align="center">
<div id="l1" align="left">
some
</div>
<img src="some.jpg" width="1024" height="788" />
</div>
But it doesn't work. How can I achieve my goal?
Set the text to be position:absolute and the containing div to be position:relative
And also center the div using margins and not the deprecated align attribute..
<style type="text/css">
.container{
position:relative;
margin-left:auto;
margin-right:auto;
width:1024px;}
#l1 {
position: absolute;
left: 20px;
top: 30px;
color: #03C;
text-align:left;
}
</style>
<div class="container">
<div id="l1">
some
</div>
<img src="some.jpg" width="1024" height="788" />
</div>
I would do it like this:
<!doctype html>
<html>
<head>
<title></title>
<style type="text/css">
/*reset default margins, paddings, set body font*/
html,body,h1,h2,h3,h4,h5,p,ul,li,form,button { margin:0; padding:0 }
body { font:normal 62.5% tahoma }
#my-image {
width:1024px; height:788px;
background:url(some.jpg); /* use image as background */
margin:0 auto; /* this centers the div in the browser horizontally */
position:relative; /* set positioning context for children */
}
#my-text {
position:absolute;
left:0px; top:0px; /* left and top are with respect to the parent div */
}
</style>
</head>
<body>
<div id="my-image">
<div id="my-text">some text</div>
</div>
</body>
</html>