I am very new to HTML and CSS and want to move my logo further up the page instead of it being further down towards the centre.
<body>
<img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
</body>
</html>
#derrick-ogole-logo{
display:block;
margin-left:auto;
margin-right:auto;
width:60%;
height:60%;
}
How can I move my logo further up so I can add a navigation bar etc.
One of the ways is simply using margin-top: and desired percentage. You can use here pixels if you want. You already positioned it vertically by margin-left and right, you can do the same with top and bottom for horizontal position.
I recommend you reading this, everything you need is here, start with basic positioning. w3schools.com/w3css Also: Examples and How To. I learned a lot there at start.
#derrick-ogole-logo{
display:block;
margin-left:auto;
margin-right:auto;
margin-top:20%;
width:60%;
height:60%;
}
<body>
<img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
</body>
</html>
You could also set the absolute positions (top/left), then transform based on the image size (kinda based off of this)
<html>
<head>
<style>
#derrick-ogole-logo {
position: absolute;
top: 0%;
left: 50%;
transform: translate(-50%, 0%);
width:60%;
height:60%;
}
</style>
</head>
<body>
<img id="derrick-ogole-logo" src="https://derrickogole.com/wp-content/uploads/2019/08/cropped-32248_-DERRICK-OGOLE-Logo_-MJ_01.png" alt="Derrick Ogole Official Logo">
</body>
</html>
Simple, set the top margin to a desired value. To do this you can use the shorthand margin property:
img {
display: block;
margin: 20px auto;
width: 400px;
height: 200px;
}
<img src="https://via.placeholder.com/400x200" alt="placeholder">
This will set the top and bottom margin, and the side margins will be automatically calculated for you (which will effectively center the image).
Related
I'm trying the achieve the following setup for a page, where there is a left and right div and a 'floating' image in the center above the two divs:
I've tried giving the img1 a z-index and a position: relative (or position: absolute for that matter) but that didn't help achieve my goal. Any takes on how to float an image above these two divs, centered?
I'm using the following pieces of code currently:
CSS http://pastebin.com/4uLHwkXt
HTML http://pastebin.com/t6yCTR0r
Assign position: relative; to DIV1 and the following settings to .IMG1. .IMG1 has to be inside DIV1 (i.e. be a child of DIV1) for this to work.
.IMG1 {
position:absolute;
right: 0;
top: 30px; /* adjust as needed */
transform: translateX(+50%);
}
addition: You hadn't posted your code before, so I just described the basic necessary settings with the element names from your graphic description, but that should be clear enogh.
Try this code: You can adjust the div widths and margins according to your requirement. This code also adjust according to the desktop screen.
Thanks
CSS:
.floatedDiv{
float:left;
width:50%;
background:grey;
height:50px;
}
.imgDiv {
width: 20px;
height: 20px;
position: absolute;
background: green;
left: 50%;
margin-left: -10px; /*half of the length of the div*/
top:15px;
}
.red{
background:red;
}
HTML:
<body style='margin:0px;'>
<div class='floatedDiv red'></div>
<div class='floatedDiv'></div>
<div class='imgDiv'></div>
</body>
In my case I position:absolute the image and add position:relative to the parent div.
HTML (with bootstrap)
.col-6{ height:500px; }
img{
margin-left:33%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" style="position:relative;">
<div class="col-6 bg-success"></div>
<div class="col-6 bg-warning"></div>
<img src="https://picsum.photos/200/150?grayscale" style="position:absolute;">
</div>
I am trying to take one image, place it on the screen as a background, and then put a company logo on top of it so it all looks like one image. I have looked at other people's examples, and those give me the background where I want it, but the company logo that I want on top of the background is displayed beside the background instead of on top. Nothing I try seems to be working. Can someone please help?
HTML:
<div id="Background">
<img src="images/background/background.png">
</div>
CSS:
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
Here's how I'd do it. You'll need to give the surrounding div the dimentions of the background image:
HTML
<div class="background">
<img class="logo" src="http://placehold.it/150x75/FF0000/FFF&text=Logo" alt="Company Name" />
</div>
CSS
.background
{
position:relative; /*Any child elements can now be positioned relative to this element*/
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px; /*Width of background image*/
height:150px; /*Height of background image*/
}
Example: http://jsfiddle.net/8RC7U/
There are many different ways you can then position the logo:
Margins
.logo
{
margin-top: 10px;
margin-left: 10px;
}
http://jsfiddle.net/8RC7U/1/
Absolute Positioning
.logo
{
position:absolute;
top: 15px;
right:30px;
}
http://jsfiddle.net/8RC7U/2/
and that's just for starters.
On a final note the following may be more accesible for screen readers and better for SEO:
HTML - Include the company name as text
<div class="background">
<h2 class="logo">Company Name</h2>
</div>
CSS - Shift the text off screen and use background image again
.background
{
position:relative;
background-image:url(http://placehold.it/750x150&text=background);
background-repeat:no-repeat;
width:700px;
height:150px;
}
.logo
{
text-indent:-9999px; /*Shift the text off screen*/
width:150px; /*Width Of logo*/
height:75px; /*Height of logo*/
background-image:url(http://placehold.it/150x75/FF0000/FFF&text=Logo);
margin: 10px 0 0 10px; /*Positioning top right bottom left*/
display:inline-block; /*Set to inline block so margins apply inside parent*/
}
Example: http://jsfiddle.net/8RC7U/3/
Use the "background-image" CSS attribute on a block-level element (, etc.) for the background PNG, then place the PNG buttons inside that block element.
You can try Like this:
CSS
<style type="text/css">
div#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
</style>
HTML
<div id="Background">
<img src="images/background/background.png" />
</div>
If you have doubt let me know..
One of the simple solution is use
z-index
make your logo's Z-index graterThan background Z-index e.g()
#background
{
z-index:9
}
#logo
{
z-index:99
}
This would help you accomplished what you want.
Hope that helps
FIDDLE
HTML
<div>
<img src="http://placehold.it/350x150" class="img1">
<img src="http://placehold.it/150x100" class="img2">
<div>
CSS
div {
position:relative;
}
.img1 {
position:absolute;
z-index:1;
top:0; left:0;
}
.img2 {
position:absolute;
z-index:2;
top:24px; left:100px;
border: solid 2px;
}
if you want to use only two images the best way to do it
have the div with the background, then load a image in side the div.
<div id="Background">
<img src="images/background/background.png">
</div>
#Background
{
background-image:url('images/background/background.png')
background-repeat:no-repeat;
}
I have a markup that looks like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" />
<div class="YellowExclaimIcon iconsBlack"></div>
</div>
What I want to achieve is below:
Meaning that the image should always be placed center (Both horizontal and vertical) in the parent div and the warning icon should on top of the image with a margin of 5 to the right and to the bottom.
Another thing to note is that, the image width and height is not always the same, but the position for the warning icon should always be the correct place.
The YellowExclaimIcon class contains a background image, but can be altered to a image if need be. Something to consider is the image also has a max-width and max-height.
I tried with the answer in this thread CSS Help - div over image but I could't get it to work with the centering.
if the image width & height are variable, you can only achieve this if you change the markup, something like this:
<style type="text/css">
div.container {
width:150px; height:250px; display:table-cell; vertical-align:middle;
text-align:center; background-color:#ededed}
div.image {
position:relative; display:inline-block; }
div.image img {
display:block; }
div.YellowExclaimIcon {
position:absolute; width:80px; height:80px; bottom:5px; right:5px;
background:transparent url(your-icon.png) no-repeat 100% 100%}
</style>
<div class="container">
<div class="image">
<img src="Image.jpg" alt="" />
<div class="YellowExclaimIcon"></div>
</div>
</div>
The sample above will always horizontally & vertically align the image in the center, with an icon in the bottom right corner, 5px margin.
Check a working sample: http://jsfiddle.net/Q9uhV/
Use position:relative to outer div and absolute to inner div
HTML
<div class="outer">
<div class="YellowExclaimIcon"></div>
</div>
CSS
.outer{
width: 150px; height: 250px;
border:solid red 1px;
position:relative;
vertical-align:middle;
background:url(http://icons.iconarchive.com/icons/everaldo/kids-icons/128/penguin-icon.png) no-repeat center center;
}
.outer img{text-align:center; vertical-align:middle}
.YellowExclaimIcon{
position:absolute;
width:100%;
height:100%;
top:0; left:0; background:url(http://da.countyofventura.org/images/buttons/images/warning-icon.gif) no-repeat center 95%;
}
DEMO
You need to use z-index and some positioning like this:
<div style="width: 150px; height: 250px;">
<img src="Image1.jpg" style="z-index:-1" />
<div class="YellowExclaimIcon iconsBlack" style="z-index:1; margin-left:10px; margin-bottom:10px"></div>
</div>
..for example, set your margins to what you need.
Make your warning image absolute so you can position it over the other image at a specified location.
HTML:
<div class="container">
<img src="penguin.png" />
<img class="warning" src="warning.png" />
</div>
CSS:
.warning {
position:absolute;
left:80px;
top:80px
}
See this jsFiddle for a demo.
I want to put an HTML element in the middle of the page, horizontally and vertically, but I'm having a hard time making it align even horizontally. I want to center the div "content". Here is my css:
#background
{
position:absolute;
width:100%;
height:100%;
margin:0px;
padding:0px;
left:0px;
right:0px;
z-index:1;
text-align: center;
}
#content
{
margin-left: auto;
margin-right: auto;
width: 200px;
z-index: 2;
position: absolute;
}
And here is my HTML:
<html>
<head>
<link REL="STYLESHEET" TYPE="text/css" HREF="style/myStyle.css">
</head>
<body style="padding:0px; margin:0px; overflow:hidden;">
<div id="background"><img src="images/backgroundimage.png" width="100%" height="100%">
</div>
<div id="content">
<p>Here is some content</p>
</div>
</body>
</html>
Since the div has to be positioned as absolute, doing this:
margin: 0 auto;
Won't work. I'm not sure what to do. Also, I want it in the center of the page vertically. Help is appreciated, thanks.
Edit: I need the background to be in a separate div so that it's re-sizable, and the content doesn't show if the position is relative.
<html>
<body>
<div id="background">
<div id="content">
<p>Here is some content</p>
</div>
</div>
</body>
</html>
A better structure for put contents on the middle,without use JQuery:
#background{
background: url(images/backgroundimage.png) top no-repeat;
width:100%;
height:100%;
position:relative;
}
#content{
position:absolute;
top:50%;
left:50%;
width :200px;
height:200px;
margin-left:-100px;
margin-top:-100px;
}
If you are using the div id background for a background image you can style the div using css, more info at the w3schools site.
Ideally i would use a background image for the body tag rather than creating a new div with an image.
For centring content try and play around from my example.
Matt
Try to make the padding a higher number, padding is how many pixels in between the side of the screen and the text/table/picture/object. So padding should be like, say 20-40. Also, try deleting position absolute; it makes the text/table/picture/object always on the left instead of the middle.
I am working on an assignment that is giving me grief. I am supposed to make a red box that matches the color of an image. This box is supposed to be centered on the page. The box is supposed to be 80% of the page. The image is supposed to be inside the box. The image is supposed to be 80% width of the BOX it sits in. The image is to be centered vertically. I am trying to do this using CSS. Here is my code. What am I missing?
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="box">
<ul>
<li>
<a href="http://blackhawks.nhl.com/">
<img src="http://www.wallpaperpimper.com/wallpaper/Hockey/Chicago_Blackhawks/Chicago-Blackhawks-Blackhawks-Logo-1-JPS6RQXFBC-1024x768.jpg">
</a>
</li>
</ul>
</div>
</body>
</html>
CSS:
.box {
width: 80%;
background-color: #dd111;
margin-left: auto;
margin-right: auto;
}
.box ul {
margin-left:auto;
margin-right:auto;
}
.box ul li {
width: 80%;
vertical-align: middle;
}
If the list isn't necessary you could do this. If you want to use a list you need to set the ul padding and margin to 0.
<style type="text/css">
.box {
width:80%;
margin:0 auto 0 auto;
}
img {
width:80%;
margin:0 auto 0 auto;
display:block;
}
.box-stripe {
width:80%;
height:15px;
margin:0 auto 0 auto;
}
</style>
<body>
<div class="box">
<div class="box-stripe"></div>
<img src="yourimage.png" alt="" />
<div class="box-stripe"></div>
</div>
</body>
Or if you prefer the list you could do something like this. It should get you close anyways.
<style type="text/javascript">
.box {
width:80%;
margin:0 auto 0 auto;
}
.box ul {
width:80%;
margin:0 auto 0 auto;
padding:0px;
display:block; /*may not need to do this but I don't think a UL is a block element */
}
.box ul .box-stripe {
width:100%;
display:block;
height:15px;
padding:0px;
margin:0px;
}
.box ul .img {
width:100%;
display:block;
padding:0px;
margin:0px;
}
</style>
<body>
<div class="box">
<ul>
<li>class="box-stripe"></li>
<li class="img"><img src="yourimage.png" alt="" /></li>
<li class="box-stripe"></li>
</ul>
</div>
</body>
Every browser treats HTML elements differently in terms of padding, margin, line height, ect. This is why I recommend a CSS reset. And most UL's have some padding by default.
I'm not sure if you need the ul and li for some reason, but the main thing you are missing is that the img is not given a width.
If an img does not have a width it will use the native width of the image and stretch its container. In the case of your current html (with the ul) you would need to give the image a width of 100% since the li is already set to 80%.
Try turning on borders (or use Firebug or Chrome developer tools to inspect your elements). With borders on I think it becomes a lot more obvious why things are not positioned as you think they are.
http://jsfiddle.net/2vWY3/1/
This looks like it, although I'm not sure if the box needs to be 80 or 100% of the height of the page.
http://jsfiddle.net/GolezTrol/ZLUGg/2/
I changed the box color and the image size for testing/demonstration. Makes it easier to develop too.