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>
Related
I put a div around each button and I set them both to inline. They just want to stack as I keep trying to center them.
This is my HTML:
body{
background-color:black;
}
#light{
margin-left:50%;
margin-right:70%;
}
#dark{
margin-left:50%;
margin-right:50%;
display:inline-block;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
margin-left:500px;
}
<!DOCTYPE html>
<html>
<head>
<title>question reality.</title>
<link rel="stylesheet" type="text/css" href="intro page.css">
</head>
<body>
<h3>make your choice.</h3>
<div id="light"><button>Light</button></div>
<div id="dark"><button>Dark</button></div>
</body>
</html>
This is a screencap of what this thing is doing:
You forgot to set the #light div to inline-block. But probably a better way to do it is just to surround both buttons in a div and give that some css of text-align:center like so:
body{
background:black;
}
h3{
text-align:center;
color:white;
font-family:Courier New;
font-size:24px;
}
.text-center{
text-align:center;
}
<h3>Make Your Choice</h3>
<div class="text-center">
<button>Light</button>
<button>Dark</button>
</div>
Try this
CSS
body{
background-color:black;
}
#light,#dark,h3{
text-align:center;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
}
use text-align:center property instead of margins on left and right
Hope this helps...
Hope this would help:
body{
background-color:black;
}
#light{
position: absolute;
top: 45%;
left: 50%;
}
#dark{
position: absolute;
top: 55%;
left: 50%;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>question reality.</title>
<link rel="stylesheet" type="text/css" href="intro page.css">
</head>
<body>
<h3>make your choice.</h3>
<div id="light"><button>Light</button></div>
<div id="dark"><button>Dark</button></div>
</body>
</html>
You can try two things
Use following styling and remove unnecessary margin-right
button {
margin-top : __px;
}
Use position relative
button {
position: relative;
top:20%;
}
This will solve your problem
OR you can also try first answer at Vertically centering button using css
Let me know if you require any further help
Place your buttons in a main container div, 100% width, and change the margins of the buttons to auto. The parent div must be 100% width and the children, will center align if their margin is set to auto.
https://codepen.io/DannaB67/pen/KqRoJK
body{
background-color:black;
}
.main{
width:100%;}
#light{
margin:auto;
display:inline-block;
}
#dark{
margin:auto;
display:inline-block;
}
h3{
color:white;
font-family:Courier New;
font-size:24px;
text-align: center;
}
<body>
<div align="center" class="main">
<h3>make your choice.</h3>
<div id="light"><button>Light</button></div>
<div id="dark"><button>Dark</button></div>
</div>
</body>
The top of my page looks like this (blue bit at the top is the bottom of my bookmarks bar):
I have a wrapper div holding two imgs (left, right) and a div. I want these three things to all hug the top of the page and line up. I thought adding display: inline would do it, but that didn't work. Now I'm stumped.
CSS:
body {
margin:0px;
padding:0px;
}
#main{
display: inline;
}
p {
font-family:"Open Sans",sans-serif;
font-size: 14px;
}
#img1{
float:left;
}
#img2{
float:right;
}
.design-img {
/*border:1px red;*/
display: inline;
top:0px;
}
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> </meta>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/libs/raphael.min.js"></script>
</head>
<body>
<div id='container'>
<img src='go.jpg'/ id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
<img src='go.jpg'/ id='img2' class='design-img'>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
#main {
display: inline-block;
}
This should do the trick.
Look for the differences between inline and inline-block
Put this css may this help you..
#img1{ width:30%; float:left;}
#img2{ width:30%; float:right;}
h1{ margin:0; width:40%;float:left;}
The problem is that you have #img2 after the main div in the source, which means it starts further down than the first image. Floating it to the right won't make it move up on the page!
One solution is to move the <img> up to the top, near the first <img>, so that the main div comes after.
body {
margin: 0px;
padding: 0px;
}
#main {
display: inline;
}
p {
font-family: "Open Sans", sans-serif;
font-size: 14px;
}
#img1 {
float: left;
}
#img2 {
float: right;
}
.design-img {
/*border:1px red;*/
display: inline;
top: 0px;
}
<div id='container'>
<img src='https://placehold.it/150x150' id='img2' class='design-img'>
<img src='https://placehold.it/150x150' id='img1' class='design-img'>
<div id='main'>
<h1>Table of Contents</h1>
<p></p>
</div>
</div>
No changes to the css.
By the way, you have an error in your source: a stray / in the <img> tag. Under some circumstances, this may cause the error correcting routines to think this is the end of the <img> tag. So remove those.
____________________________________________________________
| logo_icon page_Tittle |
------------------------------------------------------------
I want to make a header of my phonegap app like this one. On the left of the header there should be a logo(img) and on center there should be page tittle(text). Now I have already try this one.
<div data-role="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
and the css its css is:
.logo {
vertical-align: left;
}
.tittle{
text-align: center;
display: inline-block;
vertical-align: middle;
}
Kindly help me how it will be work? I am new in css.
<div data-role="header" class="header" >
<div class="logo" > <img src="img/logo.png" /> </div>
<h1 id="tittle">Main Page</h1>
Exit
</div>
the css:
.header{display:inline-block;
padding:5px 15px;
text-align:center;
width:100%;
}
.logo{float:left;}
.header h1 {font-size:15px;
width:80%;
text-align:center;}
basically, by adding the text align property of the header div as center, and setting the float property of the logo element to left, should solve your problem
check out the js fiddle link :)
http://jsfiddle.net/Q2Hkj/
This should work for you:
.logo {
float:left;
}
.tittle{
text-align: center;
width:75%; margin:0 auto;
vertical-align: middle;
}
I recommend you to do that with max number of % size and position in your css and use a JavaScript function for center the elements depending of the window size.
Anyway I created a fiddle example for you, take a look and some ideas.
HTML:
<div id="top_bar">
<img id="logo_top_bar" src="../img/logo_top_bar.png">
<section id="title">App title</section>
</div>
CSS:
html,body{
position: relative;
padding: 0px;
margin: 0px;
width: 100%;
max-width: 100%;
height: 100%;
max-width: 100%;
overflow:hidden;
}
#top_bar{
position:relative;
float:left;
height: 60px;
width:100%;
left:0;
top:0;
overflow:hidden;
background-color:rgb(46, 42, 42);
}
#logo_top_bar{
position:absolute;
height:30px;
width:70px;
left:4%;
top:15px;
}
#title{
position:absolute;
left:45%;
top:16px;
font-size: 1.5em;
color:white;
}
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>