I'm currently skinning site for a virtual airline and I need help as to how to get
two images to show up on the same line instead of one breaking onto the next line.
It should be displayed as:
LOGO ICON
But instead it turns into:
ICON
LOGO
Does anyone know how to fix this in the CSS?
Thanks!
Check this jsfiddle
You can make a div for each LOGO and ICON and float them.
<div class="head">
<div class="logo">LOGO</div>
<div class="logo">ICON</div>
</div>
and CSS:
.head { width:100%;}
.logo {float:left; padding:10px;}
First, I have to admit your HTML is screwed up - inline style declarations, incorrect image links, etc.
Replace the #top div with the following in your layout.tpl file:
<!-- Logo + Search + Navigation -->
<div id="top">
<a id="logo" href="<?php echo SITE_URL?>" target="_blank">
<img src="/lib/skins/klm/img/logo.png" alt="Home">
</a>
<img id="fb" src="http://fc04.deviantart.net/fs71/f/2012/295/0/a/facebook_icon_by_x_1337_x-d5ikwkm.png" alt="Facebook">
</div>
Replace the following CSS style declarations with this:
#fb {
float: left;
position: absolute;
display: inline;
width: 50px;
bottom: 0;
right: 0;
}
#logo {
bottom: 0;
display: inline;
left: 0;
position: absolute;
}
#top {
height: 58px;
margin: 0;
padding: 10px 0;
position: relative;
}
try using links instead of using image tags ,,
HTML:
<div class="container">
<a class="one"><a class="two"></a></a>
</div>
CSS:
.one {float:left; background-image: url(../img/logo.png);}
.two {float:right; background-image: url(../img/ico.png);}
or if you still want to use the image tag, you can also use this ..
HTML:
<div class="container">
<img class="one" alt scr="bla">
<img class="two" alt scr="bla">
</div>
CSS:
.container {display:table;}
.one, .two {display:table-column;} -or- .one, .two {display:table-cell;}
if you're going to change the container's size, sure it must fit both of the images.
Related
I tried to position my logo and headerpic on top of each other like this:
img {
position: absolute;
top: 25px;
left: 25px;
}
.imgA1 {
z-index: 1;
}
.imgB1 {
z-index: 3;
}
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
But my logo is still at the top end of my header pic.
My css code looks like this:
.header img.headerpic {
max-width:100%;
float:left;
position:relative;
background:transparent url(../images/header.jpg)
}
.header img.logo {
position: relative;
float:left;
max-width:100%;
background:transparent url(../images/logo.png )
}
and i added this in my index.php:
<body id="home">
<!-- header area -->
<div class="header">
<id="logo">
<img src="<?php echo TEMPLATE_DIR; ?>/images/logo.png" alt="logo"/>
<img class="headerpic" src="<?php echo TEMPLATE_DIR; ?>/images/headspacer.jpg" alt="" />
<div class="infobox"><div class="inner">
</div>
</body>
What do i need to change that my Header-Picture is the background and my logo is on the left in the center of the Picture?
My actual view
position:absolute is relative to the nearest positioned parent, or the entire page. Therefore, here you are setting the images to be at the exact same location.
What you need is for .imgB1 to set position: relative and then move it to place with the top and others. E.g something like so:
#logo img {
position:absolute;
}
.header img.headerpic {
max-width:100%;
top: 10px;
left: 10px;
position: relative !important;
}
<div class="header" id="logo">
<img src="https://placehold.it/200/333333" alt="logo"/>
<img class="headerpic" src="https://placehold.it/100" alt="" />
<div class="infobox"><div class="inner">
</div>
I'm not actually tested this but, if it works thumbs up. I forget to complete my css classes and goes to php and not I have full knowledge of php
margin-left: 25%;
margin-top:25%;
Increase the z-index, case may be that your logo has more z index than img divs
If you want both images to stack on top of each other, what you need to do is to set header as relative and img to absolute like so:
.header{
position: relative;
}
.header img{
position: absolute;
}
<div class="header">
<img class="imgA1" src="https://placehold.it/200/333333">
<img class="imgB1" src="https://placehold.it/100">
</div>
By setting both img.headerpic and img.logo to position:relative, both will occupy their own space and thus won't stack on top of each other.
By defining the parent's position as relative, in this case .header, anything inside .header with an img tag that's positioned absolute will occupy the same space, relative to the parent.
I want to create a webpage but encountered a problem in making the logo appear near the heading. I have tried the following code but this does not produce expected results.
I have the following code:
.line .box .header img {
float: left;
}
.line .box.header h1 {
position: relative;
top: 1px;
left: 10px;
}
<div class="line">
<div class="box">
<div class="s-6 l-2">
<div class="header">
<img src="img/hrcimg.jpg" alt="logo">
<h1>United Nations Human Rights Council</h1>
</div>
</div>
</div>
</div>
WEBSITE SCREEN
You need to increase the width of .l-2 element.
Setting this element's width to 100% will result in the layout the title of your question eludes to.
When reaching lower resolutions, you'll need to adjust these styles accordingly so that the structure is maintained to a point.
Once the resolution reaches mobile proportions, consider displaying them in their own lines. This can be done by setting the logo to display as block with width: 100%; & height: auto;, you'll also need to kill the float rule at this point.
So i made a little something, correct me if i am wrong where the logo needs to be :)
.line img {
float: left;
}
.line h1 {
position:relative;
float:left;
top: 1px;
left: 10px;
}
https://jsfiddle.net/3an65dfp/3/
Try this out:
img, h1 {
display: inline-block;
vertical-align: middle;
}
<header>
<img src="http://placehold.it/100x100">
<h1>COMPANY NAME</h1>
</header>
What should be the proper style for the IMG in order to work as a background for the Div? I don't want to use CSS to set the background on div because I will have many LI with different DIVS and images every time.
<li class="container">
<div class="inside"> some elements
<img src="some image"></img>
</div>
</li>
I would still use CSS, but inline:
<li class="container" style="background-image:url(image.jpg) top left no-repeat">
Using an image tag for background is poor semantic.
Hei!
The style for IMG in order to work as a background for the DIV:
.inside{position:relative;}
img{position:absolute;left:0;top:0;z-index:-1;}
You can position it with respect to the parent with position: absolute
To view the contents on top, I have used a priority z-index: 1 for the span element.
.inside {
position: relative;
}
img {
position: absolute;
top: 0;
left: 0;
}
span {
position: absolute;
z-index: 1;
}
<li class="container">
<div class="inside"><span>Some Elements</span>
<img src="http://placehold.it/500x500" />
</div>
</li>
You can try like this :
<div class="div_img">
</div>
And css:
.img{
background-image: url('../images/div_img.jpg');
}
I beleive following can help, (without separate CSS)
<div class="inside" style="background-image:url('xyz.jpg');height:xypx; width=xzpx;">
</div>
I'm trying to get a very specific look for my navigation. I want the background to be a solid image and I want the links to be separated text images that float above it to make it look like a piece. I've got it aligned perfectly, the issue is that I can't get the links to appear above the background. The code is below:
<div id=Navigation>
<div id="NavBar">
<img src="Site Images/Navigation/Nav_BG.png"/>
</div><!--Nav Bar -->
<div id="NavLinks">
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
<a href="x"><img src="" /><a>
</div><!-- End of Navlinks -->
</div><!-- End of Navigation Div -->
The CSS is
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z: 2; /* What is `z`? */
}
#NavLinks{
float: none;
z: 1; /* What is `z`? */
}
I tried the z attribute but it's not working. I know that something is wrong. The div id="Navigation" must float left, or the div id="content" (not added here) won't be next to it.
Interchange the values of z-index in css of rules
#NavBar
and
#NavLinks
I would delete the background div and set the background with css like this:
HTML:
<div id="nav_links">
</div>
CSS:
#nav_links{
background-image: url('path'); /*Put here the path to your background image*/
}
Maybe if you add more information about your problem I can give you better advice.
I guess the problem is at CSS attribute z that you used. I can find anything about this, so I guess you mean z-index.
Try to change to the CSS below:
#Navigation {
height: 810px;
width: 350px;
float: left;
}
#NavBar {
position: absolute;
z-index: 2 /* `z-index` instead of `z` */
}
#NavLinks{
float: none;
z-index: 1;
}
It should give you the expected result.
I want to create my first web page but I encountered a problem.
I have the following code:
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
I'd like to know how to make the logo and the H1 to be in the same line.
Thanks!
As example (DEMO):
HTML:
<div class="header">
<img src="img/logo.png" alt="logo" />
<h1>My website name</h1>
</div>
CSS:
.header img {
float: left;
width: 100px;
height: 100px;
background: #555;
}
.header h1 {
position: relative;
top: 18px;
left: 10px;
}
DEMO
Try this:
Put both elements in a container DIV.
Give that container the property overflow:auto
Float both elements to the left using float:left
Give the H1 a width so that it doesn't take up the full width of it's parent container.
If your image is part of the logo why not do this:
<h1><img src="img/logo.png" alt="logo" /> My website name</h1>
Use CSS to style it better.
And it is also best practice to make your logo a hyperlink that take the user back to the home page.
So you could do:
<h1 id="logo"><img src="img/logo.png" alt="logo" /> My website name</h1>
Try this:
<img style="display: inline;" src="img/logo.png" alt="logo" />
<h1 style="display: inline;">My website name</h1>
Just stick the img tag inside the h1 tag as part of the content.
you can do this by using just one line code..
<h1><img src="img/logo.png" alt="logo"/>My website name</h1>
You can do it as Billy Moat told you, wrap your <img> and <h1> in a <div> and use float: left; to float your image to the left, set the <div> width and than set a line-height for your h1 and use <div style="clear: float;"></div> to clear your floating elements.
Fiddle
I'd use bootstrap and set the html as:
<div class="row">
<div class="col-md-4">
<img src="img/logo.png" alt="logo" />
</div>
<div class="col-md-8">
<h1>My website name</h1>
</div>
</div>
This is my code without any div within the header tag. My goal/intention is to implement the same behavior with minimal HTML tags and CSS style. It works.
whois.css
.header-img {
height: 9%;
width: 15%;
}
header {
background: dodgerblue;
}
header h1 {
display: inline;
}
whois.html
<!DOCTYPE html>
<head>
<title> Javapedia.net WHOIS Lookup </title>
<link rel="stylesheet" type="text/css" href="whois.css"/>
</head>
<body>
<header>
<img class="header-img" src ="javapediafb.jpg" alt="javapedia.net" href="https://www.javapedia.net"/>
<h1>WHOIS Lookup</h1>
</header>
</body>
output:
in your css file do img { float: left; } and h1 {float: left; }
Check this.
.header{width:100%;
}
.header img{ width: 20%; //or whatever width you like to have
}
.header h1{
display:inline; //It will take rest of space which left by logo.
}
<head>
<style>
header{
color: #f4f4f4;
background-image: url("header-background.jpeg");
}
header img{
float: left;
display: inline-block;
}
header h1{
font-size: 40px;
color: #f4f4f4;
display: inline-block;
position: relative;
padding: 20px 20px 0 0;
display: inline-block;
}
</style></head>
<header>
<a href="index.html">
<img src="./branding.png" alt="technocrat logo" height="100px" width="100px"></a>
<a href="index.html">
<h1><span> Technocrat</span> Blog</h1></a>
</div></header>
Steps:
Surround both the elements with a container div.
Add overflow:auto to container div.
Add float:left to the first element.
Add position:relative; top: 0.2em; left: 24em to the second element (Top and left values can vary according to you).