My problem is similar to the one in this question, which hasn't seen activity in over a year. I have a table of unknown width, being displayed next to an image of a known size. THe width of the container is unknown. I want the image floated right, and the table to share a line, expanding to fill the remaining space. I'd like to do this without nested tables (because eew). I thought it should be as simple as:
<img src="img.jpg" style="float:right" />
<table style="width:100%">
...
</table>
...but that is not the case. Here's a fiddle that's close to what I want, just missing the table width: http://jsfiddle.net/K2fpA/
If possible, I'd like to keep CSS3 out of it. I can do a nested table if absolutely necessary, but I want to make sure I'm not missing something first. Any ideas?
step 1. add style position relative for the containing div.
step 2. position:absolute for image
.container img {
position:absolute;
right:0;
top:0;
}
.container .table-div {
position:relative;
padding-right:'images-width';
}
<div class="container">
<div class="table-div">
<table style="width:100%;" >
</table>
</div>
</div>
Try to put the image before the table and float both, image and table, right.
<div style="float:left;"> <table style="width:100%;" >
...
</table>
<div/>
<div style="float:left;"> <img src="img.jpg" /></div>
EDITED
Related
This is my current code:
<figure class="half">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
Unfortunately perhaps because the images are too wide, it still puts the second image on the next line. I want to avoid this - no matter how wide things get. How can I do this?
Just add css display:flex to parent container of images in your case figure.
<figure class="half" style="display:flex">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
You could put your images into table cells.
<figure class="half">
<table>
<tr>
<td>
<img style="width:400px;" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
</td>
<td>
<img style="width:600px;" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
</td>
</tr>
</table>
<figcaption>Caption describing these two images.</figcaption>
</figure>
I recommend just using a <span> tag and put no space in between them, then they will be side by side.
This could be achieved in many ways.
You could use flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could wrap it grid system and set image width to 100% or create table and set width of each td to be 50%
You can even set css for all of your images to be exactly the same size.
I've created a little fiddle for you https://jsfiddle.net/7kophdxq/.
I would strongly recommend using flexbox, since its the 'new way' of doing these kind of things. Of course you could use a table, but it isn't tabular data right?
For the general structure:
<div class="columns">
<div class="columns__item"></div>
<div class="columns__item"></div>
</div>
Each columns__item has a width of 50%. Inside each columns__item I've put a little image (and made sure it will not exceed a width of 100% of its container):
<figure>
<img src="http://lorempixel.com/400/400/" />
<figcaption>Image caption</figcaption>
</figure>
Hope it helps!
.half img {
display:inline-block;
}
.half figcaption {
display:block
}
or, if you want to keep images in one line, regardless the container size:
.half {
white-space:nowrap;
}
.half img {
display:inline;
}
.half figcaption {
display:block
}
Pick whatever suits you best;)
I want to create a basic layout for webpage with divs and want to set images for their background.
Since I have smaller images I want to stretch them to fill in the divs.
There are many ways to do that. But I tried following:
</html>
<head>
<style>
img#bg {
top:0;
left:0;
width:100%;
height:100%;
}
<style>
<head>
<body>
<img src="body.jpg" alt="background image" id="bg" />
<div id="content"> </div>
<body>
</html>
This worked. Then I tried to make use of it in layout.
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This also worked. But when I tried to set image this way for a div with float:left or CSS width set, it did not worked:
<div id="header" style="zindex=1;height:300px;width:100%"></div>
<div id="hmenu" style="zindex=1;height:80px;background-color:#007980"></div>
<div id="content" style="float:right" >
<img src="body.jpg" alt="background image" id="bg" />
</div>
This doesnt work. In last HTML notice float:right.
I will like to stick to this method, not any jQuery method or others and also will like to know what is wrong here and what should be done to get the desired result with CSS modifications as I am learning this.
Seems like you want a background image
A good explanation can be found here
Basically you can make a div have a background using CSS and not having to put an tag inside, this is almost always preferable.
Example code for you could be:
body {
background-image: url('body.jpg');
background-size: cover;
}
In order for height: 100%, Top:0 etc to work you need to have a position applied to the element.
You don't as per the example code given. Give more code and i can help more. But from what you have given this is your problem.
background-size: cover;
Is a nice solution, but I'm not sure about the browser support, because it's CSS3.
I made a fiddle, is this what you were looking for?
http://jsfiddle.net/NQY6B/5/
By the way, change "zindex" to "z-index".
EDIT: I've updated the fiddle with text content in the div
Let's say I have an Image.
<img src="lala.png" />
This image has a width=400px;.
and I want to type "Lala" under this Image.
<img src="lala.png" />
<br>
<span>Lala</span>
Note that I'm gonna be fetching those images and those texts from a database, the width of the images is fixed at 400px, but of course the texts will vary in size, so I can't use margin-left:100px; to push the text to the middle because It will look wrong on other texts...
What is the best way to do it?
You can use a div instead of span.
HTML:
<div class="underImage">Blah</div>
Style:
.underImage {
width: 400px;
text-align: center;
}
you can do this by text-align:center;
<div style="text-align:center;">
<img src="lala.png" />
<br>
<span>Lala</span>
</div>
Just wrap the image and text in an element and use the text-align CSS attribute on the wrapping element.
HTML
<p class="center-wrapper">
<img src="lala.png" />
<br>
<span>Lala</span>
</p>
CSS
.center-wrapper { text-align: center; }
There are several ways to achieve that, but the most flexible and most effective way is to use a one-cell table, with the caption text in a caption element:
<table class="image">
<caption align="bottom">caption text</caption>
<tr><td><img ...></td></tr>
</table>
There are many people who oppose such use of a table on quasi-religious grounds, but it’s still the flexible way that does not require you to set the width of the text explicitly (as opposite to letting it be determined by the width of the image) and works independently of CSS support.
I'm trying to be a good developer and not use tables, but I've been unsuccessful. Here's my attempt...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Because some people complain if I don't specify all the obvious tags</title>
</head>
<body>
<div style="width:100%">
<div style="background-color:Purple;width:25px;float:right"><input type="button" style="width:15px" /></div>
<div style="background-color:Aqua"><input style="width:100%" /></div>
</div>
</body>
</html>
This is the output that I get. I was hoping the input box would be on the left side of the button, but unfortunately it's underneath.
To demonstrate what I want, this is how I would do it if I were to use a table:
<table style="width:100%">
<tr>
<td style="background-color:Aqua"><input style="width:100%;box-sizing: border-box" /></td>
<td style="background-color:Purple;width:25px"><input type="button" style="width:15px" /></td>
</tr>
</table>
Please note:
I can't change the doctype tag
The solution must not use tables
This should work regardless of the size specified in the containing div, which is currently set to 100%.
Thank you :)
If I had a working table layout as you do, I'd do something like this:
.layout-table
{
display: table;
}
.layout-table > div
{
display: table-row;
}
.layout-table > div > div
{
display: table-cell;
}
And then:
<div class="layout-table" style="width:100%">
<div>
<div style="background-color:Aqua">
<input style="width:100%;box-sizing: border-box">
</div>
<div style="background-color:Purple;width:25px">
<input type="button" style="width:15px">
</div>
</div>
</div>
Fiddle
Of course, all that styling would be done externally too, but you get the point. This is identical to your table layout, but it's done with divs styled to act like tables, separating layout from content.
Actually, I would probably be lazy and just use <table role="presentation"> but that's bad (not to mention invalid with your obsolete doctype).
When you float an element using CSS you take it out of what is called the "document flow". So basically what is happening here, is the aqua colored box is actually extending behind the yellow box. See: http://jsfiddle.net/hegvz/ . The result is that the width of the aqua box is actually more than what is visible, so the input extends to fill the entire width of the rendered box.
You have a couple of options to fix this:
1) Add a padding to the side of the non-floated box equal to the width of the floated box, plus whatever white space you would like. Example: http://jsfiddle.net/QVpnw/ . You will see the aqua box still extends behind the yellow box, but the input of the aqua box is now shortened properly.
2) Add a margin to the side of the non-floated box equal to the width of the floated box. This will result in the aqua box rendering white space, instead of color. You will also want to adjust the padding in this case. http://jsfiddle.net/SVKr6/
For example in the below image I want keep the text always vertically aligned in all condition. even if text is in one, two or three lines.
means the text should be vertically centered always. I don't want to add extra span
<div>
<img src=abc.jpg"> Hello Stackoverflow. Thank you for help me
</div>
I want to achieve with this html.
Edit
And I don't want to give fix width and height to any element
Chris Coyier wrote an excellent tutorial on just this: http://css-tricks.com/vertically-center-multi-lined-text/
I've used it myself, and it works perfectly.
try with
HTML
<div>
<img src="" height="155px" width="155px" style="float:left">
<div class="imageText">Hiiii <br/> how r u? <br/> use multiple lines</div>
</div>
CSS
.imageText {
display: table-cell; // this says treat this element like a table cell
vertical-align:middle;
border:1px solid red;
height:150px;
width:150px;
text-align:left;
}
DEMO
Note: width and height matters
I really like the method described # http://reisio.com/examples/vertcenter/