Ordered List Items with Images that overlap - html

I cant seem to get my ordered list have images that overlap, but when you hover over them it expands or shows the full image, im guessing this is done best with CSS and onhover function?
Here is the code i have, where i can get them to stack, but not sure how to make it when you hover over it pops up a bigger image of the card like that.
<ul id="sortable" style="list-style: none;padding: 0;">
<li class=ui-state-default >
<div style=height:30px>
<img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
</div>
<div style=height:30px>
<img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
</div>
<div style=height:30px>
<img src="data/ZEN/Adventuring_Gear.jpeg" style="width:233px;height:311px;border-radius:10px;">
</div>
</li>
</ul>

Related

header and footer column width problem - joomla

I want to style the header after the menu to be the same as the header before the menu.
Here is the page: https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6
I cannot figure out why the column of the "Language switcher" is displayed so big. I want it to be as small as the one on top.
Also I would like the footer background of the top footer to be displayed in full width of the page. The same as the footer bellow.
Which css styles should I change and how.
Any help will be really appreciated.
Language switcher: the class 'col-md-4' makes the width 33.33%. The html (with inline styling) will have the wanted result.
<div class="col-md-4 duration-500" style="text-align: right;">
<div id="lang_and_search" style="background-color:#efefef;padding:5px;width: auto;display: inline-block;">
<div class="rspbld-module" style="padding:5px;">
<div class="mod-languages">
<ul class="lang-inline" dir="ltr">
<li><img src="/media/mod_languages/images/bg.gif" alt="Български" title="Български">
</li>
<li class="lang-active">
<a href="https://www.nikolay100.com/en/?option=com_rspagebuilder&view=page&id=6">
<img src="/media/mod_languages/images/en.gif" alt="English (UK)" title="English (UK)"> </a>
</li>
</ul>
</div>
</div>
</div>
</div>
For the footer, it's because it's within the class 'container'. This has a max-width. Move the footer outside the container.

Tripadvisor fit to main div

Hi I want to put my tripadvisor into a bigger div..(width, height)..and with width it's not a problem, but I can't strech to fit with the height too.. What can I do?
<div style="width:1000px; height:500px;">
<div id="TA_selfserveprop883" class="TA_selfserveprop">
<ul id="WFAboR" class="TA_links DuIxc6Zcnwl">
<li id="7njRA4" class="iXvW5GLL">
<img src="https://www.tripadvisor.com/img/cdsi/img2/branding/150_logo-11900-2.png" alt="TripAdvisor" />
</li>
</ul>
</div>
</div>
UPDATE:
Here is how it looks, I want to cover the part where is the arrow..to fit complete
Here image.
P.S: The width and height of the main are dynamic.

Margin on inline pic moving every other object

I have the following Code. All elements should be in the same line in my header, so I've put them all to inline-blocks.
Now they all move down a bit because of the height of the picture.
If I move down the picture a bit with margin or padding the whole line moves down.
What would be the best approach to keep everything in a line and have the center of the picture be inline and not at the bottom as it is now?
<header>
<div id="headerBox">
<h1>hi</h1>
<p>hello<span>/</span> Pw <span>(ID123)</span></p>
<img src="plus.png" id="plus" />
<span id="kunden">Kunden/Projekt anlegen</span>
<input type="text" />
<img src="girl.png" id="girl">
<div id="navArrows">
<ul>
<li>Projektübersicht</li>
<li>Konfigurieren</li>
<li>Ergebnisse</li>
<li>Landingpage</li>
<li>Prüfen</li>
</ul>
</div>
</div>
</header>
To achieve this layout, one can use an unordered list with the CSS display property on each item set to inline-block.
<ul class="box">
<li>
<a href="#">
<img src="plus.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li>
<li>
<a href="#">
<img src="girl.png">
<h4>Your text</h4>
<p>Your text</p>
</a>
</li><!-- more list items -->
</ul>
When the items have different heights, you’ll see some strange stacking issues. (The second item may be taller or shorter. With floats that fifth item catches on it.)
Instead of float, I give each list item a width and change the display from block to inline-block.
ul.box li {
width: 200px;
display: inline-block;
}
For more information about this styling, this tutorial may help:
http://blog.teamtreehouse.com/using-inline-block-to-display-a-product-grid-view
Hope this helps!
The solution to my Problem was the css attribute
vertical-align: text-top;
on the picture.
More about it here http://www.w3schools.com/cssref/pr_pos_vertical-align.asp

Fix spacing around an image using the .thumbnail class in Bootstrap?

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.

Fluid width HTML list item using CSS

Is it possible to create a fluid width LI with background imaage that adjusts its size based on content and doesn't follow the width of a parent DIV.
If possible, using only CSS.
<div id="navbody">
<!--Button Start-->
<ul id="button">
<li>
Home
<div class="btnright"></div>
</li>
<li>
About Us
<div class="btnright"></div>
</li>
</ul>
<!--Button End-->
</div>
LI contains a background:
NOTE: this has an irregular left shape
Then a DIV is used to end the irregular right shape
The menu is contained in a parent div with a fixed width
[ ]
[[ Home ] [ About Us ] ]
As you can see, I want the LI's to auto adjust based on content.
Oh. I didn't understand your question properly until you posted the code sample.
Here's a mock-up:
<div style="width: 500px;border: 1px solid Blue;">
<ul style="padding-left:0;margin-left:0;">
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
<li style="list-style-type: none;">
<div style="float:left; height:24px;width:20px;background-color:Green;"></div>
<div style="float:left;height:24px;background-color:Yellow;">Some other content here</div>
<div style="float:left; height:24px;width:20px;background-color:Red;"></div>
<div style="clear:both;">
</li>
</ul>
</div>
The green div is your left part of the image, the red one is your right part of the image and the yellow one is your repeating center of the image. To do this you should slice your image into these 3 parts and add them as backgrounds for the 3 divs. Just fiddle with the dimension to make it suite your desired output.
Hope this helps,
Alin