I'm building a list widget where I have multiple <li> with two sibling elements wrapped inside.
A <span> for the title and a <div> for the bottom line. That line must vary depending the width of their adjacent span element.
.limit-area {
width: 250px;
height: 350px;
background-color: #96ceb4;
}
.limit-area ul {
font-size: 0;
list-style-type: none;
-webkit-padding-start: 0;
}
.limit-area ul li {
background-color: #ffeead;
display: table;
margin-bottom: 20px;
}
.limit-area ul li .wrapper span {
font-size: 24px;
color: #010101;
}
.limit-area ul li .wrapper .line {
height: 6px;
margin-top: 12px;
background-color: #ff6f69;
}
<div class="limit-area">
<ul>
<li>
<div class="wrapper">
<span>One line only</span>
<div class="line"></div>
</div>
</li>
<li>
<div class="wrapper">
<span>Bigger one line only </span>
<div class="line"></div>
</div>
</li>
<li>
<div class="wrapper">
<span>Long line and go crazyyyyyy</span>
<div class="line"></div>
</div>
</li>
</ul>
</div>
Full example on jsfiddle: https://jsfiddle.net/arnauth/55josw6e/
In the upper example, I can easily accomplish my goal on the first two list items.
The trick here is to have the same effect when I have a long line that break into two or more lines - that third line on the example.
The line element must have the same width of the text, so in the example must stop near the word 'go' - not in the end of the container as displayed.
The idea is try to approach the problem using only CSS rules avoiding javascript based code.
Thanks for your attention.
Try adding this inside of your span:
border-bottom: 6px solid #ff6f69;
so that it ends up looking like this:
span {
font-size: 24px;
color: #010101;
border-bottom: 6px solid #ff6f69;
}
it should come out like this
https://jsfiddle.net/55josw6e/3/
Hope this answers your question.
Related
So im making a website for a school project and all was hunky dory until i tried to put a paragraph element in and it displays above the title text behind the background color
.container {
width: 80%;
margin: 0;
padding: 0;
}
#logotext {
float: left;
font-family: 'Doppio One';
margin-left: 25px;
}
nav {
float: right;
}
#nav {
list-style-type: none;
text-decoration: none;
margin-top: 35px;
}
ul li {
display: inline;
}
li a {
text-decoration: none;
color: white;
}
li a:hover {
color: #fc9516;
}
.darkwrap {
background-color: #414a4c;
position: fixed;
overflow: hidden;
}
.active {
color: #22cc25;
}
#clock {
position: absolute;
top: 0;
right: 0;
margin-top: 25px;
margin-right: 25px;
font-family: Rajdhani;
font-size: 30px;
}
<div class="container darkwrap">
<div id="logotext">
<h1>JF Web Design</h1>
</div>
<!-- Navigation Bar -->
<nav>
<ul id="nav">
<li> Page 1 </li>
<li> About </li>
<li> Page 3 </li>
</ul>
</nav>
</div>
</header>
<span id="clock"></span>
<p>
Hello
</p>
<footer></footer>
i usedchrome to highlight the faulty element so its clear whats happening here its literall positioned at the top behind the bg color
Console Highhlighted element
.darkwrap is position: fixed.
This takes it out of normal flow and locks its position relative to the viewport.
The rest of the content is laid out as normal as if the .darkwrap element didn't exist … so it ends up covered up by it.
You could use margins to compensate for the space covered up by .darkwrap when the viewport is scrolled to the top. I would simply avoid using position: fixed in the first place: The benefits of having the menu on screen all the time very rarely outweigh the drawback of using up all that vertical space all the time.
If you use float: left and float:right please remember to add clear:both to the next element on the website. Here is fixed code:
https://codepen.io/anon/pen/jKRqLz
I am using this software (Swiiit Website Builder) purchased by my company, im doing intranet page for my department (im a total learn on the job dude being tasked to do this) please help!
<style><!--
<html>
<head>
<style>
ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
a {
float: center;
width: 6em;
text-decoration: none;
color: white;
background-color: #000080;
padding: 0.6em 4.5em;
border-right: 1px solid white;
}
a:hover {
background-color: #0000cd;
}
li {
display: inline;
}
--></style>
the style will affect other area of the page; how do i edit it?
i tried to understand this Apply different css stylesheet for different parts of the same web page but im still cracking my head...
I have amended according to the recommendation (see below) and turn out great!!! Thanks!!
doesnt affect other parts of page now, but now the space between blocks of links are so wide apart when i launch the code... looks fine in preview mode though... please assist :)
.something ul {
float: left;
width: 100%;
padding: 0;
margin: 0;
list-style-type: none;
}
.something li {
display: inline;
}
.something a {
float: center;
width: 6em;
text-decoration: none;
color: white;
background-color: #000080;
padding: 0.6em 4.5em;
border-right: 1px solid green;
}
.something a:hover {
background-color: #0000cd;
}
<div class="something">
<ul>
<li>Organisation</li>
<li>XXX</li>
<li>Organisational Chart</li>
<li>Contact Us</li>
</ul>
</div>
<p><img style="display: block; text-align: center; vertical-align: top;" src="/wbn/slot/u3733/Org%20Chart.png" alt="" width="800" height="473" /></p>
Set class for every ul, a and li otherwise
<div class="something">
<ul>
<li>....</li>
<li>....</li>
</ul>
...
</div>
Give styles using the class name like,
.something ul { }
.something li { }
.something a { }
Set specific class or id to the elements like
text
You can style this a in your css by
#a{
style
}
Rather than adding styling to your elements, add them to a class or id
class definition:
html
<div class="myClassIsReusableToAllWithThisClass"></div>
css
.myClassIsReusableToAllWithThisClass{
/*add styling to all which have a class called 'myClassIsReusableToAllWithThisClass'*/
}
ID definition:
html
<div id="uniqueID"></div>
css
#uniqueID{
/*add styling to only one element*/
}
element definition: (what you're doing presently)
html
<div></div>
css
div{
/*add styling to all 'div' elements*/
}
As #James Donnelly has already mentioned, you should also remove these:
<!-- and -->
as these are 'comments' in html, and will render all within them void/ go unnoticed by your browser.
DEMO:
#myID {
color: red;
}
.myClass {
background: blue;
}
a {
font-weight: bold;
}
<div >I'm just a div</div>
<br/>
<div id="myID">I have a specific id</div>
<br/>
<div class="myClass">I have a specific class which is reusable to all with this class</div>
<br/>
<div class="myClass">I have the myClass class</div>
<br/>
<a>I'm an a tag with no class or id. But all 'a' tags will have this styling</a>
I wonder if there exists an easy and solid way to style ul and li elements so that when using list-style: outside , the li elements lign up with the content above it, or with the content box in which it is in without margins or padding.
Condider this: ( http://jsfiddle.net/Um5L9/2/ )
<div id = "container1">
<span>Something</span>
<ul>
<li>
<div>One</div>
<div>Some more text or content here</div>
</li>
<li>
<div>One</div>
<div>Some more text or content here</div>
</li>
<li>
<div>One</div>
<div>Some more text or content here</div>
</li>
</ul>
</div>
body {
margin:20px;
border: 1px solid #333;
}
ul {
list-style: square outside none;
}
The result will be this:
What I want is this:
And it's easy to do by just adding some padding:
ul {
list-style: square outside none;
padding-left:15px;
}
But there has to be a better way surely than setting pixel margins. Maybe something that would work for all font sizes?
Thanks!
EDIT
Just want to add that I need both children of the li to line up underneath each other
Here is one way of doing it that appears to be fairly robust and uses pseudo elements.
Apply the following CSS:
body {
margin:20px;
border: 1px solid #333;
}
ul {
list-style: none;
margin:0px;
padding:0px;
font-size: 1.0em;
}
ul li {
margin-left: 0em;
position: relative;
padding-left: 1.0em;
}
ul li:before {
content:"\2022";
font-size: 1.0em;
position: absolute;
top: 0;
left: 0;
}
See demo at: http://jsfiddle.net/audetwebdesign/SfGbW/
Note: Look up the ISO code for the desired list marker.
I suggest using something like this:
ul {
list-style-position: inside;
margin:0px;
padding:0px;
}
http://jsfiddle.net/Um5L9/4/
I'm trying to write a navigation bar using an <ul> with inline elements, but the elements all have a gap between them that seem to come from nowhere. That is when hovering a link, the shaded box should snap to the surrounding boxes. The page currently looks like this: http://wictorht.at.ifi.uio.no/. What is causing these gaps?
HTML:
<body>
<div id="main">
<ul class="header">
<li class="title">wictorht</li>
<li class="header">
<a class="header" href="https://bitbucket.org/htor/dwmst/src">dwms</a>
</li>
<li class="header">
<a class="header" href="https://bitbucket.org/htor/linux/src">linux</a>
</li>
<li class="header">
<a class="header" href="http://www.fsf.org/register_form?referrer=10397">fsf</a>
</li>
<li class="header">
<a class="header" href="http://stackexchange.com/users/1006063">stackexhange</a>
</li>
</ul>
</div>
</body>
CSS:
body {
background: #666666;
color: #c0c0c0;
margin: 0;
}
a.header {
text-decoration: none;
padding: 10px;
margin: 0;
}
a.header:hover, a.header:active {
background-color: #666666;
color: #c0c0c0;
}
ul.header {
background-color: #c1c1c1;
color: #666666;
list-style: none;
padding: 10px 10px 10px 0;
margin: 0 0 10px 0;
}
li.header {
display: inline;
}
li.title {
background-color: #000000;
color: #bada55;
display: inline;
padding: 10px;
}
This is because all white-space, including new-lines, between elements is collapsed down to a single space when rendered by the client's browser. To hide the spaces you can either:
Remove the spaces between li elements:
<li><!-- content --></li><li><!-- more content --></li>
Set the font-size of the parent ul to 0, and redefine the font-size of the li element:
ul {
font-size: 0;
}
ul li {
font-size: 14px;
}
Comment out the gaps between the li elements:
<li>Content</li><!--
--><li>Next li</li>
Float the li elements instead of using display: inline, which removes the spaces by taking the elements out of the normal flow:
ul {
overflow: hidden; /* to keep the li 'visibily' within the bounds of the ul */
}
ul li {
float: left;
}
Close the li tag on the next line, before the next li opening tag this feels slightly wrong to me, but it is valid:
<li>First li</li
><li>Second li</li>
(Or, obviously, place the next li opening-tag on the previous line, immediately after the previous element's closing tag:
<li>First li</li><
li>Second li</li>
)
The gaps are caused by the whitespace between the <li></li> tags.
Try <li>...</li><li>...</li> as a comparison.
Anyways, avoid this with display:block and using float:left
This is a great post explaining what is happening and the work arounds that have already been mentioned by the previous answers.
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
You also have a little trouble with your css selector names, you actually only need one class and you can take advantage of the nature of CSS to do the rest.
.header {
background-color: #c1c1c1;
color: #666666;
list-style: none;
padding: 10px 10px 10px 0;
margin: 0 0 10px 0;
}
Now target all the 'li' tags that are children of the .header class
.header li {
display: inline;
}
Now target all the 'a' tags that are children of the .header class (these happen to be inside your 'li' tags)
.header a {
/* etc */
}
I have a couple un-ordered lists on my page. Both lists use list-style: disc inside;. Each list's list-items have a couple div's inside them. The problem is that the list-item's content takes up multiple lines and the disc is appearing vertically, at the bottom of the multi-line list-item.
Here is a screenshot kind of showing the problem I am experiencing. Note that I stole the image from a similar question, it is not my HTML or CSS.
Here is a striped down version of my HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="billing_form">
<div id="purchase_items">
<h2>Your purchase</h2>
<h4>Items:</h4>
<div class="items">
<ul>
<li>
<div class="item">First Product - one year license</div>
<div class="price">$99.00 USD</div>
</li>
<li>
<div class="item">Second product & 3 year Product Plan</div>
<div class="price">$125.00 USD</div>
</li>
</ul>
</div>
<div class="subtotal">SUBTOTAL: $224.00 USD</div>
<h4>Discounts:</h4>
<div class="discount">
<ul>
<li>
<div class="item">A really long discount item name - with extra info on three lines!</div>
<div class="price">- $20.00 USD</div>
</li>
</ul>
</div>
<div class="total">TOTAL: $204.00 USD</div>
</div>
</div>
</body>
</html>
And here is the CSS, as small as I thought was relevant:
html
{
font-family: sans-serif;
}
#billing_form
{
width: 350px;
margin: 0 auto;
font-size: 14px;
background-color: #EEEEEE;
}
#billing_form .items
{
position:relative;
}
#billing_form .discount
{
position:relative;
color:#3665B0;
}
#billing_form ul
{
margin: 0;
padding: 0;
list-style: disc inside;
}
#billing_form .items .item,
#billing_form .discount .item
{
display: inline-block;
width: 190px;
}
#billing_form .price
{
float: right;
padding-left: 20px;
}
#billing_form .items,
#billing_form .discount,
#billing_form .subtotal,
#billing_form .total
{
width: 100%;
}
#billing_form .subtotal,
#billing_form .total
{
text-align: right;
margin-top: 5px;
border-top: 1px solid;
font-weight: bold;
}
#billing_form #purchase_items
{
margin: 10px 10px 10px;
}
I found a similar SO question. Unfortunately, the accepted (and only) answer to it states to try position: relative; and vertical-align: top; but it didn't work for me. I tried it with both #billing_form ul and #billing_form ul li and neither worked. They also mention a IE7 hack fix, but I don't think that is relevant to me because I am experiencing the problem in Firefox 3 & 4 and Google Chrome.
Does anyone know how I can make the list-item bullets (discs) appear at the top of each line item?
It looks like vertical-align: text-top; will do what you want (see spec). I believe the reason is that you are creating tall inline blocks that are aligning to the top of the box which is being pushed up by the tall inline box so aligning to top doesn't do what you want. However, I believe that using text-top will align it with the top of where the text is (and the bullet point).
http://jsfiddle.net/Yayuj/ is a fiddle that does what you want (I believe) and has primarily this updated section from your CSS:
#billing_form .discount .item
{
display: inline-block;
width: 190px;
vertical-align: text-top;
}
Any other differences to what you have pasted above should be cosmetic.