Border draw as like underline of Title - html

I have use the following code snippet to draw the border
<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="padding: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a;">
Title
</div>
</div>
I have create the Fiddle to explain my working scenorio from the following link
Click here
From this i got the out as like below screen shot:
Screen shot:
How to modify this by change the border bottom style of inner div to get output as like below screen shot
Screen shot:

Check this out. Working Fiddle
<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="padding: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a; width:90%; margin:0 auto;">Title</div>
</div>

Instead of padding, use margin for inner div. Fiddle http://jsfiddle.net/sajith/DZNbP/
<div style="height: 250px;width: 300px;border: 1px solid #99999A;">
<div style="margin: 0.7em 0.4em 0.2em 0.4em;height: 30px;border-bottom:1px solid #99999a;">
Title
</div>
</div>

*Used to this cod*e
HTML
<div class="main">
<div class="conmain">
<h1>Title</h1>
</div>
</div>
Css
.main{
height: 250px;width: 300px;border: 1px solid #99999A;
}
.conmain{
padding: 0.7em 0.4em 0.2em 0.4em;
}
.conmain h1{border-bottom:1px solid #99999a; line-height:30px;margin:0; font-size:12px;}
Demo

Related

Border for div not displaying even with class while printing?

I want to print the div with border, the border works fine in html page but in print preview the border not displaying.
even i have added inline css for <div class="sfborder"> this was not resulting the correct output, how can i solve this?
<style>
.sfborder {
border: 1px solid black !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
#media print {
.sfborder {
border: 1px solid !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
}
</style>
<div class="row">
<div class="col-sm-12">
<div class="sfborder">
<div class="col-sm-4">
<h6 class="text-info">Quote to</h6>
<h6>Kadamba India Technologies PVT LTD</h6>
<p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
</div>
<div class="col-sm-4">
<h6 class="text-info">Ship To</h6>
<h6>Kadama India Technologies PVT LTD</h6>
<p>'Kasturba Nagar, Mysore Road, Bangalore - 560026</p>
</div>
<div class="col-sm-4">
<div class="col-sm-12">
<h6 class="text-info">Delivery Terms</h6>
<p>Advance</p>
</div>
<div class="col-sm-12">
<h6 class="text-info">Payment Terms</h6>
<p>Against Delivery</p>
</div>
<div class="col-sm-12">
<h6 class="text-info">Other Reference</h6>
<p>Shipping charges extra</p>
</div>
</div>
</div>
</div>
</div>
Can i just ask why you are using #media print for your css, i would personally just have it in the same file, or just have the css file without the #media print {
}
<style>
.sfborder {
border: 1px solid !important;
border-collapse: collapse !important;
border-radius: 2px !important;
margin-bottom: 10px;
overflow: hidden;
}
</style>
have you tried just leaving it as above and removing the #media print?
and also did you import the css file correctly?

Inline CSS Image and Paragraph inline

I am having trouble getting my div to layout an image and paragraph on the same line, I have search numerous topics on stackoverflow and on google but the no soultions are working.
Due to the web host I am having to use inline css to style the site.
(trust me I would much rather use css files but the ability to do so is not there, due to the chosen web host)
Normally I would use bootstrap to achieve this but as noted that is not an option.
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
What I'm getting:
What I want:
All you need to do is apply float: left to image
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image" style="float: left; margin-right: 10px;" /> Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't
it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
1. Apply a maximum width to sibling element:
Apply a maximum width to the sibling element (#texts) of #image, e.g:
<div id="texts" style="float:right; max-width: 80%;">
Note: max-width property value given only as a demonstration. Adjust accordingly and as per requirements.
As it is now, it contains enough text/content to occupy the whole horizontal width.
2. Declare the display type of first nested element or float left
Declare the first nested element (#image) as either an inline-block, e.g:
<div id="image" style="margin-left: 10px;display: inline-block;">
Or float it left, e.g:
<div id="image" style="margin-left: 10px;float: left;">
Note: this float may need to be cleared on the containing parent element.
As it is now, this element (div) is a block element by default, block elements will occupy the full available width of a containing element.
Code Snippet Demonstration:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; display: inline-block;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right; max-width: 80%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting
to read here other than some typo's.</p>
</div>
You can remove float: right from the #texts div and add float: left to the #image div:
<div style="display:inline-block; color:black; border:3px solid #ffd800; margin-bottom:25px; border-radius:10px; background-color: #FFF1AD; box-shadow:13px 15px 6px #2b2626; border-top:30px solid #ffd800;">
<h1 style="color:black; margin-top:-27px; padding-left:5px; font-weight:bold">
This is a title
</h1>
<div id="image" style="margin-left:10px; float:left">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top:10px; margin-left:10px; margin-bottom:10px; font-size: 120%">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</p>
</div>
</div>
Using inline isn't normally the best idea, but if that's what you need to do in this case then you can still use Flexbox:
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">This is a title</h1>
<div style="display: flex;">
<div id="image" style="margin-left: 10px;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.</p>
</div>
<div>
</div>
With this you need to add another div around the image and text content and set it to display: flex;
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 50px solid #ffd800;">
<h1 style="color:black; margin-top: -40px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px; margin-right: 15px; float:left;">
<img src="https://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="">
<p>
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's. Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>
<div style="display:inline-block; color:black;border: 3px solid #ffd800; margin-bottom: 25px; border-radius: 10px; background-color: #FFF1AD; box-shadow: 13px 15px 6px #2b2626; border-top: 30px solid #ffd800;">
<h1 style="color:black; margin-top: -27px; padding-left: 5px; font-weight:bold;">
This is a title
</h1>
<div id="image" style="margin-left: 10px;float:left;">
<img src="http://placehold.it/100x200" width="100" height="200" alt="Image">
</div>
<div id="texts" style="float:right;width:90%;">
<p style="color:black; margin-top: 10px;margin-left: 10px; margin-bottom: 10px; font-size: 120%;">
Here is my content, I am writting more than I need to show how the paragraph looks when it takes more than one line. Wouldn't it be nice if the text stayed together when an image was included. Here is some more text purely for testing nothing interesting to read here other than some typo's.
</div>
</p>
</div>

Create bordered bootstrap cols with margin

How can I have bootstrap bordered columns with margin?
I have:
<div class="col-sm-12 col-lg-6">
<div class="drag-block" id="addressField_1" ondragover="return dragOver(event)" draggable="true" ondragend="return dragEnd(event)" ondragstart="return dragStart(event)">
.....................
</div>
</div>
JSFiddle
But I want
<div class="col-sm-12 col-lg-6 drag-block" id="addressField_1" ondragover="return dragOver(event)" draggable="true" ondragend="return dragEnd(event)" ondragstart="return dragStart(event)">
.....................
</div>
JSFiddle
and to look like the first one.
Just change the css to the following :
.drag-block{
border: 2px dashed #bbb7b7;
margin: 0px 15px 30px 15px;
padding: 10px 15px 15px 15px;
cursor: move;
}

CSS overflow not obeying padding

I have a set of HTML elements that I need to style, which I can't change the structure of in any way (yeah, I know).
The HTML has a div that contains two nested spans. The div has padding and the overflow is hidden. The width of the div is set programatically and applied as an inline style.
I would like the text contained within the inner span to be clipped, but still retain the right hand padding as specified on the containing div.
After some research, it appears that the standard approach to this is to use a second nested div but, as I mentioned, I can't change the structure of the HTML.
Currently I have:
<!-- This is what I have to work with (I can't change the structure of this HTML!) -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This is how I want the HTML above to display -->
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
Styled by the following CSS:
.c1 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
overflow: hidden;
}
.c1-inner {
// No relevant styles here yet
}
.c1-inner-2 {
// No relevant styles here yet
}
.c2 {
border: 1px solid red;
border-radius: 4px;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
A jsFiddle is available here
I need to style the top "button" so that it looks like the second one only using CSS. I have reached the limits of my CSS skills and any help would be very much appreciated.
A simple fix. Most important bit: you can make a span have a display value of block rather than inline, which is its default.
Here's the relevant CSS you need and a working example:
.c1 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c1-inner {
overflow: hidden;
display: block;
}
.c2 {
border: 1px solid red;
background-color: #c0c0c0;
padding: 0 13px 0 13px;
}
.c2-inner {
overflow: hidden;
}
We want this<br>
<!-- This is what i Have to work with -->
<div class="c1" style="width: 100px;">
<span class="c1-inner">
<span class="c1-inner-2">
122333444455555666666777777788888888999999999
</span>
</span>
</div>
<!-- This displays how i want the html above to display -->
<br>
to look like this<br>
<div class="c2" style="width: 100px;">
<div class="c2-inner">
122333444455555666666777777788888888999999999
</div>
</div>
<br>
but cannot change the structure of the html!

display text and button in proper positions using css

visit link1 , Its fine. But visit link2 Some problems are there
1)in 2nd link, there is huge gap b/w Rs 25 & "Selling Price + Rs 10 Delivery", Add to cart & buy now button.
2)Also only text "off" is visible, "50" went inside the "check delivery availability" box. 50 & off should visible
we are using this code :
.wk_mp_design .sell_price { display: none;}
.wk_mp_design .label.yousave_label {display: none;}
.wk_mp_design .old-price .price {color: #a0a0a0;font-size: 12px;font-weight: bold;}
.wk_mp_design .you_save_price {color: green;font-size: 11px;font-weight: bold;}
.wk_mp_design .you_save_price::after {content: "OFF";}
.wk_mp_design .special-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .regular-price .price {color: #000;font-size: 13px;font-weight: bold;}
.wk_mp_design .special-price {border-top: 1px dotted #ccc;clear: both;}
.wk_mp_design .You_savee {float: right;position: relative;top: -49px;}
.wk_mp_design .You_savee .special-price.yousave {border: medium none;}
.wk_mp_design .desc.std {border-top: 1px dotted #ccc;}
.wk_mp_design .mrp {display: none;}
1> height is the issue; use this
.product-view .product-essential .product-shop .price-box {
padding-bottom: 0 !important;
height: 75px;
}
2> top value is the issue; use this
.Quick .You_savee {
border: 1px solid #ccc;
border-radius: 37px;
color: green;
left: 151px;
padding: 0;
position: relative !important;
top: -70px !important;
width: 49px;
}
if above classes are used in multiple places just override these classes
1) Caused because of
<p class="special-price">
p elements 's margin-top
.Quick .special-price {
margin-bottom: 0px !important;
margin-top: 20px !important;
}
also notice the height in
.product-shop .price-box {
padding-bottom: 0px !important;
height: 100px;
}
aswell.
2) I don't really understand what you mean.
This is the relevant markup for the first site:
<div class="Quick_1">
<div class="product-data">
<div class="widget widget-static-block"></div>
<div class="price-box">
<p class="old-price">…</p>
<p class="special-price">…</p>
<p class="sell_price">…</p>
<p></p>
<div class="You_savee">…</div>
</div>
<div class="widget widget-static-block"></div>
</div>
<div class="add-to-box">…</div>
</div>
And this is the same part on the second site:
<div class="Quick_1">
<div class="product-data">
<div class="widget widget-static-block"></div>
<div class="price-box">
<p class="old-price">…</p>
<p class="special-price">…</p>
<div class="You_savee">…</div>
</div>
<div class="widget widget-static-block"></div>
</div>
<p class="sell_price">…</p>
<div class="add-to-box">…</div>
</div>
If you look closely, the sell_price element is outside of the product-data element in the second link which causes this problem. If you move it inside, above the You_savee within the price-box, then it will render as desired.