I have a div that contains links (a href). All other margins are working with a href but Top margin is not working with a href. I want to place links in middle but because of not working of top margin it is not being possible. I heared by setting position or display it can work. Please suggest a cross broswer solutions for it.
div.MainContainer div.Links
{
height: 57px;
width: 100%;
border-top: solid 0px #404040;
border-left: solid 2px #404040;
border-right: solid 2px #404040;
border-bottom: solid 2px #404040;
background-image: url("../Images/links_background.png");
}
div.MainContainer div.Links a
{
font:12px verdana;
color:White;
margin:10px;
border:dashed 1px white;
margin:15px 20px 20px 20px ;
width:100px;
}
You need to float element to make margin working or use padding instead.
div.MainContainer div.Links a
{
float: left;
font:12px verdana;
color:White;
margin:10px;
border:dashed 1px white;
margin:15px 20px 20px 20px ;
width:100px;
}
Height of inline elements can't be changed, just use display:inline-block; on your links.
Try below. I added overflow: hidden to the top definition and display: block and float: left to the bottom definition. The first addition clears the float being added, and the last two allow the margin on the links to work correctly.
div.MainContainer div.Links
{
height: 57px;
width: 100%;
border-top: solid 0px #404040;
border-left: solid 2px #404040;
border-right: solid 2px #404040;
border-bottom: solid 2px #404040;
background-image: url("../Images/links_background.png");
overflow: hidden;
}
div.MainContainer div.Links a
{
font:12px verdana;
color:White;
margin:10px;
border:dashed 1px white;
margin:15px 20px 20px 20px ;
width:100px;
display: block;
float: left;
}
Try padding-top on the div.Links rather than margin-top on the div.Links a.
use padding-top: 1px (at least) for the div.Links and you don't need to use float on the div.Links a
Related
I have a button with border on the right and the bottom, when I hover that, both border is hidden, and show border on the top and the left with color same as background-color on parent that button, i want to make like a 3D button effect, but its not working.
Here's look like my button when i hover it
What i want is the border-color is red, and if the parent background-color is green the border-color is green
And here's my code
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
}
Here's my fiddle https://jsfiddle.net/evpsthx3/
Problem is your parent has no border color set. So just set the border color to the parent. Something like this: https://jsfiddle.net/evpsthx3/9/
<div class="parent red">
<a class="cta">BUTTON</a>
</div>
<div class="parent green">
<a class="cta">BUTTON</a>
</div>
.parent.red {
background-color: red;
border-color: red;
}
.parent.green {
background-color: green;
border-color: green;
}
You can give that effect by adding the below css code, Hope it wrks.
.cta:hover {box-shadow: #000 5px 5px 5px;}
you can try this one:
.parent {
width:300px;
height:60px;
padding:30px;
}
.cta {
display: inline-block;
padding: 10px 30px;
font-family: 'courier new' !important;
font-size: 19px !important;
background: #1d85bf;
color:#fff;
border:3px solid #0b527a;
border-top:0;
border-left: 0;
border-radius:3px;
text-transform:uppercase;
display: block;
overflow: hidden;
white-space: nowrap;
}
.cta:hover {
border:3px solid #dbdbdb;
border-color:inherit !important;
border-bottom: 0;
border-right: 0;
border-top-left-radius: 3px !important;
color:#fff;
box-shadow: #242729 6px 6px 6px;
}
DEMO HERE
I have one problem with my CSS code.
The problem is active link sliding down.
This is my DEMO page link from codepen .
If you check my DEMO page then you see blue border color active links. I want that links come on the al the images. But now 5,6,7 numbers picture active link blue border sliding down. What can i do here anyone can help me?
.slider-control-nav a {
display: inline-block;
width: 96px;
height: 71px;
float:left;
border-radius:3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
-o-border-radius:3px;
text-indent: -9999px;
margin-left:16px;
margin-top:5px;
}
.slider-control-nav a.active {
border:2px solid #3978f5;
opacity:1;
box-shadow:inset 0px 0px 10px 3px #777777;
-moz-box-shadow:inset 0px 0px 10px 3px #777777;
-webkit-box-shadow:inset 0px 0px 10px 3px #777777;
width: 97px;
height: 72px;
}
.imgtmb img {
width:97px;
height:auto;
border-radius:3px;
-webkit-border-radis:3px;
-o-border-radius:3px;
-moz-border-radius:3px;
}
.imgtmb {
float: left;
width: 97px;
height: 72px;
margin-left: 16px;
margin-top: 6px;
}
Move slider-control-nav section from within img_tb and place it above.
Increase .container's width to not force the images below
I am attaching two division's border and remove the border where two division intersect but its not remove. I have tried this code.
<div style="border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:none;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;">
<strong style="font-size:18px; color:#000">ABC</strong>
</div>
<div style="width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;">
Hello
</div>
Can anybody help me to solve this error.
jsFiddle: http://jsfiddle.net/9XFDp/1/
Just nudge the top div by 1px from top and use some background-color or even border-bottom is fine
Demo
Added the below properties to the header div
position: relative;
top: 1px;
background: #fff;
z-index: 1;
Note: Don't use inline CSS, create classes instead.
Demo 2 (Without using background-color, used border-bottom: 1px solid #fff; instead)
Like this
DEMO
CSS
.title{
border:solid 1px #CCC;
margin: 15px 0px 0px 350px;
border-bottom:1px solid #ffffff;
padding:12px 12px 8px 12px;
border-radius:5px 5px 0px 0px;
width:300px;
text-align:center;
font-size:18px; color:#000
font-weight:bold;
position:relative;
top:1px;
}
.content{
width:968px;
float:left;
margin:0px 15px 15px 15px;
border: solid 1px;
border-color:#CCC;
border-radius:10px;
}
I have the following HTML:
<div id="pager">1
2
3<span class="elip">...</span>
4</div>
And CSS:
.elip
{
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a{
BORDER-BOTTOM: #E6E6E6 1px solid;
BORDER-TOP: #E6E6E6 1px solid;
BORDER-RIGHT: #E6E6E6 1px solid;
BORDER-LEFT: #E6E6E6 1px solid;
color: #585858;
padding: 7px;
padding-top:30px;
text-decoration: none;
color: #808080;
}
No matter what I do, I cannot get the '...' to be aligned down the bottom at the bottom. When testing in JSFiddle, all works, but not outside it as the shot below (red X is what it is, green tick is what I would like):
Padding, text size, alignment, line height, nothing seems to work.
Try this:
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
position:relative;
bottom:-10px;
}
You could use relative positioning, I also cleaned up your css a bit: http://jsfiddle.net/ptriek/LfUDB/2/
.elip {
padding-top:3px;
letter-spacing:2px;
margin-left:5px;
}
#pager a {
border: #E6E6E6 1px solid;
color: #808080;
padding:30px 7px 7px 7px;
text-decoration: none;
}
#pager span {
top: 9px;
position:relative;
}
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>