This is my page
My css for the above web page looks fine on browsers on the desktop, however, on mobile browsers the border around the food ingredients are displayed incorrectly:
Relevant CSS :
.page_title {
text-transform:capitalize;
text-align:center;
}
.food_list {
text-transform:capitalize;
}
.listing {
text-indent:10px;
margin-right:1500px;
margin-left:10px;
color:black;
background-color:lightblue;
border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
-khtml-border-radius: 10px 20px 30px 40px;
}
.ul {
list-style:none;
}
p {
text-transform:none;
}
p span {
display:block;
}
try this:
jsFiddle
.listing {
text-indent: 10px;
margin-left: 10px;
color: black;
float: left;
background-color: lightblue;
border-radius: 10px 20px 30px 40px;
-moz-border-radius: 10px 20px 30px 40px;
-webkit-border-radius: 10px 20px 30px 40px;
-khtml-border-radius: 10px 20px 30px 40px;
}
h2{
clear:both;
}
Related
The text hangs outside of the DIV container. Perhaps I have the wrong elements in my CSS. On my actual website it hangs below but when I check snippet here it doesn't hang. Here is the code.
screenshot of problem
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
left: -350px;
top: 27px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
}
<div class="bodybox">
Print
</div>
.bodybox {
height:65px;
width:250px;
background-color:#000000;
margin: auto;
-webkit-box-shadow: 0px 8px 15px 0 #000000;
-moz-box-shadow: 0px 8px 15px 0 #000000;
box-shadow: 0px 8px 15px 0 #000000;
border: solid 2px #ffffff;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
position: relative;
//left: -350px;
font-family: 'Jura', serif;
font-size: 45px;
color:#ffffff;
text-align:center;
cursor:pointer;
display:flex;
}
.bodybox span{
margin : auto;
}
<div class="bodybox">
<span>Print</span>
</div>
Is this the same that you are looking for?
Here is JSFiddle
Hope this helps.
Have a look at this fiddle
http://jsfiddle.net/ArvindSadasivam/v8dtj2ke/1/
divs:
<button class="typeBtn" id="">
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />Flatfront</button>
<button class="typeBtn" id="">Flatfront TWICE
<img class="iconTick" src="images/buttons/iconTick.png" alt="tickIcon" />
</button>
CSS:
.typeDiv {
position : relative;
margin : 20px 0 0 20px;
font-family : OpenSans-Regular;
}
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
}
.iconTick {
position : absolute;
width : 25px;
left : 5%;
top : 20%;
}
I want the Flatfront twice to be on the same position vertically.
Basically align them properly.
How do I do it?
Add
vertical-align: top;
Into your .typeBtn Class
Your Class should looks like this
.typeBtn {
position: relative;
width: 110px;
height: 40px;
box-shadow: 0 1px 3px #424242;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
border: 1px solid #D7D7D7;
color: #000000;
text-align: right;
font-family: OpenSans-Regular;
font-size: 0.7em;
padding: 0px 40px;
margin: 15px 10px 0px 0px;
vertical-align: top; /*Changed this */
}
Change the following styles in .typeBtn like
padding:0px;
text-align:center;
I try to implement a tab bar with extra padding on hover state.
But the problem is on hover state actually it moves parent div.
You can see the html below;
<div id="statNav">
Gogus
Kol
Gogus
Gogus
Gogus
Omuz
Gogus
</div>
and css;
#statNav{
width:100%;
border-bottom:2px solid #9B2F2C;
overflow:auto;
}
#statNav a{
float:left;
background-color:#333333;
color:white;
font-size:12px;
font-weight:bold;
text-align:center;
width:62px;
padding-top: 5px;
padding-bottom:5px;
border-right: 1px solid #777777;
}
#statNav a:first-child{
-webkit-border-radius: 5px 0px 0px 0px;
border-radius: 5px 0px 0px 0px;
}
#statNav a:last-child{
-webkit-border-radius: 0px 5px 0px 0px;
border-radius: 0px 5px 0px 0px;
border-right:none;
width:63px;
}
#statNav a:hover{
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
background-color:#9B2F2C;
padding-top: 15px;
}
Here is the working sample;
http://jsfiddle.net/Kg3p4/
How can i solve it?
You can solve this by using margins on the non-hovered tabs and removing them on hover to counter the increased padding size. Note that the size of the margins is equal to the difference between your hovered and non-hovered padding.
#statNav a{
margin-top: 10px;
padding-top: 5px;
}
#statNav a:hover{
margin-top: 0;
padding-top: 15px;
}
I've updated your jsFiddle with a simple demo of this solution.
You can modify the hover state a bit by adding a negative margin-bottom equal to the padding difference. Something like this :
#statNav a:hover{
-webkit-border-radius: 5px 5px 0px 0px;
border-radius: 5px 5px 0px 0px;
background-color:#9B2F2C;
padding-top: 10px;
margin-bottom: -5px;
}
http://jsfiddle.net/Kg3p4/5/
I'm not good in css, so please try to help me
I have this css code
#mo-stats-w1 {
background: url("http://i48.tinypic.com/108dbix.png") 0px 0px repeat-x;
/*height: 143px;*/
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin: 10px 0px 0px 0px;
padding-bottom: 10px;
background-color: #3EC4CD;
}
#mo-stats-w2 {
padding: 12px 0px 0px 15px;
}
#mo-stats-w1 ul {
padding: 0px 0px 0px 0px;
margin: 0px 0px 1px 0px;
height: 59px;
}
#mo-stats-w1 ul li {
display: block;
list-style: none;
padding: 1px;/*0px 0px 0px 0px;*/
margin: 0px 1px 0px 0px;
width: 174px;
height: 59px;
float: left;
}
ul#mo-stats-r1 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px 0px no-repeat; }
ul#mo-stats-r2 li { background: url("http://i50.tinypic.com/23j0bcg.png") 0px -59px no-repeat; }
#mo-stats-w1 ul li strong {
font-size: 24px;
height: 22px;
font-family: Arial, "Nimbus Sans L", "FreeSans";
font-weight: bold;
color: #1774C2;
text-shadow: 1px 1px 1px white;
display: block;
padding: 0px 0px 0px 0px;
margin: 10px 0px 0px 11px;
}
#mo-stats-w1 ul li span {
font-size: 13px;
font-weight: bold;
color: #3e3e3e;
display: block;
padding: 0px 0px 0px 0px;
margin: 0px 0px 0px 11px;
}
and this html code
<div id="mo-stats-w1">
<div id="mo-stats-w2">
<ul id="mo-stats-r2">
<li><strong>Status</strong></li>
<li><strong>100</strong> <span>Points</span></li>
<li><strong>30</strong> <span>Pending Points</span></li>
<li><strong>0</strong> <span>Direct Referrals</span></li>
<li><strong>Total</strong></li>
<li><strong>2</strong> <span>Links</span></li>
<li><strong>114</strong> <span>Views</span></li>
<li><strong>7</strong> <span>Unlocked Views</span></li>
</ul>
</div>
</div>
So the layout will be
Change the background for "Status" and "Total" to #4EC772 and background hover #7DD798 and the color for both words to be #FFFFFF
To be something like this
How i can do that please ?
jsfiddle: http://jsfiddle.net/WwY2v/
Thanks
You need to use the nth-child() pseudo class to target those two <li> and do the same for the color: #fff; except specify the <strong> element after ..
Updated fiddle: http://jsfiddle.net/WwY2v/2/
This is what I added:
#mo-stats-r2 li:nth-child(4n + 1):hover {
background: #4EC772;
}
#mo-stats-r2 li:nth-child(4n + 1) strong:hover {
color: white;
}
Simply add a class to the required elements like:
<li class='highlight'><strong>Status</strong></li>
...
...
<li class='highlight'><strong>Total</strong></li>
And use the following css:
.highlight {
color:#FFFFFF; /* normal text color */
background-color:#4EC772; /* normal bg color */
}
.highlight:hover, .highlight:focus {
color:#FFFFFF; /* hover text color */
background-color:#7DD798; /* hover bg color */
}
I'm starting out in HTML and CSS.
I have a div element on the page, which doesn't fill the whole page.
In it- there's a ul element and some list items in it.
I want to put the list 227px from the top of the div element, but I can't manage to accomplish this- it pushes it more.
Also- between the list items I want a margin of 40 pixels, but it also does more.
What's the problem?
Here's my code:
Html:
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li><a href="#" >ONE</a></li>
<li><a href="#" >TWO</a></li>
<li><a href="#" >THREE</a></li>
<li><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>
CSS:
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
#MenuItems li {
text-align:center;
position:relative;
padding: 4px 10px 4px 10px;
margin-right:30px;
margin-bottom: 40px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
If you want to measure the pixels- you can install this: http://www.mioplanet.com/products/pixelruler/
(click to rotate)
Thanks!
You should start your styling by resetting all elements so that each browser shows them identical.
You can check one of the many CSS reset libraries around there, but for starting something like this would be already good:
* {
margin: 0;
padding: 0;
}
This, appearing for first in your CSS stylesheet, will remove all margins and paddings for each element, so you can add them later only in the elements you want.
Update
If you want to restore some element margins or paddings after that code (for example in body) simply write a new rule after the one before, like
body {
padding:10px; /* Add 10px to body only */
}
The total height of every list item is height + padding + border + margin.
Change the padding of #MenuItems li into:
padding: 0 10px 0 10px;
See http://jsfiddle.net/NGLN/rBjrD/1/
Add margin:0; padding:0 for body
In #MenuItems li replace:
padding: 4px 10px 4px 10px;
with:
margin: 4px 10px 4px 10px;
This will make the distance equal to 40px between buttons.
Try absolute positioning:
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
position:relative;
}
.Menu {
position:absolute;
top:227px;
right:0;
padding-right: 50px;
float:right;
}
try this:
<style>
body {
background-color: Gray;
}
.Hashta{
width:874px;
height:650px;
background-color:black;
margin: auto auto 50px auto;
border-radius: 20px;
border: 3px solid darkgray;
moz-box-shadow: 2px 2px 10px black;
webkit-box-shadow: 2px 2px 10px black;
box-shadow: 2px 2px 10px black;
}
.Menu {
margin-top: 227px;
padding-right: 50px;
float:right;
}
#MenuItems {
list-style:none;
}
.secLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: 40px;
border:none;
}
.firstLi{
text-align:center;
position:relative;
padding: 0px 10px 0px 10px;
margin-right:30px;
margin-top: -16px;
border:none;
}
#MenuItems li a{
width: 280px;
height: 70px;
background-color: green;
color:White;
font-family:Arial, Helvetica, sans-serif;
font-size:24px;
display:block;
outline:0;
text-decoration:none;
text-shadow: 1px 1px 1px #000;
line-height: 70px;
}
</style>
<body>
<div class="Hashta">
<div class="Menu">
<ul id="MenuItems">
<li class="firstLi"><a href="#" >ONE</a></li>
<li class="secLi"><a href="#" >TWO</a></li>
<li class="secLi"><a href="#" >THREE</a></li>
<li class="secLi"><a href="#" >FOUR</a></li>
</ul>
</div>
</div>
</body>