I've got the following div structure in my html layout.
<div class='main-container'>
<h5 class='hotel-name'></h5>
<div class='hotel-price'></div>
</div>
and the css is as following for each element.
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
}
.hotel-price {
display: inline;
float: right;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
I've not defined any width to any element. The content in each element is drawn dynamically. for example, the following image shows how the structure looks after all the data is loaded.
but my problem is there are some occasions where the name is long and the price just drops down.
example image of the issue.
How can I fix this issue. I'm building this layout using bootstrap 3.1 and my custom css.
Can you update your CSS?
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: inline-block;
white-space: nowrap;
word-wrap: break-word; // <- New Line
}
Here's the reference on MDN
try this, use clearfix class
<p class="clearfix"></p>
Here is a working example using Flex box.
Flexbox is the new standard of designing and aligning.
http://jsfiddle.net/maxspan/t4QuH/
#mainDiv{
display:flex;
flex-wrap: nowrap;
width: 700px;
background-color: lightgray;
}
#innerDiv{
box-shadow:box-shadow: 2px 2px 2px #888888;
width:200px;
height:200px;
border:1px;
background-color: green;
padding:12px;
}
Using float is not a good idea if you just want the price to stay in the right lower corner.
position:absolute div in a position:relative div will help you better position your price tag.
Example:
.main-container {
position: relative;
border-bottom: 1px solid #EBEBEB;
height: 55px;
}
.hotel-price {
display: inline;
// ========== Here is the change =================
position: absolute;
bottom: 0px;
right: 0px;
// ===============================================
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
You can try with display:table-cell css property
.hotel-name {
font-size: 13px;
font-weight: bold;
position: relative;
padding: 10px 0 0 20px;
display: table-cell;
white-space: nowrap;
}
.hotel-price {
display: table-cell;
font-size: 100%;
font-weight: bold;
height: 55px;
padding: 6px 25px;
border-top: none;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
border-left: 1px solid #EBEBEB;
-webkit-backface-visibility: hidden;
-webkit-perspective: 1000;
color: #3CA7B4;
}
Related
I was creating a replica of google webpage. I have everything finished but my dropdown menu for the apps icon only shows up halfway. I've already tried increasing the height etc. I think its not showing after the header portion. Please suggest any possible blunders I may have committed.
CSS
<style>
.menu-btn
{background-color:#f5f5f5 ;
color: black;
font-family: sans-serif;
border: none;}
.dropdown-menu {
position: relative;
display: inline-block;
position: relative;
display: inline-block;
border:1% solid #3c4043;}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.2);
right: 0;
align-items:center;
border-radius: 3%;
border:1% solid #black;
width:300px;
height: 500px;
cursor: pointer;}
</style>
**<javascript>**
<script>
let dropdownBtn = document.querySelector('.menu-btn');
let menuContent = document.querySelector('.menu-content');
dropdownBtn.addEventListener('click',()=>{
if(menuContent.style.display===""){
menuContent.style.display="block";}
else {
menuContent.style.display="";}
})
</script>
You have an extra : in the height for your menu-content class.
There are also a few other bugs in the CSS. I created a jsfiddle that might help you figure out what's wrong with your own code.
https://jsfiddle.net/6ck7rq53/6/
I created a simple HTML dropdown using your own classes:
<html>
<body>
<div class="dropdown-menu">
<button class="menu-btn">Dropdown
<div class="menu-content">
<p>One</p>
<p>Two</p>
<p>Three</p>
</div>
</button>
</div>
</body>
</html>
and I fixed your CSS bugs:
.menu-btn {
background-color: #f5f5f5;
color: black;
font-family: sans-serif;
border: none;
}
.dropdown-menu {
position: relative;
display: inline-block;
border: 1px solid #3c4043;
height: auto;
}
.menu-content {
display: none;
position: absolute;
background-color: #f5f5f5;
min-width: 160px;
box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.2);
right: 0;
align-items: center;
border-radius: 3%;
border: 1px solid black;
width: 300px;
height: 500px;
cursor: pointer;
left: 0;
}
Need help in making 2 bordered heading, one should according to content provided in HTML and second should be 100%, image is provided for reference.
I have tried it here
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
}
h3:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 1px solid #000;
display: inline-block;
}
h3.display_inline {
display: inline-block;
}
<h3>HOT DEALS</h3>
<h3 class="display_inline">HOT DEALS</h3>
Problem what I am facing is both are running parallel, if I made it display: inline-block, then it will remain according to content and if display: block, then both will be 100%.
I am also open for JS solution :)
Help in the regards will highly appreciated.
Thanks in Advance.
You can add additional element (e.g. span) inside your h3 element, and style it separately like this:
h3 > span{
border-bottom: 2px solid blue;
display: inline-block;
}
h3{
padding-bottom: 10px;
border-bottom: 2px solid red;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
Thanks Champs for the contribution,
I have found my solution, pasting code to help others.
h3 {
position: relative;
font-size:24px;
text-transform: uppercase;
}
h3 > span {
border-bottom: 3px solid #e64e52;
display: inline-block;
position: relative;
z-index: 10;
padding-bottom: 15px;
}
h3:before {
border-bottom: 1px solid #e5e5e3;
position: absolute;
left: 0px;
bottom: 1px;
content: "";
width: 100%;
}
<h3 class="display_inline">
<span>HOT DEALS</span>
</h3>
<h3 class="display_inline">
<span>Inspiration & News</span>
</h3>
Special thanks to #Chris for the solution, I have use his Idea to make it exactly what I needed.
h3 {
position: relative;
font-size: 24px;
font-weight: 700;
color: #000;
text-transform: uppercase;
padding: 0 0 12px;
border-bottom: 3px solid #e64e52;
display: inline-block;
}
span {position:relative;
padding: 0;
width:100%;
display:block;
height: 66px;
}
span:before {
content: '';
position: absolute;
bottom: 0px;
width: 100%;
left: 0px;
border-bottom: 3px solid #ccc;
display:block;
}
<span><h3>HOT DEALS</h3></span>
I'm trying to achieve the below result by ONLY using the "labels" class (eg. I don't want the "arrow" class/html). Is this possible with pseudo elements only? Like ".labels:tesing{}" etc.
.labels{
position: relative;
display: inline-block;
vertical-align: top;
font-size: 16px;
font-weight: bold;
font-family: tahoma;
padding: 5px;
color: #fff;
border-radius: 5px;
background-color: red;
}
.labels:before{
display: inline-block;
vertical-align: top;
font-size: 12px;
content: '$';
}
.labels:after{
display: inline-block;
vertical-align: top;
margin-left: 1px;
font-size: 12px;
content: 'USD';
}
.arrow{
position: absolute;
bottom: -10px;
left: 20px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid blue;
}
HTML:
<div class="labels">199
<div class="arrow"></div>
</div>
JS Fiddle:
http://jsfiddle.net/edcxsw1/w9z7vvxw/
This is not possible with CSS only, but pretty simple with jQuery. Just that way:
$('.labels').append('<div class="arrow"></div>');
FIDDLE: https://jsfiddle.net/lmgonzalves/w9z7vvxw/3/
There are two types of help text container I have. One is in <div> other is in <span>
I wrote a css both in one style. It's working good but those <div> and <spans> includes an arrow styled child <div> and <span>. I tried to combine that .arrow styles but it failed in practice. Is there a way combine those same styles?
HTML example for <div>:
<div class="helptext" id="{{ id_for_label }}">
<div class="arrow"></div> Helptext is in here
</div>
HTML example for <span>:
<span class="helptext" id="{{ id_for_label }}">
<span class="arrow"></span> Helptext is in here
</span>
CSS for both:
div[class="helptext"],span[class="helptext"] {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
CSS .arrow example for <div>:
div[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
CSS .arrow example for <span>:
span[class="helptext"] .arrow {display: block; position: absolute; border: 10px solid transparent;
border-bottom-color: #3c578c; top: -20px; right: 10px;}
I can't combine last two css.
You are missing .arrow in both selectors for your css
Use this
div[class="helptext"] .arrow,span[class="helptext"] .arrow{
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
I think you can .helptext .arrow as selector, if you don't have another element with classname helptext.
You should use below code:
.helptext {
position: absolute;
display: none;
right: 15px;
margin-top: 3px;
padding: 10px;
border: 1px solid #3c578c;
background-color: #FCFCF0;
opacity: 0.9;
color: red;
border-radius: 5px;
box-shadow: 5px 5px 15px 1px dimgray;
text-align: justify;
font-size: 12px;
z-index:100000;
}
.helptext .arrow {
display: block;
position: absolute;
border: 10px solid transparent;
border-bottom-color: #3c578c;
top: -20px;
right: 10px;
}
http://jsfiddle.net/rajkumart08/8p2mZ/2/embedded/result/
When I click the more options a popup comes, but when I reduce the width and height if the browser using mouse... The popup does not move along with more options div...
How do I fix the issue? Please help.
My code is here: http://jsfiddle.net/rajkumart08/8p2mZ/3/
.openme {
display: inline-block;
padding: 10px;
cursor: pointer;
padding: 0;
margin: 0 20px 0 0;
width: 200px;
height: 200px;
list-style-type: none;
background: white;
border: 1px solid #999;
line-height: 200px;
padding: 0;
}
#menu{
display: inline-block;
opacity: 0;
visibility: hidden;
position: absolute;
padding:0px;
border: solid 1px #000;
margin: 0 auto 0 auto;
background: white;
top: 350px;
left: 649px;
-webkit-box-shadow: 0px 2px 13px rgba(50, 50, 50, 0.48);
}
#menu.show {
opacity: 1;
visibility: visible;
}
#menu a{
float:left;
/*margin: 7px;*/
padding: 10px 20px;
font-weight: bold;
font-size: 10px;
text-align: center;
background: white;
color: black;
word-wrap: normal;
/*border: 1px solid red;*/
}
One way is to specify the position of the menu in terms of % of the windows size.
E.g.
Instead of
top: 350px;
left: 649px;
specify
top: 15%;
left: 15%;
This will ensure that the menu is always positioned w.r.t the width of the window upon resize.
First, thing is give a min-width to parent container - .app-home div and make it `position:relative'.
Next, use right position instead of left for menu div.