I'm having trouble with putting a logo in my header.
Looking at https://www.w3schools.com/css/css_float.asp it should be as easy as using the float property. However my logo sits below my header and I can't figure it out. Any help would be appreciated.
<h1>Azure Travel Agency<img src="logo.png" alt="Logo"
style="float:right;width:150px;height:150px;"></h1>
you can also use this method to display logo in header
.logo{
width: 250px;
height: 80px;
text-align: center;
background: #ffffff;
}
</style>
</head>
<body>
<div class="logo">
<img src="logo.png"/>
</div>
you have wrong with your styling! your image is inside a h1 tag! and h1 tag has block display!
use this:
<div style="float: right;">
<h1>
<img src="logo.png" alt="Logo" style="width:150px; height:150px;" />
Azure Travel Agency
</h1>
</div>
if code above doesn't work then please write all of your header code! I'll fix it.
The floating elements must come before the text/elements that is meant to float around them:
<h1>
<img src="logo.png" alt="Logo" style="float:right; width:150px; height:150px;" />
Azure Travel Agency
</h1>
or
<img src="logo.png" alt="Logo" style="float:right; width:150px; height:150px;" />
<h1>
Azure Travel Agency
</h1>
Related
I have put social media icons on the right side of my html, but I can't center my title anymore, how can I fix this?
I've tried text-align: center already, and it doesn't work.
#socialm{
float:right;
}
#socialm ul li{display: inline;}
<header>
<div id="socialm">
<img src="facebook.png" width= "45px" height="45px"/>
<img src="instragram.png" width= "45px" height="45px"/>
<img src="youtube.png" width= "45px" height="45px"/>
</div>
<h1>Photography and visual arts</h1>
</header>
You can't do this without absolutely positioning one of the elements.
Absolute positioning takes the element out of the flow so it ignores the other elements around it.
Here I positioned the 'social' div on the right instead of floating it. As you can see the heading is now centered.
You can also see the downside of positioning..without careful sizing, you get overlap. Media queries can address this.
#socialm {
position: absolute;
right: 0;
}
#socialm ul li {
display: inline;
}
header {
text-align: center;
}
<header>
<div id="socialm">
<a href="https://www.facebook.com" target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
<a href="https://www.instagram.com" target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
<a href="https://www.youtube.com/channel/..." target="_blank">
<img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/96/140.jpg" width="45px" height="45px" />
</a>
</div>
<h1>Photography and visual arts</h1>
</header>
JSFiddle Demo
I'm not sure if this is what you are looking for, but I simply just added text-align:center; to your h1 tag.
Here is the solution:
http://codepen.io/Glenvig/pen/dMeaQm
I've got a website with images tot he left and right in their own divs, one with float:right and one with float:left.
I also have an image that travels across the screen with the marquee tag.
Is there any way to get the marquee between the divs? So basically it would start at the left side of the right images and start to disappear on the right side of the left images.
If you don't get what I'm on about, here's an example page: http://benjiworld.ueuo.com/Example.html and as you can see, the marquee just appears underneath both divs, even when there's enough space for the marqueeing image between the divs.
This is my code for the test site:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:350px">
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<div style="float:right; width:350px" >
<img src="Jaffa.png">
<img src="Jaffa.png">
<img src="Jaffa.png">
</div>
<p style="text-align: center">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Can anybody help? I really don't know how to sort it out, I've tried putting the marquee in a div in the centre but it didn't work either.
you can use position:absolute as I did:
.left,.right,.center{
position:absolute;
top:0;
}
.left,.right{
width:200px;
height:300px;
background-color:orange;
}
.center{
left:200px;
right:200px;
}
.left{
left:0;
}
.right{
right:0;
}
<div class="right">right</div>
<div class="left">left</div>
<div class="center">
<marquee>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Badge_256.png" alt="">
</marquee>
</div>
here is the jsfiddle : http://jsfiddle.net/78pgca5o/
Just give a style as float:left to paragraph tag
Just like below
<p style="text-align: center;float:left">
<marquee><img src="Hobnobs.jpg"></marquee>
</p>
Try this:
<!DOCTYPE html>
<head>
<title>Example</title>
</head>
<body>
<div style="float:left; width:50px">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<div style="float:right; width:50px" >
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
<img src="http://benjiworld.ueuo.com/Jaffa.png">
</div>
<p style="text-align: center; position: absolute; z-index: -1; width: 100%">
<marquee><img src="http://benjiworld.ueuo.com/Hobnobs.jpg"></marquee>
</p>
I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so:
as you can see I managed to do it, this was however only using parts of boilerplate and bad css that broke h5bp's usefulness. I would like to utilize h5bp correctly now and achieve the same thing. I'm just not sure how to do it.
My current attempt looks like this:
The image is not in between the words, even tho the order in the mark up is like so:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
Relevant CSS:
.center { display: table; margin: 0 auto; }
#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4;
}
If anyone could explain why the text is not either side of the image that would be greatly appreciated.
Thank you
Edit:
While the answer below is valid I actually solved this problem by putting the < img > into the < h1 > instead of having them separated, like so:
<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>
With your HTML and just this CSS, the three items will display together on one line:
.center h1 {display: inline;}
Working demo: http://jsfiddle.net/jfriend00/yK7Qy/
FYI, I notice that you're using the same id="title" in multiple places. That won't work for you because a given id can only be present on one object in the page. You probably want to change that to class="title".
It may be easier to just put all the text and image in one <h1> tag like this:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1>
<span class="title">First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span class="title">Second</span>
</h1>
</div>
</header>
</div>
Demo here: http://jsfiddle.net/jfriend00/CHv4k/
Try using display:inline-block; rather than display:inline. I don't have the project in front of me so I'm not sure of this will work.
However, if it does the image will be in the wrong spot. You must simply use vertical-align or margin-top:-##px.
A slightly different approach, using spans, and only one h1 tag:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 class="title">
<span>First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span>Second</span>
</h1>
</div>
</header>
</div>
And I also changed some of the CSS:
.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}
Fiddle here
EDIT: This might make more sense, check this image. http://puu.sh/rt8M
The image just goes through the padding. I want the title div to expand vertically to accommodate the image. While keeping the text centered and the center of the image should intersect the line the text is on.
I want to align an img to the left (and then another after the text to the right). I've tried various properties but none seem to do it right. Can anyone help?
To clarify, I want the image against the left side of the screen or browser window. The div stretches from the left to the right of screen, as you would expect of a header/title div.
Float;left seems to make the img drop out of the div tag. I should mention there is a text-align:center; property on the tag. But it doesn't fix the problem when removed so I'm not sure it's that.
The HTML
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" width="86" height="98" />
Page Header Title
</h1>
</div>
</div>
I created a little dabblet code example for you. I think this is what you are trying to do?
http://dabblet.com/gist/2492793
CSS:
.logo{
float:left;
width: 86px;
height:98px;
display:block;
}
.img2{
float:right;
display:block;
}
.clear{
clear:both;
}
HTML:
<div id="header">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" alt="" />
Page Header Title
<img class="img2" src="images/img2.png" alt="" />
<div class="clear"></div>
</h1>
</div>
</div>
The reason the logo is dropping out of the div is because it is not cleared.
This should fix things up.
Use this
<div id="header" style="float:left">
<div id="title">
<h1>
<img class="logo" src="images/logo.png" width="86" height="98" />
Page Header Title
</h1>
</div>
#logo{
display: flex;
justify-content: space-evenly;
}
<div id="logo">
<img src="https://images.pexels.com/photos/853168/pexels-photo-853168.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" alt="something" width="100" height="100"/>
<h1>Hello World</h1>
</div>
I have this navigation and its not showing up in the position I want it to.
http://jamessuske.com/thornwood2/
I would like to have it next to the logo on the right side, for some reason it shows up on the right at the very top. (kinda hard to describe, but im sure once u see it, u will know what I am talking about)
HTML CODE
<div class="header">
<div class="logo">
<img src="images/logo.jpg" width="350" height="120" border="0" />
</div><!--logo-->
<div class="nav">
Home | About Us | Gallery | Contact Us
</div><!--nav-->
</div><!--header-->
CSS CODE
.header{
width:1009px;
}
.logo{
float:left;
width:350px;
}
.nav{
float:right;
width:260px;
color:#FFF;
}
Also while I am here in IE 7 there is a gap between the topConent and the contentArea, also between the contentArea and bottomContent
http://jamessuske.com/thornwood2/
HTML CODE
<div class="topContent">
<img src="images/top.gif" width="1009" height="37" border="0" />
</div><!--topContent-->
<div class="leftContent">
<img src="images/leftSide.gif" width="48" height="494" border="0" />
</div><!--leftContent-->
<div class="contentArea">
</div><!--contentArea-->
<div class="rightContent">
<img src="images/rightSide.gif" width="49" height="494" border="0" />
</div><!--rightContent-->
<div class="bottomContent">
<img src="images/bottom.gif" width="1009" height="39" border="0" />
</div><!--bottomContent-->
Any help with either issue would be greatly appreciated.
Thanks
.nav { float:left; }
if you want it next to the picture. If you want it on the right but further down - just crop your picture. It has some whitespace up the top, or add margin-top:20px or so.
IE7 bug
As of the bug you need to remove padding and margin from each picture and div so do something like this for each div.
.top-content
{
padding:0px;margin:0px;
}
.top-content img
{
padding:0px;margin:0px;
}