I have added multiple images side by side in my blog
here is the code
<div class="images">
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/>
<figcaption>Itty</figcaption>
</figure>
<figure>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSA7XLfGrT1rMS-Ifoguz-X2igsTtMLyNG08eYR0J00YY8zJQzB8Q" style="width:200px; height:100px;"/>
<figcaption>Bitty</figcaption>
</figure>
<figure>
<img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;"/>
<figcaption>Kitty</figcaption>
</figure>
<figure>
<img src="http://oi57.tinypic.com/2mrch37.jpg" style="width:200px; height:100px;" />
<figcaption>Commiteh</figcaption>
</figure>
Here is the css code. I added html and css in same widget by choosing html/javascript external widget in blogger by add widget option and i added that gadget below the menu bar and pages. Iam not able to know the adding of space between the menu bar and this widget. This is the orginal template as it looks In this site
figure {
display: inline-block;
margin: 30px 1em 1em 0;
}
figcaption {
font-family: 'Comic Sans MS';
text-align: center;
font-size: 12pt;
}
You're going to have to change your widget order of <div id="HTML3"> and put it after <div id="navbar2-mid">.
And also put a <div class="clear"> after <div id="header-area">.
If I understood your question correctly, this should work!
Related
I have a list of images, those image elements have a attribute like index, which I want to use to sort the element of the images in ascending order. with the help of CSS.
Because that index attribute value will change dynamically, more image will also be added by Ajax. So when it will update, that time it will be arranged in that order without doing anything.
.img_container {
width: 100%;
border: 2px black solid;
}
.img_container img {
margin-bottom: 5px;
margin-right: 5px;
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" index="9">
</div>
Let me know if there is any easy way to do this in CSS.
There is not a good CSS-only solution yet without modifying the HTML or adding inline styles. In the future, it may be possible to achieve this using the attr() function in CSS, but currently this doesn't have wide support for being able to use it outside of the content property.
If the more advanced usage is adopted, a future solution could look like this. Note, this will not work in most current browsers. And you should also use the data- prefix for custom attributes.
.img_container {
border: 2px black solid;
display: flex;
flex-wrap: wrap;
}
.img_container img {
margin: 5px;
order: attr(data-index); /* will not work yet in most browsers */
}
<div class="img_container">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=1" data-index="1">
<img src="https://dummyimage.com/100x150/000000/ffffff&text=10" data-index="10">
<img src="https://dummyimage.com/110x150/000000/ffffff&text=11" data-index="11">
<img src="https://dummyimage.com/140x150/000000/ffffff&text=14" data-index="14">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=2" data-index="2">
<img src="https://dummyimage.com/120x150/000000/ffffff&text=12" data-index="12">
<img src="https://dummyimage.com/130x150/000000/ffffff&text=13" data-index="13">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=3" data-index="3">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=4" data-index="4">
<img src="https://dummyimage.com/150x150/000000/ffffff&text=15" data-index="15">
<img src="https://dummyimage.com/500x150/000000/ffffff&text=5" data-index="5">
<img src="https://dummyimage.com/400x150/000000/ffffff&text=6" data-index="6">
<img src="https://dummyimage.com/170x150/000000/ffffff&text=17" data-index="17">
<img src="https://dummyimage.com/300x150/000000/ffffff&text=7" data-index="7">
<img src="https://dummyimage.com/160x150/000000/ffffff&text=16" data-index="16">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=8" data-index="8">
<img src="https://dummyimage.com/180x150/000000/ffffff&text=18" data-index="18">
<img src="https://dummyimage.com/200x150/000000/ffffff&text=9" data-index="9">
</div>
i want to make image in center but not able to do it
my aspx code is
<figure class="centercarosal">
<img src="UImages/<%#Eval("Logo") %>" style="height: 100px" alt="">
</figure>
and the class for centercarosal is
.centercarosal{
text-align:center!important
}
I think you are missing the browser specification for both please try this
.centercarosal {
text-align: -moz-center;
}
this is my css and html for the menu. I am trying to work out how to make it all horizontal. Any help would be greatly appreciated. Cheers.
ol {
margin-top: 20px;
}
#images {
margin-left: 10px;
}
#images-text {
background: #f5f8ef;
border-radius: 10px;
width: 300px;
height: 40px;
font-family: Impact, Charcoal, sans-serif;
display: inline;
}
This is the html
<ol>
<li class="newbar">
<div id = "images">
<img src="images/crowd.png" width ="200" height="180">
<img src="images/crowd.png" width ="200" height="180">
<p>
<div id = "images-text">
Arctic Monkeys
</div>
<div id = "images-text">
Arctic Monkeys
</div>
</div>
</li>
</ol>
</div>
You don't need to use a <ol>. If you have <img> with some text below or above it is good practice to use <figure> and <figcaption>for the imagetext.
<figure>
<figcaption>
Image text
</figcaption>
<img src="images/crowd.png">
</figure>
If you want the image text below the <img> just put the <figcaption>below the <img>.
Than, the figures in a <div>:
<div>
<figure>
...
</figure>
<figure>
...
</figure>
<figure>
...
</figure>
...
</div>
The CSS for every <figure>:
div figure {
display: inline-block;
}
CSS selectors usage: http://www.w3schools.com/css/css_selectors.asp
example: http://jsfiddle.net/qpk9smm8/
I am fairly new at this, so, this may seem like a very simple question to answer.
I've started to design my own page, and the code below is where I am at so far.
How it's looks is...
top left - my logo
top right - navigation
left hand side - images / descriptions
What I am trying to do, and where I am getting stuck, is getting the description to align perfectly underneath each image, and have that same thing happen as you move right across the page.
What is currently happening is that each image, and description underneath, are aligning on the left all the way down the left side of the page.
Current code below:
<body>
<div class="container">
<img src="#" alt="Title" width="300" height="100" />
<div id="navbar">
<ul>
<li>GALLERY</li>
<li>ABOUT</li>
<li>BLOG</li>
<li>CONTACT</li>
</ul>
</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">City</div>
<div id="images">
<img src="#" width="300" height="199" alt="name"></div>
<div id="descriptions">Model</div>
</div>
</div>
</body>
I'd use markup like this:
<figure class="images">
<img src="#" width="300" height="199" alt="City">
<figcaption>City</figcaption>
</figure>
<figure class="images">
<img src="#" width="300" height="199" alt="Model">
<figcaption>Model</figcaption>
</figure>
<figure class="images">
<img src="#" width="300" height="199" alt="Foo">
<figcaption>Foo</figcaption>
</figure>
And some sample CSS:
.images {
float: left;
width: 300px;
min-height: 200px;
margin: 0 10px 0 0;
background-color: #EEE; /* just to show containers since image scr is blank */
}
.images:last-child {
margin-right: 0;
}
.images figcaption {
text-align: center;
}
Fiddle
I am trying to modify the HTML5 Boilerplate header to have a central image with a word either side like so:
as you can see I managed to do it, this was however only using parts of boilerplate and bad css that broke h5bp's usefulness. I would like to utilize h5bp correctly now and achieve the same thing. I'm just not sure how to do it.
My current attempt looks like this:
The image is not in between the words, even tho the order in the mark up is like so:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 id="title">First</h1> <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> <h1 id="title">Second</h1>
</div>
<nav>
<ul>
<li>Home</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</header>
</div>
Relevant CSS:
.center { display: table; margin: 0 auto; }
#title
{
padding: 20px;
display: inline;
font-size: 4.5em;
border-top: 4px solid #5dc1c4;
border-bottom: 4px solid #5dc1c4;
}
If anyone could explain why the text is not either side of the image that would be greatly appreciated.
Thank you
Edit:
While the answer below is valid I actually solved this problem by putting the < img > into the < h1 > instead of having them separated, like so:
<h1 id="title">First <img src="img/mf_coffee_cup.png" alt="" height="280" width="340" /> Second</h1>
With your HTML and just this CSS, the three items will display together on one line:
.center h1 {display: inline;}
Working demo: http://jsfiddle.net/jfriend00/yK7Qy/
FYI, I notice that you're using the same id="title" in multiple places. That won't work for you because a given id can only be present on one object in the page. You probably want to change that to class="title".
It may be easier to just put all the text and image in one <h1> tag like this:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1>
<span class="title">First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span class="title">Second</span>
</h1>
</div>
</header>
</div>
Demo here: http://jsfiddle.net/jfriend00/CHv4k/
Try using display:inline-block; rather than display:inline. I don't have the project in front of me so I'm not sure of this will work.
However, if it does the image will be in the wrong spot. You must simply use vertical-align or margin-top:-##px.
A slightly different approach, using spans, and only one h1 tag:
<div id="header-container">
<header class="wrapper clearfix">
<div class="center">
<h1 class="title">
<span>First</span>
<img src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" alt="" />
<span>Second</span>
</h1>
</div>
</header>
</div>
And I also changed some of the CSS:
.center h1 {display: block; }
// Add vertical align to the image, rather than the h1
.center img {margin: 0 10px; vertical-align: middle;}
Fiddle here