I am fairly new to HTML5 so this will maybe seem like a simple question although I haven't found an information about this online. It appears as though most cases where people want to do this they use a table (but I understand that is not a good idea anymore)
In my header area I need to place several images side by side. They should be justified so there is space between the images and each image is in the right place. I have an appropriately sized header block in place but for the life of me can't figure out how to arrange the images inside it correctly.
The images should be layed out like this:
(http://imageshack.us/photo/my-images/339/tmpyg.jpg/)
layout
I have tried this:
<header>
<img src="ICUWB.jpg" alt="ICUWB" height="100" width="250"/>
<img src="Logo.jpg" alt="ICUWB" height="250" width="250"/>
</header>
But I am not sure what needs to go in the css region i guess
header {
background: #3d3837;
margin: 0 auto;
}
Thanks for the help.
I understand that what you want to achieve its something like this "snapshot" (color borders on the images are only to see the "pieces" easier), the header is in light grey.
http://imageshack.us/photo/my-images/200/unled1ik.jpg/
There are several ways to do this, first one:
(I added and ID to the header (optional)).
<header id="arriba">
<img src="1.jpg" alt="1" />
<img src="2.jpg" alt="2" />
<img src="3.jpg" alt="3" />
</header>
The CSS:
header#arriba {
width:960px;
height:350px;
clear:both;
margin:auto;
text-align:center;
background-color:#ccc;
}
header#arriba img {
vertical-align:middle;
margin:0 2px 0 2px; /* YOU CAN ADJUST IMAGES SPACE WITH THIS MARGINS */
}
Hope it's what you need.
Regards.
P:.
With your current markup, add this CSS:
header img{
float:left;
margin-right:5px;
}
Btw, you may end up wanting to give a class to those images and target them with the class at a later time.
Related
I would like to learn how to do 'nice buttons' where the picture is added with css. For instance suppose that I want something like the following
(that is, the picture and the text are together and the whole picture is the link. You may see http://www.geogebra.org/team for something with the same spirit). The question is to do so as follows
HTML
<a class="modern_art" href="...">Modern Art</a>
CSS
.modern_art{
background-image: url(/pictures/modern_art.jpg)
/* or something similar */
/* more instructions */
}
By now, the best I have done is to place the picture and afterwards the name with ::before, but this is not enough to get a nice button. What would you recommend me?
try this one.
In this fiddle you can find something similar to what you ask. Just make an anchor tag as a thumbnail and then put your content inside it. Something like this one:
<a href="#" class="thumbnail">
<figure>
<img src="http://i.stack.imgur.com/g1Ce8.png" alt="bg" />
<figcaption>
<div>
Caption here
</div>
</figcaption>
</figure>
</a>
Then I'm using positioning and CSS3 transitions to hide and show the caption.
UPDATE
I have updated the code to transition back to the normal state, rather than instantly getting back to it. Fiddle here
Found this, might help you out.
https://css-tricks.com/design-considerations-text-images/
Well, you're very close with your CSS. All it needs is an explicit width and height, and some padding.
.modern_art{
display:inline-block;
width: 252px; height:20px;
background: #a9a9a9 url(http://i.stack.imgur.com/s2ZG0.png) no-repeat center 40px;
padding: 318px 60px 30px;
text-align:center; /* oh well, and some styling to make the text look similar to the example */
color:black;
text-decoration:none;
font-size:20px;
letter-spacing:.1em;
}
<a class="modern_art" href="...">Modern Art</a>
I have uploaded my page here so that you can see clearly what I am referring to:
http://www.emmasteed.co.uk/new/
The menu section works fine it is the larger button icons at the bottom: Portfolio, Get in touch and About me.
I have hyperlinked these images as you will see in the code however nothing happens when I hover over them or try to click. What am I doing wrong? This is driving me crazy!
<div class="largemenubutton"><img src="images/portfolio.png" alt="Portfolio" border="0" /></div>
<div class="largemenubutton"><img src="images/getintouch.png" alt="Contact me!" border="0" /></div>
<div class="largemenubutton"><img src="images/aboutme.png" alt="About" border="0" /></div>
.largemenubutton {
width:283px;
height:259px;
margin-top:20px;
float:left;
display:block;
text-align:center;
}
Remove the z-index -1 there:
.mainimage {
z-index: -1;
}
For keeping the drop shadow do the following:
<div class="header">
<div class="container">
remove the mainhome width and apply to the container in the css:
.container {
width: 850px;
}
Also use that container for wrapping the same way the main content for the site.
and then for the drop shadow (customize as you please):
.header {
box-shadow: 0 0 0 10px black;
}
This is the fiddle that represents more or less this: http://jsfiddle.net/9q7PX/
Two possible solutions come to mind:
1) Wrap the img element in a div, and wrap that div with your a element.
2) Nix the img element from your DOM, and instead make it a background-image of a div (in CSS). Then wrap that div with your a element.
I have finally managed to figure a way round this. I would like to thank everyone for their answers and advice as without this I probably would never have found this solution. The z-index setting on the previous div was the problem I had to get round.
Basically i created another div tag to contain my large menu buttons and placed this outside of the previous div which held my slider image which was set at z-index -1 as i wanted my image to sit behind a drop shadow above. This then allowed the links on the images to work.
Hope this makes sense and helps anyone else who has this problem.
Let say I have two elements <img> and <p> as
<img style="background-color:#ffffff;width:250px;height:auto;float:left" src="http://somesite/p3.png" />
<p>
alibabaanakjalanan.</p>
Currently, the paragraph content is shown exactly nex to the image. How can I set some spacing between the elements ?
If you are floating the image you all you have to do is give it some margin-right, I would advise moving away from adding the styles inline by maybe giving the image a class something like this although my classname is very weak:
CSS
.img {
background-color:#ffffff;
width:250px;
height:auto;
float:left;
margin-right: 20px;
}
HTML
<img src="http://somesite/p3.png" class="img" />
<p class="para">alibabaanakjalanan.</p>
In action http://jsfiddle.net/PqWAh/1/
This is best practice for seperating styles from markup
Add margin for img.
margin-right:20px;
So code would be
<img style="background-color:#ffffff;width:250px;height:auto;float:left;margin-right:20px;"
I'm trying to make a movie manager to get me back working with rails again. I'm reading the movies from a database, and trying to present their covers in a responsive grid.
I'm new to using Twitter Bootstrap, and having some weird issues with weird spacing. All my images are the same height and width, so that shouldn't be an issue.
To see the issue, go here: http://jsfiddle.net/32AcT/ (Due to the responsive grid, you may have to make the view window bigger, so they're not all in a single column.) I'm simply doing:
<ul class="thumbnails">
<li>
<a href="#">
<div class="caption">2 Fast 2 Furious</div>
<img alt="2 Fast 2 Furious" class="thumbnail" height="111" src="http://cf2.imgobject.com/t/p/w500/4rDV8TgaILHRfX1IRgpysjkD9A0.jpg" width="74" />
</a>
</li>
...
</ul>
Here is an example of what it looks like (weird spacing highlighted with pink box):
I understand why the widths are off, due to the caption lengths being longer than the image's width (although I'd like to fix that somehow too). Why is this happening, and is there any good method to prevent it?
try this one i think it will solve your prblem
http://jsfiddle.net/32AcT/1/
.thumbnails > li { width:100px; }
.thumbnails .caption{ overflow :hidden; text-overflow:ellipsis; white-space:nowrap; }
.thumbnails img{ height:111px; width:74px}
main issue with bootstrap-combined.min.css line no 23 height:auto;
img {
max-width: 100%;
width: auto 9;
height: auto;
vertical-align: middle;
border: 0;
-ms-interpolation-mode: bicubic;
}
If I get the problem right, the caption is causing it. What would you say to a solution like this: http://jsfiddle.net/32AcT/4/
The difference from your solution is that the Caption is inside the thumbnail (seen in code 1) div and thus is limited in the width (seen in code 2). It could be that you have to play a round with the height of the div but I guess that would be the "best" solution for this.
Code 1:
<li class="span4">
<div class="thumbnail">
<img src="http://cf2.imgobject.com/t/p/w500/1ZjDmPKMUtout8hR77qmK1llgls.jpg">
<div class="caption">
<h3>Along Came a Spider</h3>
<p>Action Action</p>
</div>
</div>
</li>
Code 2:
.thumbnail{
height:650px!important;
}
I need to populate data in the white space of the box shown in the picture. The Red portion will be an image,
But still data has to be shown continuously in the white space. How can i achieve this using HTML and CSS ?
Updated with code :
<div id="Content" runat="server">
<img id="ad" src="images/sandbox.gif"
style="float:right; height: 200px; width: 150px;" alt="{alt}" />
</div>
#Anuya take a look at this http://jsfiddle.net/TfXNf/
Its better if you define a class in you css style in order to toggle all pictures that needs to have the same layout so
HTML
<img src="http://link.to/image.jpg" class="className" alt="Image"/>
CSS
.className{
float: right;
margin-right:2px; /*change these based on your layout*/
margin-bottom: 2px; /*change these based on your layout*/
}
Margins are needed to push the text a little bit away from the picture so you can create the illusion of the border
Just put a float onto your image:
<img src="{imageLocation}" alt="{alt}" style="float:right;" />
Ideally you would want to keep the styling separate from the content but this will give you the idea. Hope that helps