I would like to do this using CSS:
Ssing only ul li, and a elements. The red bullets would be invisible.
How can I do this? I've tried using float:left for the horizontal outer bullet list and a normal vertical bullet list for the inner one, but it did not works.
Is there a better way than bullet list?
I'm just going to throw this out there as a viable solution. Why not use div elements? Here's an example:
CSS --
.container {
width : 400px;
margin : 0;
padding : 0;
}
.col {
display : inline-block;
width : 100px;
vertical-align : top;
}
.col.double {
width : 200px;
}
HTML --
<div class="container">
<div class="row">
<div class="col">9</div>
<div class="col">0</div>
<div class="col">TITLE</div>
</div>
<div class="row">
<div class="col double">{image}</div>
<div class="col">text text text text text text text text text text text text text text text text text text </div>
</div>
</div>
Here is a demo: http://jsfiddle.net/a9m76/1/
Related
I have the following code, which includes an image and text and some other info after it's parent. My concern is that the element following its parent is affected by floating the image, is there a way I can make that element appear normally.
.floated {float:left;}
<div = "parent">
<p>This text is above the picture.</p>
<img class = "floated" src = "http://www.userlogos.org/files/logos/pek/stackoverflow2.png"/>
<p>This text should wrap around the floated image</p>
</div>
<div = "another_element">
<p class = "not_floated">This text shouldn't be affected by the floated image, but for some reason it is what should be done to it.</p>
</div>
Add class .fix to the parent or the last p and set the .fix:after css as below: JS Fiddle ( 1 )
.floated {
float: left;
outline: 1px solid green;
}
.fix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div id="parent" class="fix">
<p>This text is above the picture.</p>
<img class="floated" src="http://www.userlogos.org/files/logos/pek/stackoverflow2.png" />
<p>This text should wrap around the floated image</p>
</div>
<div id="another_element">
<p class="not_floated">This text shouldn't be affected by the floated image, but for some reason it is what should be done to it.</p>
</div>
( 1 ) https://css-tricks.com/snippets/css/clear-fix/
Issue is that i am trying to vertically align text within neighboring divs in a bootstrap 3 row where one cell has text of varying size. the text in neighboring cells aligns along the top, but i need it to align along the bottom.
Fiddle of the problem: http://www.bootply.com/GqKdUa9uxT
Yes, i have searched and have surprisingly not found an adequate answer:
vertical-align with Bootstrap 3
does not help for example as i am trying to align the text, not the div.
thanks, airyt
You can align text to the bottom in the right div by using "position:relative" for parent div and "position:absolute" for a child, then you can adjust the position by changing the value of a bottom property according to your need.
The HTML code:
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div>
<div class="col-sm-6 bottom-align">
This text needs to be (bottom) ed with Text A in previous cell.
</div>
</div>
</div>
and the CSS styling:
.row {
position: relative;
}
.bottom-align {
position: absolute;
bottom: 0px;
right: 0;
border-bottom: 1px solid red;
}
.border{
border-bottom: 1px solid blue;
}
Please check the fiddle:
http://jsfiddle.net/johannesMt/craLuLpb/
You can't vertically align floated wrappers, you need to change it to inline element.
DEMO
.col-sm-6 {
display: inline-block;
vertical-align: bottom;
float: none;
width: 50%;
}
<div class="container">
<div class="row">
<div class="col-sm-6">
Here is some text (Text A) <span style="font-size: 40px">Text B</span>
</div><div class="col-sm-6">
This text needs to be (bottom) aligned with Text A in previous cell.
</div>
</div>
</div>
Don't use .col-sm-6 since this will overwrite bootstrap grid system, give it another name
I have a DOM like this:
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='container'>
<div class='visual'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more container nesting possible -->
</div>
</div>
The CSS is
.container .visual {
margin-left:20px;
}
.container .container .visual {
margin-left:40px;
}
.container .container .container .visual {
margin-left:60px;
}
which has to be done for every depth level and is of course silly.
Here's a jsfiddle (Updated: more structure, more lines of text)
Is there a simpler solution that maintains the tree-like HTML and has the same effect?
I know this is not a very elegant solution:
.container{
padding:20px 0 0 20px;
}
.nomove {
position:absolute;
left:10px;
}
DEMO
This code works fine:
<html>
<head>
<style type="text/css">
.container {
margin-left: 20px;
}
.nomove {
position:absolute;
left: 0px;
width: 100px;
}
.dummie {
color:transparent;
width: 100px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="visual">indent indicator</div>
<div class="nomove">text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned</div>
<div class='container'>
<div class='visual'>indent indicator</div>
<div class='nomove'>text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
<div class="dummie">text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned text in this class is always left-aligned</div>
</div>
</div>
</body>
</html>
The .nomove div is moved with position:absolute and left:0px to the left side. The dummie div makes a gap between two divs, because position:absolute has no height.
PS: Sorry for my english ;)
EDIT:
Now the dummie and the nomove div have the same text, the same width, but the dummie is transparent.
You could remove some of the container classes and simply rely on three visual classes.
HTML
<div>
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<!-- more nested containers possible -->
</div>
</div>
</div>
CSS
.visual1 {
margin-left:20px;
}
.visual2 {
margin-left:40px;
}
.visual3 {
margin-left:60px;
}
You can do it like this: http://jsfiddle.net/TMAXa/3/
Which is taking on from what #KevinBowersox said. but you dont need to use as much HTML code if you have an increment on the CSS.
<div class='visual1'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual2'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
<div class='visual3'>
indent indicator
</div>
<div class='nomove'>
text in this class is always left-aligned
</div>
Based on my earlier thread I'm trying to use and understand the recommended way to align two divs horizontally using the overflow element.
With my short text the two divs align correctly, but when I add loner text it drops below the image. Can anyone explain why this is happening and how do I fix it?
My JSFIDDLE
HTML:
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="wall-thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
CSS:
div.container {
border: 1px solid #000000;
overflow: hidden;
width: 100%;
}
div.left {
padding:5px;
float: left;
}
div.right {
float: left;
}
.thumb-small{
width:35px;
height:35px;
border: 1px solid #B6BCBF;
}
Floats expand to try to encompass their content. They generally expand up to the width of the containing region, regardless of how they are positioned. That is why it is going to a new line when the text is really long.
For what you are doing, I believe you want the image to the left of some text. This is done by having the outer region set with clearfix CSS (to always encompass all floats):
.container {
overflow: hidden;
min-width: 1px;
}
/* IE7+ */
*+html .container {
min-height: 1%;
}
Then, only float your image to the left. Do NOT float your content. Add margins around the image as desired. So something like:
.left {
float: left;
margin: 0 10px 10px 0; /* 10px on right and bottom */
}
The content in the div will then act like you are expecting.
Remove the float rule on the long text (jsFiddle example). When en element is floated after another floated element, it can't come before it vertically.
<div>
<div style="word-wrap: break-word;">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
See the W3 for the long version:
The outer top of a floating box may not be higher than the outer top
of any block or floated box generated by an element earlier in the
source document.
Remove the float:left; on the rule and it will work. However, you may want to improve and test in ie 6+.
You have to set max-width attribute to restrict your text form taking as much space as available and to get maximum space its going to next line.
http://jsfiddle.net/a6BbD/1/
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;max-width:400px">Some long text here Some long text here Some long text here Some long text here Some long text here </div>
</div>
</div>
<br>
<div class="container" style="overflow: hidden; width: 100%">
<div class="left">
<img src="http://localhost/new/img/sampleimg.png" class="thumb-small" />
</div>
<div class="right">
<div style="word-wrap: break-word;">Some short text here</div>
</div>
</div>
The recommendation says you should always set width on floated elements.
the below link has great material to understand floats..
http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
I can add a CSS class to the outer-most DIV and the inner-most DIV tags with "display:inline" but, I cannot do that with some in between.
The markup is something like this...
<span>ABC</abc>
<div>
<div>
<div>
XYZ
</div>
</div>
</div>
I'd like the text ABC to be on the same line as the text XYZ, but because of the DIV tags, they are on seperate lines.
Well if there is a reason for you to have so many nested divs (you are unable to change the HTML etc.) you could apply a class to the outmost div and then use inheritence to apply display: inline;
HTML
<span>ABC</abc>
<div class="wrapper">
<div>
<div>
XYZ
</div>
</div>
</div>
CSS
.wrapper,
.wrapper div {
display: inline;
}
Add a class to the outermost div e.g. myDiv
CSS:
.myDiv, .myDiv div {
display: inline;
}
That makes the myDiv div and all div elements that are descended from myDiv display inline.
HTML:
<span>ABC</span>
<div class="myDiv">
<div>
<div>
XYZ
</div>
</div>
</div>
Demo: http://jsfiddle.net/waitinforatrain/nTPZY/