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>
Related
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 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>
I have an outer element that is a fixed size with a footer immediately below it. Inside the element are two sections; the first should be a fixed height and the second should expand to fill the other element but not overflow it.
Let me show you.
How do I do this? setting height: 100% on the second element causes it to oveflow the outer element and overrun the footer. The only other alternative I see is to se the height explicitly in pixels which seems like it would be a mess.
What's the right way to do this?
Edit: setting overflow-y: hidden will work in this very limited example, but its not actually limiting section.inner2 and will look weird if for example I want to give section.inner2 a border-radius
The simplest solution that I can think of (and I don't think very much) is just using position: absolute;: http://jsfiddle.net/WLZmT/3/.
HTML:
<div id="outer">
<div id="fixed">
Fixed.
</div>
<div id="fluid">
Fluid.
</div>
</div>
CSS:
#outer {
position: relative;
background: rgb(255, 200, 200);
padding: 10px;
height: 400px;
}
#fixed {
height: 100px;
padding: 10px;
background: rgb(200, 255, 200);
}
#fluid {
padding: 10px;
background: rgb(200, 200, 255);
position: absolute;
top: 100px;
bottom: 10px;
left: 10px;
right: 10px;
}
like this?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
left:50%;
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
head
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
footer
<!-- Footer end -->
</div>
</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.
Trying to implement "sticky" footer but its not working as planned. It throws it at the bottom and on first scroll it works as supposed to (except that it shows an inner-scroll bar). When scrolling back up, the stick footer doesn't disappear right away, it takes a few scrolls then it seems to go back to the "bottom". So my question is how do I keep the footer at the bottom at all times and eliminate the inner scroll bar. I am wondering if my absolute positioning is problematic on the main-content-inner. That div is expandable in height.
Here is the code:
<div id="page-wrap">
<div id="main-content>
<div id="main-content-inner></div>
</div>
<div class="footerpush"></div>
</div>
<div id="footer">copyright info</div>
#page-wrap {
width:100%;
min-height:100%;
height:auto;
height:100%;
margin-bottom:-20px;
position:relative;
overflow:auto;
}
#main-content {
width: 100%;
height:100%;
margin-left: -295px;
position:relative;
}
#main-content-inner {
left: 560px;
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
position:absolute;
top:100px;
min-width:60%;
max-width:60%;
}
#footer {
text-align: right;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 20px;
color: #A7A9AC;
font-size: 12px;
height:20px;
}
.footerpush
{
height:20px;
}
If I remove overflow auto from page-wrap, the footer actually moves to the bottom of my page-wrap div. So it appears that because of my absolute main-content-inner being absolute, it is expanding outside of my wrapper? If I set a fixed value on the height of page-wrap, the footer moves to the bottom as it should. So this is the real question, how do I keep my footer at the bottom of the page even with expandable content?
Further research shows that when i set overflow to hidden on page wrap, that my absolute content "main-content-inner" gets cut off. How do I get the height of page-wrap expand to the height of main-content-inner, no matter what it is?
As I answered here, you can use http://www.cssstickyfooter.com/:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
height: 100%;
padding: 0;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer {
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
</style>
<!--[if !IE 7]>
<style type="text/css">
#wrap {display:table;height:100%}
</style>
<![endif]-->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="content">
<!-- Main content here -->
</div>
</div>
</div>
<div id="footer">
<!-- Footer content here -->
</div>
</body>
</html>
You can see a working example here: http://jsfiddle.net/dZDUR/
Resize the right-hand "Result" pane to be shorter/taller than the text
to see the scroll bar appear / disappear.
As per the CSS Sticky Footer how-to, you can insert your normal
'column' layout inside the main div.
Try this :
Rewrite your HTML code like this :
<div id="page-wrap">
<div id="main-content">
<div id="main-content-inner">
</div>
</div>
<div class="footerpush"></div>
<div id="footer">copyright info</div>
</div>
And rewrit your CSS file style properties :
html,body
{ height:100%;
padding:0;
margin:0;
}
#page-wrap {
width:100%;
min-height:100%;
position:relative;
overflow:auto;
}
#main-content {
background:#FF0;
padding-bottom:40px;
}
#main-content-inner {
border-radius:8px;
border-style:solid;
border-width:2px;
border-color:#53D8FF;
padding:20px;
padding-bottom:0;
background-color:#000000;
}
#footer {
text-align: right;
color: #A7A9AC;
font-size: 12px;
height:20px;
position:absolute;
bottom:0;
width:100%;
}
.footerpush
{
position:absolute;
bottom:20px;
height:20px;
width:100%;
}