I'm designing a web UI using CSS + HTML and I'm in need of developing the following design.
I've designed the stucture as following.
<div class="slider-pager-container">
<div class="content">
<div class="slider-pager" id="slider-pager">
<a data-slide-index="0" href=""><img height="90px" src="/images/slider/thumbs/image_1_thumb.jpg" /></a>
<a data-slide-index="1" href=""><img height="90px" src="/images/slider/thumbs/image_2_thumb.jpg" /></a>
<a data-slide-index="2" href=""><img height="90px" src="/images/slider/thumbs/image_3_thumb.jpg" /></a>
<a data-slide-index="3" href=""><img height="90px" src="/images/slider/thumbs/image_4_thumb.jpg" /></a>
<a data-slide-index="4" href=""><img height="90px" src="/images/slider/thumbs/image_5_thumb.jpg" /></a>
</div>
</div>
</div>
The problem is that I want the images to be variable width but a fixed height. I've done that by using the height attribute in the img tab. I've used the following CSS to position the imgs in even positions.
.slider-pager{
display:table;
}
.slider-pager a{
display:table-cell;
}
this does the job but, the parent element is a fixed width of 970px and if the total width of all the imgs is less than that amount, it renders a huge gap in between two images. What I want to achieve is whatever the image width is, ( less than the parent element ) position the img tags in the center of the page. How can I achieve this without using CSS3 properties since I want this to be compatible with IE 6+.
CSS
.slider-pager{
margin: 0 auto;
}
Like this? - Fiddle
Related
I almost have my social media icons the way I want them. The problem that I'm having is that my icons show vertical when I want them horizontal. As soon as I added floating text to the code, the icons switched from horizontal to vertical. I can't figure out how to get them horizontal again without taking out the floating text that I want to keep. I plan to use this code in the footer of my wordpress site with the custom html option in the widget options.
As soon as I added floating text to the images, the icons switched from horizontal to vertical. I cant figure out how to keep the images horizontal and I don't want to get rid of the floating text.
How can I line up the images horizontally?
<center>
<div title="twitter">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/eb71c669616b73376b4046d59aa72acd-full.jpg" border="0" / alt="twitter_" src="https://ibb.co/hXDMqVP" width="85" height="85">
</div>
</a>
<div title="patreon">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/7c336d8d73312b913f3cb0d3d29f924f-full.jpg" border="0" / border="0" alt="patreon" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
<div title="ko-fi">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/afe4f098fcf4ce4781aa0a0bea7c5f5d-full.jpg" border="0" / alt="ko-fi" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
</center>
The center tag is obselete. Wrap it with a div and set it to flex
.icon-container {
display: flex;
justify-content: space-between;
}
<div class="icon-container">
<div title="twitter">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/eb71c669616b73376b4046d59aa72acd-full.jpg" border="0" / alt="twitter_" src="https://ibb.co/hXDMqVP" width="85" height="85">
</div>
</a>
<div title="patreon">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/7c336d8d73312b913f3cb0d3d29f924f-full.jpg" border="0" / border="0" alt="patreon" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
<div title="ko-fi">
<a href="" target="_blank"><img src="https://cdn1.imggmi.com/uploads/2019/6/19/afe4f098fcf4ce4781aa0a0bea7c5f5d-full.jpg" border="0" / alt="ko-fi" src="https://ibb.co/hXDMqVP" width="100" height="100">
</div>
</a>
</div>
<div> elements are "block-level elements":
By default, a block-level element occupies the entire space of its parent element (container), thereby creating a "block." ... Browsers typically display the block-level element with a newline both before and after the element. You can visualize them as a stack of boxes ... A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
One basic method to display the items horizontally is to add the title attributes directly to the <a> elements, which are "inline elements":
Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content ... An inline element does not start on a new line and only takes up as much width as necessary.
Here's a demonstration:
#container {
text-align: center;
}
<div id="container">
<a href="#" target="_blank" title="twitter">
<img src="" border="0" width="50" height="50">
</a>
<a href="#" target="_blank" title="patreon">
<img src="" border="0" width="50" height="50">
</a>
<a href="#" target="_blank" title="ko-fi">
<img src="" border="0" width="50" height="50">
</a>
</div>
For more information, see CSS Layout - Normal Flow.
The above is a very simple layout. Other more sophisticated methods might be useful, for example if you want to distribute the items across the screen with space between them.
See CSS Layout Guides.
Also note that the HTML in your code seems to be malformed. The <div> and <a> elements are not nested correctly. The <img> elements have duplicate attributes and misplaced slashes. And, as others have mentioned, the <center> element is obsolete.
You can add float: left; property for every div contains an image.
I had a front image on the page, inserted like this:
<h1>
<a href...>
<img .../>
</a>
</h1>
Now I want to add another image link, to overlay first one (it is smaller image so it would be Ok):
<h1>
<a href...>
<img .../>
</a>
<a href... style="position:relative;top:-150px;">
<img ... style="height:150px"/>
</a>
</h1>
It does what I want, but the height of the parent H1 is still enlarged by these 150px leaving silly empty space.
I made height of H1 predefined constant to solve this, however I'm interested in more proper / elegant solution.
First I need to mention if you are using inline styles remove it and add an external style sheet.
Below I am giving the answer with inline styles just because you have used them too in your question .Try the following:
<h1 style="position:relative;">
<a href...>
<img .../>
</a>
<a href... style="position:absolute;top:0;">
<img ... style="height:150px"/>
</a>
</h1>
I'm facing I think odd problem. I have website http://www.spacemind.ggpro.pl/ar/ and I'm trying to make this top menu (black rectangle) Stick to the left side of my Wrapper div.
<div style="z-index:9999;background-color:#000;right:0px;width:80%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
Now I use value width:80% but I hope that there is some way to stick it to left side of wrapper. I want this menu to be always (no matter what resolution user uses) in the position as in the image below: http://i.stack.imgur.com/QMLvO.jpg
Try this code:
<div style="width:980px;margin:auto;position:relative;">
<div style="z-index:9999;background-color:#000;right:0px;width:100%;position:absolute;margin: 0px auto;height:100px;color:#fff;">
<div style="padding:20px;">
<a href="index.html">
<img src="img/logo.png">
</a>
</div>
</div>
</div>
Of course inline styling is a bad idea. You should put it in some classes.
To the first div that comes immediately after your body tag assign the following property:
left: 0;
<div class="img">
<a target="_blank" href="slideshow/slideshow2.jpg"><img src="slideshow/slideshow2.jpg" alt="Klematis" width="110" height="90"></a>
</div>
<div class="img">
<a target="_blank" href="slideshow/slideshow3.jpg"><img src="slideshow/slideshow3.jpg" alt="Klematis" width="110" height="90"></a>
That is my code that I am using. www.goparkfast.com in the pictures section if you want to see how it is set up on my site.
Set containing divs to float: left and width: 25%.
Try putting the images in divisions and then put a certain size of the division like 25% and lastly mark it to float:left
I am using bootstrap v2.3.1, and I am trying to understand how to fix one of my images.
In the example image link below, the top image is what I want all the images to look like when the screen is resized to it's smallest size (cellphone size), and the bottom image is what's giving me an issue:
http://i.imgur.com/BH02ONQ.jpg
For some reason it has more space on the sides of the 2nd image than it should have.
(NOTE: My screenshot is altered to show both the correct image and the wrong image. The code below is what I am actually using)
My code is this:
<section>
<ul class="thumbnails">
<li>
<a class="thumbnail" rel="group" href="images/r1.jpg">
<img src="images/thumbnails/r1s.jpg" alt="" />
</a>
</li>
<li>
<a class="thumbnail" rel="group" href="images/r2.jpg">
<img src="images/thumbnails/r2s.jpg" alt="" />
</a>
</li>
</ul>
</section>
So I don't know if it's an issue with one of the settings in the CSS file, but since I am using the .thumbnail class, I'm guessing it has to do with that?
Does anyone know how to make it so that I don't get all that extra space around my images when using the .thumbnail class?
My solution is set the CSS to the <ul class="thumbnails"> with style="max-width: 100px" where 100px is smallest width size of image in list.