I just learned some HTML and css so I tried to make a simple website with it
using this code
why "problem solving" is pink, not blue?
it's not a real problem but I really didn't know how to solve it
this is the website i've made
<style>
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color: #17202A ;
}
h1{
color: #AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.x{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
</style>
and this is the css on it so what is the proplem ?
Your problem is that tag, used in links, when visited, by default is changed to pink.
In CSS when you use this to change a LINK in your comum state.
a {
color : blue;
}
Using this way, you will change HOVER state :
a:hover {
color : red;
}
This way, you will change VISITED state :
a:visited {
color : orange;
}
And This way, you will change ACTIVE state :
a:active {
color : pink;
}
Each CSS will apply CSS relative to the state of the link.
Try this to solve :
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color:#17202A;
}
h1{
color:#AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.x{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
/* This is the key */
a, a:hover, a:visited, a:active{
color:#0000ff;
}
<html>
<head>
<meta charset="UTF-8">
<title>Only a test</title>
</head>
<body>
<h1>Hello there!</h1>
<h2>Hello there!</h2>
<h2 class="x">Hello there!</h2>
<h3>Hello there!</h3>
<h4>Hello there!</h4>
<ul id="ul1"><li>Test</li></ul>
<ol id="ol1"><li>Test</li></ol>
<ul id="ul2"><li>Test</li></ul>
<ol id="ol2"><li>Test</li></ol>
<p id="p1">Test</p>
<p id="p2">Test</p>
Your link
</body>
</html>
This is due to the fact that all HTML links have 4 states.
link , visited , active and hover.
And for each of these states it takes a particular color in HTML by default. By default in normal state it appears blue.
If you want to override any of these you can use the CSS for that:
eg,
a:visited {
color:orange; /*or which ever color you need*/
}
a:hover {
color: red; /*your CSS value*/
}
Similarly for other two.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class = "xd"><h1>Things you must learn to be good at programming:</h1>
<ol class="ol1">
<li>Proplem Solving</li>
<p id ="p1">Problem solving consists of using generic or ad hoc methods in an orderly manner to find solutions to difficulties.</p>
<li style = "font-size:25px">Logical Thinking </li>
<p id ="p2">Logical thinking is the act of analyzing a situation and coming up with a sensible solution. Similar to critical thinking, logical thinking requires the use of reasoning skills to study a problem objectively, which will allow you to make a rational conclusion about how to proceed.</p>
<li>Mathematics</li><p>Mathematics (from Greek: μάθημα, máthēma, 'knowledge, study, learning') includes the study of such topics as numbers (arithmetic and number theory), formulas and related structures (algebra), shapes and spaces in which they are contained (geometry), and quantities and their changes (calculus and analysis). There is no general consensus about its exact scope or epistemological status.</p>
</ol>
<ul class="ul1"><h2>Things you must learn to be a good front-end developer:</h2>
<li>CSS</li>
<p>Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.</p>
<li>JavaScript</li>
<li>ReactFramework</li>
</ul>
<ol class="ol2"><h3>Things you must learn to be good at CSS:</h3>
<li>CSS specifity</li>
<li>Floats</li>
<li>Positioning</li>
<li>Display</li>
<li>Box Model</li>
<li>CSS Grid</li>
<li>Flex Box</li>
<li>Media Queries</li>
</ol>
<ul class="ul2"><h4>Things you must learn to be good at JavaScript:</h4>
<li>Basic Syntax</li>
<li>OOP</li>
<li>Dom manupilation</li>
<li>Ajax/Fetch Api/Promises</li>
<li>Asynchronous JS(Async/Await)</li>
<li>Scoping/Hoisting/Closures</li>
<li>Refrence/Value</li>
<li>JSON</li>
</ul>
</div>
</body>
<style>
*{
margin: 3px 3px 3px 3px;
padding: 3px 3px 3px 3px;
font-size: 20px;
width: auto;
height: auto;
text-align: center;
font-family: sans-serif;
}
body{
background-color: #17202A ;
}
h1{
color: #AB2C5C;
font-size: 30px;
}
h2{
font-size: 26px;
}
h3{
font-size: 23px;
}
.xd{
color: #4D5656 !important;
}
.ol1{
border: 1px 1px 1px 1px;
border-style: solid;
border-radius: 1px 1px 1px 1px;
font-size: 18px;
}
.ul1{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ol2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
.ul2{
border: 1px 1px 1px 1px;
border-style: solid;
font-size: 18px;
border-radius: 1px 1px 1px 1px;
}
#p1{
width: 150;
height:auto;
border: 3px solid;
font-size: 18px;
margin: 10px;
}
#p1:hover{
Color: darkred;
}
#p2:hover{
Color: darkred;
}
#p2{
border: 3px solid;
height:auto;
font-size: 18px;
width:auto;
margin: 4px;
}
a:visited {
color: blue;
}
</style>
</html>
Related
I'm trying to loop through list items in javascript and prepend some HTML to EACH list item. However, when I create the loop the content only gets prepended to the LAST element.
So in my example, I'm looking for the circle + to be before ALL list items, not just the last.
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
Moving the definition for the _el variable inside of the forEach will do the trick. This will ensure that a new element is created for each iteration of the loop.
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
You were prepending the same element multiple times. I believe you can only have an instance of an element at one point in the DOM, so only the last change stuck.
It works if you create a separate instance of the div for each list item.
var _hp_li = document.querySelectorAll("ul li");
_hp_li.forEach(function(e){
var _el = document.createElement("div");
_el.setAttribute("class","circle plus");
e.prepend(_el);
});
ul{list-style:none;}
.circle{
border: 1px solid #333;
box-shadow: inset 1px 1px 3px #fff;
width: 12px;
height: 12px;
border-radius: 100%;
position: relative;
margin: 4px;
display: inline-block;
vertical-align: middle;
background: #fff;
}
.circle:before,
.circle:after{
content:'';position:absolute;top:0;left:0;right:0;bottom:0;
}
.circle.plus:before,
.circle.plus:after {
background:#000;
box-shadow: 1px 1px 1px #ffffff9e;
}
.circle.plus:before{
width: 2px;
margin: 3px auto;
}
.circle.plus:after{
margin: auto 3px;
height: 2px;
box-shadow: none;
}
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
</ul>
Here is my code:
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
As you see, the hover of tabs which aren't active changes their position a bit. How can I keep them fix forever?
You should apply your borders to non-active tabs as well. You can either match a background color or make them transparent. This way there's no shifting in the elements height.
I've added the following lines to .sort_box_items a.
border: 1px solid transparent;
border-top-width: 3px;
From there it's a matter of adjusting the colors of the borders, no need to re-declare the width and style.
.sort_box {
padding: 25px 0px;
direction: rtl;
font-family: BYekan, 'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title {
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items {
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a {
display: inline-block;
margin-bottom: -1px;
font-size: 14px;
padding: 10px 20px;
border: 1px solid transparent;
border-top-width: 3px;
}
.sort_box_items a:hover {
color: black;
text-decoration: none;
background-color: rgba(132, 141, 149, 0.05);
border-color: rgba(228, 230, 232, 0.25);
}
.sort_box_items .sort_active {
border-color: #ccc;
border-top-color: orange;
border-bottom-color: white;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-color: #ccc;
border-top-color: #f48024;
border-bottom-color: white;
}
a {
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
adding border is causing that:
remove following unless you really need it.
border: 1px solid rgba(228,230,232,0.25);
border-top: 3px solid rgba(228,230,232,0.25);
remove border: 1px solid rgba(228,230,232,0.25); from .sort_box_items a:hover
.sort_box{
padding: 25px 0px;
direction: rtl;
font-family: BYekan,'BYekan', Tahoma;
line-height: 20px;
}
.sort_box_title{
font-size: 20px;
width: 150px;
float: right;
margin-right: 5px;
margin-top: 10px;
}
.sort_box_items{
width: 100%;
border-bottom: 1px solid #ccc;
direction: ltr;
}
.sort_box_items a{
display: inline-block;
font-size: 14px;
padding: 10px 20px;
}
.sort_box_items a:hover{
text-decoration: none;
background-color: rgba(132,141,149,0.05);
border-top: 3px solid rgba(228,230,232,0.25);
color: black;
}
.sort_box_items .sort_active{
border-top: 3px solid orange;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
.sort_box_items .sort_active:hover {
background-color: white;
border-top: 3px solid #f48024;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
border-bottom: 1px solid #fff;
margin-bottom: -1px;
}
a{
color: gray;
text-decoration: none;
}
<div class="sort_box">
<span class="sort_box_title active">لیست سوالات</span>
<div class="sort_box_items">
جدیدترین
جدیدترین
<a class="sort_active" href="?o=newest">جدیدترین</a>
</div>
</div>
I use this beautiful google inspire waves effect (called waves js). It works fine in all button but im having an issue where wave js dont work on a button that was created through jquery (refer to my snippets below). Any ideas, clues, suggestions, recommendations, help to make this work?
$(document).ready(function(){
Waves.attach('.waves_button');
Waves.attach('.green_button');
Waves.attach('.waves_button_checkbox', ['waves-circle', 'waves-float', 'waves-light']);
Waves.init();
$(".test").click(function(){
$("body").append('<button class="green_button">test 2</button>');
});
});
/* green button */
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:disabled{background: #d9d9d9; border: none;}
/* green button hover */
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
/* gray button */
.gray_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #a3a1a1;
background: #b7b7b7;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* gray button when hover */
.gray_button:hover{outline: none;color:#ffffff;background:#a3a1a1 !important;border-bottom: 3px solid #a3a1a1 !important;}
/* yellowgreen button */
.yellowgreen_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #b2be5b;
background: #c6d465;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* yellowgreen button when hover */
.yellowgreen_button:hover{outline: none;color:#ffffff;background:#b2be5b !important;border-bottom: 3px solid #b2be5b !important;}
/* red button */
.red_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #de7171;
background: #f17a7a;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.red_button:hover{outline: none;color:#ffffff;background:#de7171 !important;border-bottom: 3px solid #de7171 !important;}
/* blue button */
.blue_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #00bceb;
background: #00ccff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.blue_button:hover{outline: none;color:#ffffff;background:#00bceb !important;border-bottom: 3px solid #00bceb !important;}
/* all color buttons when active */
.green_button:focus, .green_button:active, .gray_button:focus, .gray_button:active, red_button:focus, red_button:active, yellowgreen_button:focus, yellowgreen_button:active, blue_button:active, blue_button:focus{outline: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fian.my.id/Waves/static/waves.min.js"></script>
<link href="http://fian.my.id/Waves/static/waves.min.css" rel="stylesheet"/>
<button class="green_button test">test</button>
it will work if you move the attach event ( Waves.attach('.green_button') ) after the append if the button like this:
$(".test").click(function(){
$("body").append('<button class="green_button">test 2</button>');
Waves.attach('.green_button');
});
I tested it and it work well.
This library doesn't work this way...
It doesn't "attach" to an active selector list, it attaches to the static list matching the selectors at the time the attach function is called.
You can remedy this simply by attaching each new button as well:
$(document).ready(function(){
Waves.attach('.waves_button');
Waves.attach('.green_button');
Waves.attach('.waves_button_checkbox', ['waves-circle', 'waves-float', 'waves-light']);
Waves.init();
$(".test").click(function(){
var newButton = $('<button class="green_button">test 2</button>');
$("body").append(newButton);
Waves.attach(newButton.get(0));
});
});
/* green button */
.green_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #659d24;
background: #76b729;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.green_button:disabled{background: #d9d9d9; border: none;}
/* green button hover */
.green_button:hover{outline: none;color:#ffffff;background:#659d24 !important;border-bottom: 3px solid #659d24 !important;}
/* gray button */
.gray_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #a3a1a1;
background: #b7b7b7;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* gray button when hover */
.gray_button:hover{outline: none;color:#ffffff;background:#a3a1a1 !important;border-bottom: 3px solid #a3a1a1 !important;}
/* yellowgreen button */
.yellowgreen_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #b2be5b;
background: #c6d465;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* yellowgreen button when hover */
.yellowgreen_button:hover{outline: none;color:#ffffff;background:#b2be5b !important;border-bottom: 3px solid #b2be5b !important;}
/* red button */
.red_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #de7171;
background: #f17a7a;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.red_button:hover{outline: none;color:#ffffff;background:#de7171 !important;border-bottom: 3px solid #de7171 !important;}
/* blue button */
.blue_button{
margin: 0 auto;
display: block;
text-transform: uppercase;
font: normal 13px 'mpregular', sans-serif;
color: #fff;
padding: 7px 7px 3px 7px;
width: 85px;
color: #fff;
border-top: none;
border-left: none;
border-right: none;
border-bottom: 3px solid #00bceb;
background: #00ccff;
text-align: center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
/* red button when hover */
.blue_button:hover{outline: none;color:#ffffff;background:#00bceb !important;border-bottom: 3px solid #00bceb !important;}
/* all color buttons when active */
.green_button:focus, .green_button:active, .gray_button:focus, .gray_button:active, red_button:focus, red_button:active, yellowgreen_button:focus, yellowgreen_button:active, blue_button:active, blue_button:focus{outline: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://fian.my.id/Waves/static/waves.min.js"></script>
<link href="http://fian.my.id/Waves/static/waves.min.css" rel="stylesheet"/>
<button class="green_button test">test</button>
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;
}
I have a Firefox extension that changes a browser's tab color like this:
tabBrowser.tabContainer.childNodes[i].style.backgroundColor = "#8f8";
This code works fine in my development profile, but in the working profile I have a theme installed (Noia 2.0 eXtreme), that sets its own appearance for the tabs, so my code can not change the tab's color. Is it possible to override the theme's settings through the code?
I just do not get it. I have found the skin's CSS file, it seems pretty simple.
tab {
-moz-appearance: none;
padding: 1px 5px 2px 7px;
border-top: 1px solid;
border-right: 2px solid;
border-left: 1px solid;
-moz-border-top-colors: #FFFFFF;
-moz-border-right-colors: #808080 #404040;
-moz-border-left-colors: #FFFFFF;
-moz-border-radius-topleft: 8px;
-moz-border-radius-topright: 8px;
background-color: #CDCED3;
color: #606060;
min-height: 20px !important
}
tab[selected="true"] {
margin-top: 0;
padding: 1px 7px 4px 9px;
font-weight: bold;
background-image : url("chrome://browser/skin/icons/Bookmark-background.png") !important;
border-bottom: 1px solid;
-moz-border-bottom-colors: #FFFFFF;
color: #000000;
}
tab:hover {
color: #000000 !important;
}
Setting
tabBrowser.tabContainer.childNodes[i].style.setProperty("background-image", "none", "important");
according to https://developer.mozilla.org/en/DOM/CSSStyleDeclaration you could use:
tabBrowser.tabContainer.childNodes[i].style.setProperty("background-color", "#8f8", "important");