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
Related
I have two elements on my page which I wish to align side by side, what would be the best way of going about this, and can somebody explain the best way to go about coding it when you want to align elements together.
In this example I want the video to take up most of the room say 3/4 and the chart to be in the remaining 1/4. (Bootstrap is loaded on this page)
Any suggestions?
This is what it currently looks like:
http://i1057.photobucket.com/albums/t390/Alexwileyy/element_zps066ecdd2.png
(I have outlined the video in a color so I can see the perimeters)
This is my HTML code for the two elements:
<!--Video Section-->
<div class="video">
<div class="container">
<div class="video-element">
<iframe width="460" height="215" src="//www.youtube.com/embed/PdABTJhRTLY" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<!--End Of Video Section-->
<!--Start of chart-->
<div class="container">
<div class="chart">
<div class="chart-cont">
<h1 id="chart-header">Charts</h1>
</div>
<div class="chart-cont">
<h1>1</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h1>2</h1>
<img src="http://savegameonline.com/wp-content/uploads/2013/05/CoD-Ghosts-banner.png">
View Review</td>
</div>
<div class="chart-cont">
<h1>3</h1>
<img src="http://bit.ly/1tSu4iq">
View Review</td>
</div>
<div class="chart-cont">
<h1>4</h1>
<img src="http://www.spotlightreport.net/wp-content/uploads/2013/06/gran-tourismo-6-banner-3.jpg">
View Review</td>
</div>
<div class="chart-cont">
<h4>View More..</h4>
</div>
</div>
</div>
<!--End of chart-->
This is my CSS code for my two elements:
.chart {
background-color:white;
width:400px;
margin-bottom:10px;
margin-top:-35px;
}
.chart-cont * {
display:inline;
}
.chart-cont {
padding:10px;
box-shadow: 0 2px 5px rgba(26,26,26,0.75);
text-align:center;
}
.chart-cont img {
width:180;
height:60px;
}
.chart-cont h1 {
vertical-align:middle;
}
Any answers greatly appreciated.
First if you want to work with 3/4 of the screen, start using a percentage as width.
First create a content Div, then a LeftContent and a RightContent div.
Like this:
<div class="Content">
<div class="LeftContent">
</div>
<div class="RightContent">
</div>
</div>
CSS:
.Content{
width:100%;
margin:10px;
padding:10px;
}
.LeftContent{
width:60%;
margin:10px;
float:left;
}
.RightContent{
width:30%;
margin:10px;
float:right;
}
Now you can place the video left, and the other images right, adjust how you want to with padding, margin and width percentage, test with making your window smaller (how it looks like on smaller screens).
Notice to make use of float left and float right.
Here is JSFiddle link: http://fiddle.jshell.net/7pp7q/1/
Image is coming with rss feed, How I can force to display image with my custom size?
<div id="entry_id=1" class="feed_entry read_entry">
<h3>
<p class="feedreader_subtitle">
<p></p>
<div class="field field-teaser">
<p>Description text here</p>
</div>
<div class="field field-main-imd">
<a class="imagecache imagecache-s imagecache-linked imagecache-s_linked" href="http://www.wiatrak.nl/32720/droga-sw-jakuba-do-santiago-de-compostela-ii">
<img class="imagecache imagecache-s" width="115" height="115" title="Sw. Jakub" src="http://url_to_image_com/sites/default/files/imagecache/s/images/story/2014/02/12/swjakub00.jpg" alt="Sw. Jakub">
</a>
</div>
<p></p>
</div>
The following is not working
img {width:100px; float:left; border:0; margin-top:5px; margin-bottom:5px; margin-left:7px; margin-right:7px;}
Any suggestions?
What you are doing should work fine - http://jsfiddle.net/nitishdhar/yB92P/
There are some classes also defined in the img tag, are you using some other CSS file also which might be having definitions for the image size. To be sure try using a more specific selector to override the size eg-
img.imagecache.imagecache-s {
width: 50px;
height: 50px;
}
http://jsfiddle.net/nitishdhar/yB92P/1/
Right now I've got a webapp working, which I'm trying to add icons to, along with text to describe those icons. I'm trying to scale the icons down to fit in the div, which works great, but also to scale the image to hold text within the div. The issue I'm having is that although the image will scale to fit in the div, it won't scale enough to also allow text in the div.
My HTML code is
<div class="ui-grid-b" id="dashGrid">
<div class="ui-block-a changerbutton" style="height:60px;border-bottom: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#formSelect" data-icon="grid">Forms</h4>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:90px;border-bottom: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
<h4 class="gotobutton" goto="#entries" data-icon="info">Entries</h4>
</center>
</div>
<div class="ui-block-a" style="height:22%"></div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c" style="height:22%"></div>
<div class="ui-block-a changerbutton" style="height:22%;border-top: 1px solid;border-right: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#mapScreen" data-icon="star">Map</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
<div class="ui-block-b" style="height:22%"></div>
<div class="ui-block-c changerbutton" style="height:22%;border-top: 1px solid;border-left: 1px solid;display:table-cell; vertical-align:middle">
<center>
<h4 class="gotobutton" goto="#locSettings" data-icon="gear">Settings</h4>
<div>
<img src="http://upload.wikimedia.org/wikipedia/commons/8/85/Smiley.svg" class="windowscale-height">
</div>
</center>
</div>
</div>
, and the relevant CSS is
.windowscale-height
{
max-height: 100%;
max-width: 100%;
min-height: 1%;
min-height: 1%;
}
I've got a JSFiddle that shows the issue, http://jsfiddle.net/jDDmC/.
Ideally, the text, as well as the image, would both fit into the outlined boxes.
Any help would be appreciated!
A couple of things:
1) Remove the <center> tag since it's been deprecated. Use text-align: center in your css, instead.
2) Your divs have a specific height, and because of that, the text goes out of the box. So in the inline css, remove the height property.
3) Finally, consider using only an external stylesheet (instead of inline css), since it's easier to maintain and reuse.
Please take a look at:
http://jsfiddle.net/jDDmC/1/
Maybe you're looking for something like Fluid Images ?
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>
What's the best way to add a caption below an image? The image and its caption will be floated right, and the text on the caption needs to wrap -- a 200x200px image shouldn't have a caption of width 800px.
I would strongly prefer a solution that allows me to update images (with different widths) without changing the CSS or markup.
For reasons beyond my control the image itself will also be floated right, but this should not be too problematic.
The image code is
<div class="floatright">
<img alt="foo" src="bar.png" height="490" border="0" width="800">
</div>
and I can wrap this with HTML/CSS as needed. No JS on this page.
figure {
display: table;
}
figcaption {
display: table-caption;
caption-side: bottom;
}
<figure>
<img src="https://picsum.photos/200/50" />
<figcaption>This is a caption of slightly longer length. It should wrap, regardless of the size of the image.</figcaption>
</figure>
You can substitute figure and figcaption for div and p, or whatever other containers float your semantic boat.
Shameless plug: I blogged about this problem and my solution here, if you're interested.
Something like this: http://jsfiddle.net/QLcRC/ ?
You may use also use the HTML5 figure and figcaption elements and style those as #Wasim suggested.
<figure>
<img src="/test.jpg" alt="a test-image">
<figcaption>Description</figcaption>
</figure>
Another (not-so-cross-browser-savvy) approach is to use the img title-attribute and insert it as a pseudo-element via CSS:
#content img[title]:after {
content: "[" counter(image) "] " attr(title);
counter-increment: image;
display: block;
text-align: center; }
The basic idea is to make one <div> with an <img> tag and <p> tag.
<div class="photo">
<img src="someimage.jpg">
<p>my caption
</div>
Now you simply set two styles. One for the img tag and the other for the p tag for the photo class.
Create a class name it photo:
.photo {float: right;width: 210px;margin: 0 10px 10px 10px;}
img.photo {float: right;margin-left: 10px;margin-bottom: 10px;border: 1px solid #666;
padding: 10px;}
Conclusion:
1. A div with an <img> tag and a <p> tag.
2. Div should have one class with different styles for <p> and <img> tag.
Pure HTML/CSS inline styled.
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all;"></div>
<!-- NEXT ROW -->
<div style="width:40%;
margin-right:6%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="margin-top:0px;
padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<!-- NEXT ONE -->
<div style="width:40%;
float: left;">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/26/Papilio_machaon_Mitterbach_01.jpg/500px-Papilio_machaon_Mitterbach_01.jpg" width="100%">
<p style="color:gray;
background-color:#eee;
margin-top:-4px;
width:100%;
height:auto;
padding-top:10px;
padding-bottom:10px;
text-align:center;">
<span style="padding-right:10px;
padding-left:10px;"> Butterfly </span></p>
</div>
<div style="clear:all; height:100px;"> </div>
This is a known problem with current browsers. atlavis solution is the most simple. Until all browsers implement figure tag, then Feeela's way would work. But even then it would not be backwards compatible. I searched this issue for 3 days straight and I really hate the guys that made CSS decided to strip tables which were backwards compatible.
You could use the display: table-cell property on the class. But that is not supported by IE 6 or 7.