My goal is to generate this:
<div>
Image (40px by 40px) Caption
Image (40px by 40px) Caption
Image (40px by 40px) Caption
</div>
My current code generates images that are wrapped up inside the div with previous list item instead of ones right below the image
my code structure is
<div>
<ul>
<li>
<img/>
<span>caption</span>
</li>
.....
</ul>
</div>
What CSS do I need so I can avoid doing the wrap that I am seeing?
the css i have righ now for these elements are
li img{
position:absolute;
bottom:0;
display: block;
}
li{
position:relative;
}
.box (this is for div)
{
padding: 4px 15px;
border: 1px solid #ccc;
margin: 0 0 10px 0;
border-radius: 15px;
-moz-border-radius: 15px;
}
Not getting your question properly but if you want that the caption text doesn't get wrapper than use CSS white-space property so that the text doesn't get wrapped
.box /* (this is for div) */ {
padding: 4px 15px;
border: 1px solid #ccc;
margin: 0 0 10px 0;
border-radius: 15px;
-moz-border-radius: 15px;
white-space: nowrap;
}
Related
Needing to have 2 divs side by side
I have one div with a background image of 62px and the other div needs to take up the remaining container divs width.
Search-box1 will be the div that expands to fill the remainder of container search which will be at different sizes depending on what size screen its viewed on.
So i need the search-button1's size to stay at 62px width while search-box1 fills the remainder when containersearch stretches to fill responsively.
<div class = "containersearch">
<div class="search-box1"></div><div class="search-button1"></div></div>
.search-box1{
background: #ffffff;
border: 1px solid #000000;
width:99%;
height:30px;
padding:5px 5px 5px 5px;
display: inline-block;
}
.search-button1{
background-image: url('search-button.png');
width:62px;
height:20px;
display: inline-block;
}
.containersearch
{border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width: 100%;
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
You can try to use CSS calc() Function, something like
width: calc(100% - 62px);
http://www.w3schools.com/cssref/func_calc.asp
https://jsfiddle.net/ns2352gt/
Maybe your looking something like this..
body{
margin:0;
}
.containersearch
{
border: 1px solid #006699;
background:#0A3D5D;
padding:5px 5px 5px 5px;
width:100%
border-bottom-left-radius:8px;
border-bottom-right-radius:8px;
}
input[type=text]
{
position:relative;
width: 100%;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 16px;
background-image:
url('http://findicons.com/files/icons/2226/matte_basic/32/search.png');
background-repeat: no-repeat;
background-position: right;
background-color: white;
padding: 12px 20px 12px 10px;
}
input[type=text]:focus {
width: 100%;
}
<body>
<div class = "containersearch">
<form>
<input type="text" name="search" placeholder="Search.."/>
</form>
</div>
</body>
I want to div css for make a div on which name of div is display on top right side border. Like: -----------DEMO--------------------------------------
I think you need like following:
HTML:
<div class="test">
<span>Your text </span>
</div>
CSS:
.test {
border: 1px solid #000000;
line-height: 0;
text-align: left;
margin-top:40px;
height:100px;
width:400px;
}
.test span {
background-color: #ffffff;
padding: 0 10px;
margin: 0 20px;
}
Check Fiddle
There is probably a wide array of bad practice that I'm using, as I am a beginner when it comes to HTML and CSS, so please keep that in mind when down-voting this post into the darkest depths of the Internet. My problem is that I want to make a line of text that interrupts a horizontal border, but then I want text after it that is aligned with the original text. Here's the code that I have so far.
HTML:
<h2 style = "float:left; width:500px"><span>This is a test</span></h2>
<div id = "test">
<p>Other stuff</p>
</div>
CSS:
h2 {
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 50px;
position: relative;
float: left;
}
I want it to look like this:
-----This is a test -------------------------------
Other Stuff|
The effect I am trying to get is basically a corner. The vertical line after "Other stuff" should link into the line coming from the "This is a test". I am having trouble aligning the text.Right now my vertical line goes above the horizontal line. My apologies again for all of the bad practice I am probably displaying, but I would really appreciate any help for this. CSS is a horrible time for me. Thanks in advance.
Wrap both inside a common position:relative; parent
and set the #test to be position:absolute top and right:
.container{ /* added */
width:500px;
position:relative; /* in order to contain absolute children */
}
h2 {
/*float:left; no need to */
/*width:500px; now container has it */
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 50px;
/*position: relative; set to absolute! */
position:absolute;
top:2px; /* added */
right:0; /* added */
/*float: left; no need to */
}
<div class="container">
<h2><span>This is a test</span></h2>
<div id = "test">
<p>Other stuff</p>
</div>
</div>
You should take care to keep in mind the framework of your site when positioning these items, but if you enlarge the div to fit the text without wrapping and then you can use margins to position the item where you want since it is already floating. Use this css:
h2 {
text-align: center;
border-bottom: 1px solid #000;
line-height: 0.1em;
margin: 10px 0 20px;
}
h2 span {
background:#fff;
}
#test{
border-right: 1px solid black;
width: 75px;
position: relative;
float: left;
margin-top: 12px;
margin-left: -75px;
}
So basically I have a custom multiple select list which has ul li structure. The issue is that when selecting an element, it is being highlighted, but if you scroll to the right the highlighted part is not filling whole row.
One solution is to assign display: table-row; attribute to each li element, highlighted part fills whole row after that, but the issue is that after adding that rows start to not react when clicking on the white part, they respond only if you click directly on the text.
Here is fiddle: http://jsfiddle.net/KRnxq/1/
You could wrap the ul in a wrapper like so:
<div class="wrapper">
<ul class="files multiple-select MultipleSelectBox vertical" unselectable="on" tabindex="0" style="-webkit-user-select: none;">
....
</ul>
</div>
and then put your box styles onto the wrapper and make the ul display:table like so:
.wrapper {
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid #aaa;
/* corner */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.MultipleSelectBox {
display:table;
list-style-type: none;
margin: 0;
padding: 1px 0;
background-color: white;
color: black;
}
Example
EDIT
Here is another version with the following fixes:
no black border creating a click effect when selecting items
better border radius so scrollbars don't remain square
Updated fiddle
you need to add wrapper div and put your UL-li in-the div
.wrapper {
overflow: auto;
width: 200px;
height: 200px;
border: 1px solid black;
}
and
.MultipleSelectBox {
width: 200px;
border: 1px solid #aaa;
height: 200px;
list-style-type: none;
margin: 0;
overflow: none;
}
Here in the image Title "Accounts and Holding Disclosure in crossing the white line while DRF is way above the white line...
How can i put the text just above the line using css.
Html code is
<div class="tabs">
<img src="images/disclosure.png" />
Accounts and Holdings Disclosure</div>
<div class="tabs">
<img src="images/drf.png" />
DRF</div>
Css is
.tabs
{
height: 85px;
border-bottom: 1px solid #fff;
text-align: center;
color: #fff;
padding-bottom:7px;
}
.tabs img
{
display: block;
margin-left: auto;
margin-right: auto;
height: 70px;
margin-top: 5px;
}
you should write:
.tabs {
height: auto;
}
There is simply not enough splace in the first block to apply the padding. The .tabs is 85px height, the image is 70px height with a margin of 5px top. So the remaining vertical space for your text is 10px only, and you add 7px of padding.
You need to reduce the size of the image in my opinion.
should be :
.tabs {
height: 90px;
}