Fluid width HTML list item using CSS - html

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

Related

<li> in the bottom of sidebar

Image of the sidebar
Hello, how I can put the "Déconnexion" element at the bottom of the sidebar, whatever the screen size of the user.
My code looks like that :
<div class="sidebar">
<div class="profil">
<div class="photo-profil">
<img src="img/users_pdp/zenitsu.jpg" alt="photo-profil">
</div>
<div class="nom">
<span>User</span>
</div>
</div>
<ul class="nav-links">
<li>Ma liste</li>
<li class="genres-li"><a>Genres <span class="arrow_carrot-down"></span></a>
</li>
<li>Films</li>
<li>Séries</li>
<li>Animes</li>
<li>Mon compte</li>
<li class="sign-out"><i class="fa fa-sign-out" aria-hidden="true"></i> Déconnexion</li>
</ul>
</div>
Looking from your image, it looks like you have absolute position for your sidebar.
Since you need the nav-list to take up entirety of the available space, you can make use of flex.
Make your sidebar as a display:flex, with flex-direction: column to retain the layout.
add flex: 1 to your nav-links to make it use of available space.
Change display property of nav-links to flex and direction as column
Add margin-top: auto to your sign-out to move it to the bottom.
Here is a working codepen example.

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

Alignment issue of div in HTML

I have a jquery ui calender that i have placed at left of the page.After calender i have placed second div which is taking full width of the web page.Now i want to add one more div just below the calender but its coming after the second div ..
Here is the link of the image ..
Please see the web page
Here is my HTML..
<div id="datepicker" style="float:left;"></div>
<div id="main" style="float: left; width:83%; margin-left:5px; margin-top:0px;">
<div id="doclist">
<h2>Documents</h2>
<ul id="documents">
<li>Document1</li>
<li>Document2</li>
<li>Document3</li>
<li>Document4</li>
<li>Document5</li>
</ul>
</div>
<div id="wrapper">
<ul id="tabs">
<!-- Tabs go here -->
</ul>
<div id="content">
<!-- Tab content goes here -->
</div>
</div>
</div>
<div id="links" style="float:left; margin-left:0px">
<label name="roomOperation" id="roomOperation" style="font-style:normal; font-size:12px;font-weight:bold;"> Room Operation </label>
<br/><br/>
<li>Check in List</li>
<br/>
<li>Check out List</li>
<br/>
</div>
Why is this happening..
Please help me to remove the margin between calender and my hyperlink menu..
If you use position: absolute; on the #links div, and set the CSS top: ; value to the same height as your calendar, plus whatever you want as a gap between the two, say 5px, and the left: 0px; this should work.
You'll also need to surround all 3 divs with a containing div with CSS position: relative to make the absolute positioned div keep within the boundaries of the area you want it to be in.
I also believe you could use float: right; on the documents div and float: left; on the other two, but I'm not 100% sure on this, it's worth a try though.