I am very new to HTML and CSS.
I am trying to centre a banner at the top of the screen.
I have tried setting the margin left and right to auto, however when I try that, or text-align: center, nothing happens and I'm not sure why...
I placed the banner within a div.
<div class="bruceBanner">
<a href="http://www.example.com">
<img border="0" alt="XYZ Banner" src="http://www.fablevision.com/northstar/make/objects/banner3.gif" width="553" height="172">
</a>
</div>
And referenced its class like so.
.bruceBanner {
margin-left: auto;
margin-right: auto;
}
The full html is below, in case of any mistakes I am unaware of.
<DOCTYPE HTML>
<html>
<head>
<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<title>XYZ Products</title>
<meta charset="utf-8"/>
</head>
<body>
<div class="bruceBanner">
<a href="http://www.example.com">
<img border="0" alt="XYZ Banner" src="http://bit.ly/1QSpdbq" width="553" height="172">
</a>
</div>
</body>
</html>
.bruceBanner is a div element.
div elements by default are block-level elements, meaning they take up 100% width.
You need to set a width smaller than 100% or change it's display to an inline-block.
.bruceBanner {
margin: 0 auto;
width: 50%;
}
You forgot a .:
.bruceBanner {
^---
. in CSS is for a class. without the dot, you're trying to style an unknown/illegal html tag <bruceBanner>
From w3schools.com
.bruceBanner {
margin: auto;
}
Related
When the webpage become too small some part of it disappear but I would like to make it stay the way it's positioned but resize with the page no matter how small it becomes.
Here's the problem
Here's the code
<!DOCTYPE html>
<html>
<style>
body{
background-color: #1C1C1C;
}
#picture {
text-align: center;
position:fixed;
padding:0;
margin:0;
top:0;
left:0;
width: 100%;
height: 100%;
}
</style>
<title>lllllllllll</title>
<body>
<div id="picture">
<img src="c.png" alt="llllll" width="33%" height="100%" />
<img src="n.png" alt="llllll" width="33%" height="100%" />
<img src="m.png" alt="llllll" width="33%" height="100%" />
</div>
</body>
Welcome to Stack Overflow!
First and foremost, Your basic HTML structure should be as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- CONTENT -->
</body>
</html>
And about Your main problem, try and use CSS to style your layout instead of assigning inline properties like width="33%" and others alike. Right now, your images are stretching because of the inlined properties which are not the same as a style applied to them.
By using these properties on your images, you are telling them to be 33% of their container, but images are not block elments so therefore, they need to be in a container, for example a div.
e.g.
<div class="imageContainer">
<img src="img.jpg" alt=""/>
</div>
I have made a JS Fiddle for you to try it yourself.
When someone here on StackOverflow says "here is a Fiddle" or something similar, what they mean is, they have created a small online coding environment that acts as a sandbox for your project. You have your HTMl, CSS, Javascript and Output, alongside options for adding external content as well. https://jsfiddle.net/
I have changed a few things here and there to show you an example of basic usage. Please feel free to ask what You dont understand.
<!doctype html>
<html>
<head>
<title>Satya</title>
<meta charset="utf-8"/>
</head>
<body margin="0">
<div class="topheader">
<div class="banner">
<img src="../img/header2.png" alt="header banner" width="100%" height="15%"/>
</div>
</div>
</body>
</html>
Where is my fault that i am not getting the banner at 15% of the page. I also have tried an external style sheet but that's also not working. if i remove doctype declaration from code than its absolutely working.
help me getting it right.
`
<img src="../img/header2.png" alt="header banner" style="width: 100%, height: 15%" />
width and height attributes support only pixel size, not percentage
You can either change your html to this
<img src="../img/header2.png" alt="header banner" width="100%" style="height: 15vh"/>
Or if you want to use % units, add this CSS in a separate stylesheet.
body, html, .banner, .topheader {
height: 100%;
}
vh units, in the first example, set the heigh to 15% of the screen height. Using 15% as a unit, will set it to 15% of the parent container, but your image parent does not have a fixed height, so CSS does not know how to compute this. By giving the parents of the element a fixed height this allows the image to take a percentage height.
If it were me, I would just use a separate stylesheet and add this:
.topheader img {
height: 15vh;
}
fiddle: https://jsfiddle.net/9Lcn0wf4/
i was going through this tutorial, to allign two images inside a dive vertically so that there is no space between them, please take a look
http://mynag.kopiblog.com/2012/11/28/solved-remove-space-below-an-image-in-div-when-vertically-align/
i wrote my code like this
<head>
<style type=”text/css”>
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class=”imgclass”>
<img src=”pictop.jpg”>
</div>
<div>
<img src=”picbottom.jpg”>
</div>
</body>
</html>
but it didnt workrd as shown in the second pic shown in the link i specified.
What am i doing wrong here.
i want them as two pics alined vertically without any space.
please help
Please replace your quotes with the right ones, “ is not ".
The code is missing doctype and opening html-tag.
Try this:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.imgclass
{
background-color:#1122CC;
text-align:center;
}
img
{
display:block;
}
</style>
</head>
<body>
<div class="imgclass">
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
<div>
<img src="http://image.tutorvista.com/cms/images/38/square1.jpg">
</div>
</body>
</html>
Your result should look like this:
http://pbrd.co/1qt52ku
Tested in Chrome. Other browser may need fixes via line-height, margin, and padding.
I'm using the following code in body section.
<center>Get Started</center>
Is there any alternative for <center> tag?
How can I make it center without using <center> tag?
Add text-align:center;display:block; to the css class. Better than setting a style on the controls themselves. If you want to change it you do so in one place.
You can do this:
<div style="text-align: center">
Get Started
</div>
You can use css like below;
Get Started
You can put in in a paragraph
<p style="text-align:center;">Get Started</p>
To align a div in the center, you have to do 2 things:
- Make the div a fixed width
- Set the left and right margin properties variable
<div class="container">
<div style="width:100px; margin:0 auto;">
<span>a centered div</span>
</div>
</div>
I don't know why but for me text-align:center; only works with:
text-align: grid;
OR
display: inline-grid;
I checked and no one style is overriding.
My structure:
<ul>
<li>
<a>ElementToCenter</a>
</li>
</ul>
You can use the code below:
a {
display: block;
width: 113px;
margin: auto;
}
By setting, in my case, the link to display:block, it is easier
to position the link.
This works the same when you use a <div> tag/class.
You can pick any width you want.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
</head>
<body>
<h4 align="center">
Center
</h4>
</body>
</html>
There's also a handy tag... whatever you put in between, gets centered.
Like so:
<center>
<a href..... whatever>
</center>
you can try this
display inline-block to make it fit width,
margin-left to make it move 50% away from left,
and transform translateX to make it center his position
display: inline-block;
margin-left: 50%;
transform: translateX(-50%);
In your html file:
Get Started
In your css file:
.hpbottom{
text-align: center;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<div>
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
The div expands to 100% as it should but the image does not center itself. Why?
Because your image is an inline-block element. You could change it to a block-level element like this:
<img src="queuedError.jpg" style="margin:auto; width:200px;display:block" />
and it will be centered.
You need to render it as block level;
img {
display: block;
width: auto;
margin: auto;
}
Add style="text-align:center;"
try below code
<html>
<head>
<title>Test</title>
</head>
<body>
<div style="text-align:center;vertical-align:middle;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
</body>
</html>
i know this is an old post, but wanted to share how i solved the same problem.
My image was inheriting a float:left from a parent class. By setting float:none I was able to make margin:0 auto and display: block work properly. Hope it may help someone in the future.
I've found that I must define a specific width for the object or nothing else will make it center. A relative width doesn't work.
open div then put
style="width:100% ; margin:0px auto;"
image tag (or) content
close div
<div style="text-align:center;">
<img src="queuedError.jpg" style="margin:auto; width:200px;" />
</div>
I have found...
margin: 0 auto; works for me. But I have also seen it NOT work due to the class being trumped by another specificity that had ... float:left;
so watch for that you may need to add ... float:none; this worked in my case as I was coding a media query.