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>
Related
I want to put an icon next to my heading. But it does not fit correctly..how can I make this fit?
<div style="width:100%;">
<div style="float: left;width:7%;min-width:40px;">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" /></div>
<div style="float: left;width:93%;">
<h1>My heading</h1>
</div>
</div>
Use vertical-align:middle, so if you change the size of text or image, the position is automatically aligned.
.myHeading img {
margin-right:10px;
}
.myHeading h1, .myHeading img {
display:inline-block;
vertical-align:middle;
}
<div class="myHeading">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1>My heading</h1>
</div>
<div class="myHeading">
<img height="60px" src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1>My heading</h1>
</div>
<div class="myHeading">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1 style="font-size:70px;">My heading</h1>
</div>
I suppose you want to align the image in the middle to match the text. You could just float the img and edit its position for a pixel-perfect alignment.
Also you are using a lot of unnecessary wrappers, all of this can be simplified into the following:
#myHeading img {
float:left;
margin-right:10px;
position: relative;
top:2px;
}
<div id="myHeading">
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" />
<h1>My heading</h1>
</div>
It is also possible to do it with inline-blocks.
img, h1{
display: inline-block;
vertical-align: middle;
}
<img src="http://superfood-zentrum.info/wp-content/uploads/2016/03/square.png" alt="">
<h1>My heading</h1>
I am creating a small page using html which has a header and a body. The header is within a tag with blue background.
The problem I am facing is an image(android.png) which I want to be displayed in right end of the header seems getting placed below the header. How can I place the image in the right of the header.
I don't want to use CSS to align the image.
Click Run Code Snippet to view the current page layout
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I think this does what you're after. Your text div inside the header was filling out the rest of the width, pushing the second image to the next row:
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3">
<img style="float:left; width:80px;height:50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div style="font-size:20px;color:white; text-align:left; float:left">
<h3>Something</h3>
</div>
<img style="float:right; width:150px; heigh:50px; margin-top:5px; margin-right:5px" src="http://www.sona-systems.com/img/android.png">
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,
<br>I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
jsBin demo
Learn to use <style>. Makes life easier and more time to drink coffee with friends.
Float your image to the right
But also since H3 is a block element by default float it left (to remove the width)
<p> should not be enclosed in <i> since Paragraphs are block level elements and i are inline
<style>
.float-left{ float:left;}
.float-right{float:right;}
#header{
width:400px;
height:60px;
border:1px solid blue;
background-color:#2196F3;
}
#header img{
height:50px;
}
#header h3{
font-size:20px;
color:white;
}
#content{
width:400px;
height:400px;
border:1px solid blue;
}
</style>
HTML
<div id="header">
<img class="float-left" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<h3 class="float-left">Something</h3>
<img class="float-right" src="http://www.sona-systems.com/img/android.png">
</div>
<div id="content">
<p>
Hey,<br>
I am on vacation. I will respond after i come back
</p>
<p><i>Sent from gmail</i></p>
</div>
Another solution would be to place your images right inside the H3 element
<h3><img> Some Text <img></h3>
but than you need to play with the H3's line-height and the image's vertical-align etc.
Since you want to avoid CSS, I'll assume this is for output to an HTML-handicapped email client such as Outlook.
You can do this without using CSS on your images by simply moving the second image before the first one within the HTML.
<html>
<body>
<div style="width:400px;height:60px;border:1px solid blue;background-color:#2196F3"">
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
<img align="left" width="80px" height="50px" src="http://icons.iconarchive.com/icons/igh0zt/ios7-style-metro-ui/512/MetroUI-Google-Gmail-icon.png">
<div text-align="left" style="font-size:20px;color:white"><h3>Something</h3></div>
</div>
<div style="width:400px;height:400px;border:1px solid blue">
<p>
Hey,<br>
I am on vacation. I will respond after i come back</p>
<i><p>Sent from gmail</p></i>
</div>
</body>
</html>
I fixed this (it will still need some brushing up, but it works) by switching the position in the code where the <div> with "Something" in it and the messed up image are.
Instead of
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
<img align="right" width=150px height=50px src="http://www.sona-systems.com/img/android.png">
Do
<img align="right" width="150px" height="50px" src="http://www.sona-systems.com/img/android.png"> <!--added in quotes for the width and height-->
<div text-align="left" style="font-size:20px;color:white;"<h3>Something</h3></div>
You also have some a wrong double quote in this line
For some reason the code below works once, but if I change the height values for .Image, it stops working. The test image overflows instead of being hidden. Then the containing div won't resize no matter how often I try to change height.
.Image{
background-color:red;
height:400px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="Image">
<img "src="images/test.jpg" alt="test">
</div>
</div>
</body>
</html>
the reason why is doesn't work is because you have an error in your code at img
<img "src="images/test.jpg" alt="test">
your error is ->
<img "src="...">
it should be ->
<img src="...">
with out the extra quote
so your code should look like this
.Image{
background-color:red;
height:400px;
overflow:hidden;
}
</style>
</head>
<body>
<div class="main">
<div class="Image">
<img src="images/test.jpg" alt="test">
</div>
</div>
</body>
</html>
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 tried many "Display" param in CSS and seem none able to set a proper alignment, please help me to solve it.
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
Display will not set any allignment.
This may be what you need.
<style type="text/css">
.prev, .next, .status{float:left;}
</style>
try this:
<center>
<div id="fadeshow2toggler" style="text-align:center; width:290px;">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</center>
Can you modify the HTML? If so, add a container for the two anchors and the div like this
<div id="fadeshow2toggler" style="width:290px;">
<div class="linkscontainer">
<img src="http://i31.tinypic.com/302rn5v.png"/>
<div class="status">1 of 1</div>
<img src="http://i30.tinypic.com/lzkux.png"/>
</div>
</div>
And use this CSS
.linkscontainer{
margin:0px auto;
min-width:50%;
}
.status{
display:inline;
}