I am creating an e-commerce website. While showing discount box, the image of the item is shifted to the left (image below). I want the discount box (blue color) on top of the item class. Can anyone help me with this?
CSS file
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
float:right;
margin-right:30px;
margin-top:10px;
}
HTML File
<div class="item">
<img src="items/1/s/a.jpg"/>
<div class="discount">
50% discount
</div>
</div>
My example -- the blue box is not overlapping the image. Instead it displaces the image.
I want like this: in which discount box overlaps the image/CSS class
You could use z-index and absolute positioning on the top div. Something like:
div.discount
{
width:30px;
position: absolute;
z-index: 10;
top: 8px;
right: 8px;
height:30px;
border:1px solid blue;
}
You could also use percentages instead of px in the top and right to make it a little more flexible.
Edit: You will also have to add position: relative to div.item (absolute position applies based on the closest containing element with a position applied).
z-index is not strictly necessary as long as the thing you want on top appears before the thing on the bottom in the code. I sometimes like to put it in there just in case things get moved around later.
Try positioning the discount label absolute within the item div
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
border:1px solid red;
position :relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position: absolute;
top: 20px;
left: 20px;
}
div.item { position:relative; }
div.discount { position:absolute; top:-5px; left: -5px; }
You can use absolute positioning to place the blue box on top, just make sure that the parent element is set to position:relative.
div.item
{
margin-top:0px;
padding-top:20px;
text-align:center;
width:160px;
float:left;
border:1px solid red;
position:relative;
}
div.discount
{
width:30px;
height:30px;
border:1px solid blue;
position:absolute;
right:30px;
top:10px;
}
This is something quick I made up, should work for you: JsFiddle Demo
Related
I'm currently setting up a sidebar menu for my Wordpress website. I'm running into 2 issues. The 1st one is that the text in the menu isn't lining up to the left side properly. I have tried to use the text-align attribute but it doesn't work.
The 2nd problem is that there is a bit of random space at the bottom of the menu that I don't know why is there.
Problem is happening here: http://dreamedbig.com/our-services/
My HTML/PHP:
<div class="page-content">
<div id="services-menu" class="services-sidebar">
<?php dynamic_sidebar('services'); ?>
</div>
</div>
The CSS:
#services-menu {
border: 1px solid black;
align-items: left;
float:left;
height: auto;
display: inline-block;
top:0;
left:0;
background-color: #BCE6FB;
}
#services-menu li{
list-style-type:none;
border-bottom: 1px solid black;
}
#services-menu a {
text-decoration: none;
color: #08203D;
}
#services-menu ul {
}
#services-menu ul li a {
position: relative;
display: block;
box-sizing: border-box;
z-index: 1;
margin: 5px;
padding-left: 5px;
padding-right: 5px;
}
#services-menu ul li a::after
{
content: "";
position: absolute;
top:0;
left: 0;
background-color: #00A2DA;
width: 0%;
height: 100%;
transition: all 1s;
z-index: -1;
}
#services-menu ul li a:hover::after
{
width: 100%;
}
#services-menu ul li:nth-child(odd) a::after
{
background-color: #00A2DA;
}
#services-menu ul li:nth-child(even) a::after
{
background-color: #FFFFFF;
}
It looks like you have some inherited styles from classes called .widget and there is margin and padding added to ul. This is common is your using something like WordPress or underscores that come with some stylesheets.
I think these styles will correct it
.widget, #services-menu ul{
margin:0;
padding:0;
}
I found the unwanted margin and padding by using inspect in my chrome browser. I highly recommend it for frontend styling because it makes troubleshooting these kinds of issue easier to resolve.
Here is an article to better explain how it works
I'm trying to horizontally center an image. However it does not move from the left side of the page. This answer does not work in my case. What am I doing wrong?
#container {
width: 100%;
border: 2px yellow dashed;
height: 100px;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
}
mypage:
<div id="container">
<div id="profile-image">
<p><img src="<?php echo $data['profile_image_url'];?>" alt="me"></p>
</div>
to make any div or anything horizontally at center , common css approach will be,lets have a width and declare margin:0 auto;
#profile-image{
width:400px;
margin:0 auto;
}
Try this: http://jsfiddle.net/rua4d/2/
#container {
width: 300px;
border: 2px yellow dashed;
height: 100px;
display:table-cell;
position:relative;
vertical-align:middle;
}
#profile-image img{
margin-left: auto;
margin-right: auto;
border: 2px orange solid;
display:block;
position:relative;
vertical-align:middle;
text-align:center;
width:50px;
}
You just need to add display:block to your image's style. Images are inline elements, and inline elements ignore margins.
why cant this work?
#profile-image p { text-align: center; }
#profile-image img { display: inline; }
that way you won't need to specify the width.. if you want margins to work together with the text-align: center you would need inline-block instead:
#profile-image p { text-align: center; }
#profile-image img { display: inline-block; }
OK so I've got a PHP from that is propagated by a switch loop dependent on the dynamic case at hand (I think). Now, when I add in a checkbox, I want to be able to make the first check box in a div with a top border and sides, no bottom. The following ones just have a side border and the last to have sides and a bottom but no top. Hope this makes sense. This is all the code I have to edit:
case "E":
$str.='<div id="leftcolrightboxcheckattach"><div id="enqattachcheckcontent" ><div id="enqleftcolattachcheckbox"><input type="checkbox" id="answer_question_'.$row['ques_id'].'[]" name="answer_question_'.$row['ques_id'].'[]" value="'.$arrMul[$i]["mul_name"].'" style="border:thick solid #fff" /></div><div id="enqleftcolattachcheckboxright">'.$arrMul[$i]["mul_name"].'</div></div></div>';
break;
and here is my CSS. The standard class works, the last-child works but the first-child doesn't... any ideas why?
#leftcolrightboxcheckattach:first-child{width:96%; margin:5px auto; clear:both; background:#000; border-top:thin solid #E6E6E6; position:relative; }
#leftcolrightboxcheckattach{width:96%; margin:5px auto; clear:both; background:#fff; border-left:thin solid #E6E6E6; border-right:thin solid #E6E6E6; position:relative; }
#leftcolrightboxcheckattach:last-child{width:96%; margin:5px auto; clear:both; background:#fff; border-bottom:thin solid #E6E6E6; position:relative; }
#leftcolrightboxcheckattach:not(:first-child):not(:last-child)
{
.....
}
I have a link after an image in my xhtml. The browser automatically puts a return character after the image so that the link is below the image. I want the link to be beside the image. How do I modify the CSS/XHTML for this?
PHP generates it like this(example code)
echo "<img class = \"c\" src=\"http:\/\/www.facebook.com\/favicon.ico\" alt=\"\"\/>";
echo "<a name = \"a1\" class = \"b\" href = \"$ass_array[url]\">$ass_array[name]</a>";
CSS
img.c
{
display:??;
}
a.b
{
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
width:100%;
border-bottom:1px solid #cccccc;
}
See: http://jsfiddle.net/thirtydot/vgnAa/
CSS:
.c {
display: block;
float: left;
margin-top: 4px;
margin-right: 4px;
}
.b {
color:#000088;
padding-top:2px;
padding-bottom:2px;
display:block;
border-bottom:1px solid #cccccc;
overflow: hidden;
}
Either float: left, float: right depending which side you want the link to be. Apply that to both, and make sure to have a clear div after.
This way you can still have that display:block on .b.
"float:left;" for both elements will work
This is the code for my next/prev navigation found at http://ilikeyou.tk/763/ :
<div class="navigation">
<? if($nexts['id'] == ''){ ?>
<? }else{ ?>
<? } ?>
</div>
I would like to vertically center the buttons. I tried using vertical-align:middle; which didn't work. I also tried top:50%; but that didn't do the job either.
Here is my css:
.navigation {
position: relative;
float: left;
vertical-align : middle;
height: auto;
padding: 0;
margin: 0 -20px 0 -22px;
width: 636px;
z-index:1;
}
.navigation a.prev{
background: url('images/nav_left.png');
float: left;
width: 50px;
height: 50px;
margin-left:10px;
}
.navigation a.next {
background: url('images/nav_right.png');
float: right;
width: 50px;
height: 50px;
margin-right:10px;
}
Thanks!
So, I'm guessing that the content area height is not very static.
http://jsfiddle.net/aBzhu/
Trick is to have the outer element set to position: relative; float: left; and then the element you want to center as position: absolute; top: 50%; margin-top: -Half_the_height_of_this_element;
Note that this only works when the element that you want to center vertically IS static height. Should fit your usage I think.
Edit: Oh.. and I dont think this necessarily works in ie6. But does work ie7+
Edit2: Also if youre not interested in such a puny methods you should check this out Using jQuery to center a DIV on the screen
vertical-align is intended for table cell rendering, and even this is quite problematic. Why not just add a few pixels of top padding to your navigation ul? It's not real centering, but you're obviously not worried about dunamic scaling when you're using a fixed height graphic for the navigation background.
This Solution Matched me perfectly for small texts. Even if it is a link or just a text inside the div, this CSS Class could vertically align the content inside the DIV. Works for IE as well..
.verticalCenterDivText{
height: 29px;
line-height: 29px;
}
Hope this helps....
Regards, ADynaMic