I'm experiencing some strange behavior with OL numbering in Chrome, here's my markup:
<ol>
<li>
<div class="block left">
<span class="block">Main Title<span class="alert">!</span></span>
<input type='text' name='title-1' />
</div>
<div class="block left">
<span class="block">Subtitle<span class="alert">!</span></span>
<input type='text' name='title-2' />
</div>
<div class="block left">
<span class="block">Add Image<span class="alert">!</span></span>
<input type='file' name='image' size='30' />
</div>
</li>
<ol>
The classes used are:
.block { display:block; }
.left { float:left; }
.alert { color:red; }
The problem I'm having is that I need the number of my OL to appear to the LEFT of the LI's contents, but Chrome seems to attribute some kind of float property to the numbers, making it appear on the right.
Can anyone provide any assistance on this matter? Thanks in advance.
ol li { margin-left: 60px; list-style-type: decimal; }
will make the numbers visible.
Wrapping the tags inside li-elements with <div class="wrap"> and apply this css to it:
.wrap { display: inline-block; position: relative; top: 12px; }
will fix your problem --> http://jsfiddle.net/GpfYk/2/
position: relative; top: 12px; makes the position nicer.
The problem is that you have a span with a class of "block" inside the li, and both are being floated. If you remove the class of block from the span, it should fix the issue.
Or, if you wish to keep the elements inline, try setting them to display: inline-block and remove the "left" class to float them as in this example: http://jsfiddle.net/jglovier/zshPr/
Related
This is pretty basic CSS question. I have this as my result:
I want the name and date to be on a single line next to the menu icon
HTML:
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div class="topline">
<div id="name">John Doe</div>
<div id="date">04/27/2018</div></div>
</div>
CSS:
.topnav{
background-color: #3071a9;
color: #ffffff;
}
.topline{
padding-left: 20px;
}
#name {
float:left;
}
#date {
float:left;
}
add to your CSS :
.topline{
display: inline-block;
}
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
This needs to be made into a div and floated left like your name and date are. You also need topnav to be of the right width (whether it's fixed or not) for everything to fit inside, otherwise it'll be pushed down.
<div style="font-size:30px;cursor:pointer;float:left;" onclick="openNav()">☰</div>
You could keep it a span by using display:inline or inline-block, but since you're floating the other divs, might as well keep it consistent. Display in CSS
Stop all the floating! Use flexbox instead:
.topnav {
display: flex;
align-items: center;
background-color: #3071a9;
color: #ffffff;
}
#name,
#date {
margin-left: 20px;
}
<div class="topnav">
<span style="font-size:30px;cursor:pointer;" onclick="openNav()">☰</span>
<div id="name">John Doe</div>
<div id="date">04/27/2018</div>
</div>
</div>
I have a navigation bar with 3 sections:
A logo
A search bar
A couple of menu options grouped together
I want it to look something like this where the logo is aligned left, the search bar has a left padding, and the grouped links are on the right:
If I try to float the group to the right, they don't vertically align to the middle.
<nav>
<a class='logo-link' href="#">Example</a>
<div class="search">
<form accept-charset="UTF-8" action="/search" method="get">
<div style="margin:0;padding:0;display:inline"></div>
<input class="main_search" type="text" />
<input class="inline_search" type="submit" value="Search" />
</form>
</div>
<div>
<div class="anchorLink">
Blog
</div>
<div class="anchorLink">
Login
</div>
<div class="anchorLink">
Register
</div>
</div>
</nav>
I've attached a fiddle of an example.
You could either use
text-align:justify; + display:inline-block; DEMO, you can then use : vertical-align:middle; to align your element to each other's middle DEMO bis
or
display:flex; + justify-content:space:between; DEMO2 You can then use margin:auto; to center on both axis DEMO3
You can use display properties, Try display:inline-block instead float and Set .search class style like this:
CSS
.search {
margin: 0 auto;
max-width: 90%;
padding-top: 0;
display: inline-block;
padding-left: 10em; /* Reduce padding
font-size: 0.75em;
}
Added CSS class
.nav--list{
display:inline-block;
}
Fiddle Example
Efficient way to do this:
Html:
<div id="header">
<ul>
<li><div>logo area</div></li>
<li><div>search area</div></li>
<li><div>other area</div></li>
</ul>
</div>
CSS:
#header ul li{
list-style:none;
display: inline;
padding-left:20%;
}
Note:
Different "display" option would give you different decoration of your elements. Here, display:inline would make the display vertical.
Check the W3schools lessons here for further understanding: http://www.w3schools.com/css/css_display_visibility.asp
If you want to align your anchor-links to the right of your layout, you should
Align the logo and the search left
Align the option-links right
By the way: I suggest to use an unordered list instead of several divs for your links
HTML
<nav>
<div class="logo">
<a class="logo-link" href="#">Example</a>
</div>
<div class="search">
<form accept-charset="UTF-8" action="/search" method="get">
<input class="main_search" type="text" />
<input class="inline_search" type="submit" value="Search" />
</form>
</div>
<ul class="anchorLinks">
<li>Blog</li>
<li>Login</li>
<li>Register</li>
</ul>
</nav>
CSS
nav {
background-color:#EEE;
height:25px;
padding:10px;
}
.logo {
float:left;
padding-right:20px;
}
.search {
float:left;
}
ul.anchorLinks {
float:right;
margin:0;
padding:0;
list-style-type:none;
}
ul.anchorLinks li {
float:left;
padding:0px 5px;
}
See jsfiddle here
In creating a custom tree, I am using a image followed by a label. The issue is when the label overflows it goes under the image, rather I need it to be aligned with the starting point of text. How do I do that with css.
Sample code:
<html>
<body>
<div class="maindivclass">
<ul>
<li id="TR_239984" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is a long text to show wrapping of the text from the box edge</label>
</li>
<li id="TR_239985" class="liclass">
<img src="http://dummyimage.com/32x16" class="imgclass" />
<label class="labelclass">This is another long text to show wrapping of the text from the box edge</label>
</li>
</ul>
</div>
</body>
</html>
Please check a sample here
I need to make it look like : http://imgur.com/Yp9hC
I need image and text seperate because clicking either does 2 different things, so cant use background image for list style, unless its possible using that also.
Thanks
Try this - DEMO
li {
position: relative;
list-style: none;
}
li img {
position: absolute;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
margin-left: 32px;
display: block;
}
This would be a perfect time to use CSS floats. Float both the image and the label to the left and give them defined widths. Make sure to "clear" the float on the .liclass
See http://codepen.io/imjared/pen/EDgHc
Try this:
.maindivclass {
width: 300px;
}
li {
float: left;
position: relative;
list-style: none;
}
.img_container {
float: left;
width: 40px;
padding: 0px;
}
li label.labelclass {
cursor: pointer;
padding-left: 5px;
padding-right: 5px;
float: left;
width: 250px;
}
HTML
<li id="TR_239984" class="liclass">
<div class="img_container">
<img src="img.png" class="imgclass" />
</div>
<label class="labelclass">
This is a long text to show wrapping of the text from the box edge
</label>
</li>
I added a class .img_container because it just simplified setting the width without skewing the img.
Fiddle here
Hear I give you the best code for it.
HTML:
<div class="wrapper">
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
<div class="box-one">
<img src="http://dummyimage.com/32x16" />
</div>
<div class="box-two">
This is a long text to show wrapping of the text from the box edge. This is a long text to show wrapping of the text from the box edgeThis is a long text to show wrapping of the text from the box edge.
</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.wrapper{
width:800px;
background:#E6E6E6;
}
.box-one{
float:left;
width:50px;
margin-bottom:30px;
}
.box-two{
float:right;
width:750px;
}
Hope this definitely helps you. Cheer.
I'm displaying a list of links for voting, similar to Hacker News. I want the following layout for each link:
The gray boxes highlight the four divs for each link listed.
The key thing I need to do is get the "other text" div to be left-aligned with the link headline text.
I could define the width of the rank and arrow divs (the two little boxes), of course, and then indent the other text div accordingly. But this implementation has some downsides relative to my specific needs -- which I won't go into -- and more importantly, I just feel like there should be a more elegant way to achieve this. Something like a clear bottom for the rank and arrow divs, or maybe a property of the link headline div that tells the following div to appear directly below it.
Any ideas?
Why not just put the two right containers in one?
<div class="rank">9</div>
<div class="arrow">arrow</div>
<div class="content">
<div class="row1">Link headline text</div>
<div class="row2">other text</div>
</div>
<br class="clear" />
style:
.rank, .arrow, .content {
float: left;
}
.clear {
clear: left;
}
EDIT: Demo on jsfiddle
Solution 1
It seems that all four boxes for each item are in one bigger box (li maybe), so I would use:
<li>
<span class="num"></span>
<span class="upvote"></span>
<span class="main">main text</span>
<span class="add">more text</span>
</li>
and
.add { clear: both; float: right; }
Solution 2
Other solution would be padding on parent of each group of four and then negative margin-left together with float: left on number and upvote links.
Anything better can be tailored to your needs, but we need to see HTML :)
I'd go for a combination of the answers given by #Adam and #Czechnology, and use a list to display the content, and put the Link headline text and other text boxes into a single parent div. Like so:
HTML:
<ol class="headlines">
<li class="news-item">
<div class="rank">9</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
<li class="news-item">
<div class="rank">10</div>
<div class="arrow"><img src="arrow.png" /></div>
<div class="content">
<h2>Link headline text</h2>
<div class="additional-content">other text</div>
</div>
</li>
</ol>
Style:
ol.headlines {
display:block;
list-style-type:none;
list-style-position:outside;
margin:0;
padding:0;
}
div {
border:1px solid #00F;
}
ol.headlines .rank, ol.headlines .arrow, ol.headlines .content {
float:left;
}
.news-item {
clear:left;
}
ol.headlines h2,
ol.headlines .additional-content {
display:block;
}
You can find a sample of this here: http://jsfiddle.net/DEWtA/
Note that you'll need to alter the CSS to your needs with regards to the size of the divs and such.
Why not provide a wrapper element for the link headline text and the other text? Then float the wrapper instead.
http://jsfiddle.net/userdude/H3qPt/
HTML
<div class="linkblock">
<span class="score">100</span>
<span class="arrow">^</span>
<div class="linkdata">
<div class="linkurl">Link headline</div>
<div class="linktext">Other text</div>
</div>
<br/>
</div>
CSS
Some of this is just for demonstration.
.linkblock .score,
.linkblock .arrow,
.linkblock .linkdata {
float: left;
}
.linkblock br {
clear: both;
}
div, span {
border: 2px solid #ddd;
margin: 4px;
padding: 3px;
}
div.linkdata {
border: none;
padding: 0;
margin: 0;
}
You can contain the those two things into divs and then for the left div with the voting stuff, label the div with a class, "vote", and have the following CSS:
.vote {
margin: 0 0 100%;
}
I haven't tested it, but it should work like a charm.
Caveat: Doesn't work well with responsive design :(
The best solution would probably be to wrap 'link headline text' and 'other text' within a 'div' and use 'overflow: hidden;' on it.
I'm having a problem lining up some icons and am new enough to css that I'm not exactly sure how to explain this. So I've attached a picture of what the out put is rendering like. I've also included what the css and html code is. Hopefully someone can help point me in the right direction to help fix this.
I want the "edit", "archive", "delete" icons to all line up in the right side exactly the same as the first row in the picture.
Here is the html:
<ul id="nav">
<li>California
<div class="portf_edit">
<span>
<img src="../images/edit.png">
</span>
</div>
<div class="portf_archive">
<span>
<img src="../images/archive.png">
</span>
</div>
<div class="portf_delete">
<span>
<img src="../images/delete.png">
</span>
</div>
</li>
<li>Hyrum
<div class="portf_edit">
<span>
<img src="../images/edit.png">
</span>
</div>
<div class="portf_archive">
<span>
<img src="../images/archive.png">
</span>
</div>
<div class="portf_delete">
<span>
<img src="../images/delete.png">
</span>
</div>
</li>
Here is the css:
li {
list-style-type:none;
vertical-align: bottom;
list-style-image: none;
left:0px;
text-align:left;
}
ul {
list-style-type: none;
vertical-align: bottom;
list-style-image: none;
left:0px;
}
ul#nav{
margin-left:0;
padding-left:0px;
text-indent:15px;
}
.portf_edit{
float:right;
position: relative;
right:50px;
display:block;
}
.portf_archive{
float:right;
position: relative;
right:-5px;
display:block;
}
.portf_delete{
float:right;
position: relative;
right: -60px;
display:block;
}
Here's what is being output:alt text http://www.redsandstech.com/css_layout_problem.jpg
Any ideas where to start? Thanks.
The easiest way to fix this is to turn off the float by adding a clear to the LI style as shown below.
li {
list-style-type:none;
vertical-align: bottom;
list-style-image: none;
left:0px;
text-align:left;
clear: both;
}
Add this to your CSS:
ul#nav div{
overflow: hidden;
}
The gist of it is that your floating elements reduce the height of your divs to 0. If you add overflow: hidden to the div then the element will be forced to contain the floating elements and thus have a positive height.