Here is my CSS:
ul.list-ok {
list-style: none;
margin: 0;
}
ul.list-ok li {
margin-bottom: 8px;
height: 18px;
line-height: 18px;
}
.fa-angle-right:before {
content: "\f105";
}
Here is my HTML:
<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money. This is a very long bullet point that needs to wrap and wrap and wrap so that a very long paragraph lines up properly.</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>
Here is my output:
Here is my fiddle.
Here is my issue ;)
I would like the the word 'and' to wrap properly and line up with the start of the other text, I was able to achieve that with using other list-styles but the client wants to use this method. I have searched google and tried a number of different techniques to align the text and also tried enclosing my text in <p> and other elements in an effort to achieve my desired output. I am at a loss and seem to be getting further away from the answer the more tutorials I follow and links I find on google. Any help is appreciated.
EDIT:
I have used the attribute display:inline-block; but it cuts the text off on a mobile device so this is not an option, i need the text to wrap properly. In an effort to make the question more simple I cut out several bullet points that are quite long
This is what I would like the finished product to look like, but using my custom bullet point created by the fa-angle-right class:
Try white-space:nowrap Fiddle
ul.list-ok {
list-style: none;
margin: 0;
}
ul.list-ok li {
margin-bottom: 8px;
height: 18px;
line-height: 18px;
white-space:nowrap;
}
.fa-angle-right:before {
content: "\f105";
}
<ul class="list-ok" style="margin-top: 25px !important;display:inline-block;">
<li style="height: initial;"><i class="fa fa-angle-right"></i>Streamlined processes saving you time and money</li>
<li style="height: initial;"><i class="fa fa-angle-right"></i>A+ rated with the BBB</li>
</ul>
Wrap the li text in '<\span><\/span>' tag and style it with as per your need.
try to fix the min-width of the <\span><\/span> so that it will not distorted in smaller screens.
Related
I have a piece of code that compares the same line across multiple poems. It works fine, except for when the initial letter of the line appears in the manuscript original as a large capital, like this:
As you can see, when that happens the comparison gets all wonky. As far as I can tell, this is because the W is a span encapsulated inside of a div:
<div class="comparison" id="EETS.QD.1" style="display: block;">
<div class="compare_item" style="margin-left: 25px;">London, British Library Harley 2251:
<a style="text-decoration:none; color:#D5D5E5;" href="Quis_Dabit/British_Library_Harley_2251/British_Library_Harley_2251_f42v.html">
<span class="capital_2_blue">W</span>
ho shal gyve ยท vnto my hede a welle
</a>
</div>
</div>
with the style attributes generated via javascript because the comparison is generated onClick. The CSS I use to style both the divs and the span is as follows:
div.comparison {
display: block;
height: auto;
width: 755px;
margin-right: 10px;
padding-left: 10px;
margin-left: auto;
background-color: #454595;
border-width: 1px;
font-size: 12pt;
color: #EFFFFF;
display: none;
}
span.capital_2_blue{
float: left;
color: blue;
font-size: 60pt;
line-height: 12pt;
padding-top: 30px;
padding-bottom: 20px;
padding-right: 20px;
}
My question is this: how can I display each of the lines so that any oversized letters appear at the beginning of the actual line of text, as expected? This is what I'm shooting for:
I've been able to achieve it, sort of, by adding display:contents to the styling for my span, but that makes the W extend outside of the generated div on the page:
How would I go about styling these elements to achieve the look I'm hoping for, with the initials staying the height they're displayed in the text proper but not wrapping as they are currently? And how do I make sure the span plays nicely with its surrounding div? Thank you.
You should remove float:left and add display:inline-block to span.capital_2_blue.
That is because floated content removed from normal flow and other content will wrap around it.
https://developer.mozilla.org/en-US/docs/Web/CSS/float
I am using a customer list style image for an LI and i am wanting to line up the text in the centre of the icon.
I have tried using margins and paddings to no avail.
Please see code below and screenshot
HTML:
<ul class="homeList">
<li>Over 1 million happy travellers</li>
<li>Over 450 local pick-up points with return travel for your convenience</li
<li>Great range of breaks across Britain, Europe & America</li>
<li>Included excursion programmes</li>
<li>Superb value assured</li>
</ul>
CSS:
.homeList li {
list-style-image: url(../images/bulleticon.png);
line-height: 20px;
padding: 0;
margin: 0;
}
And this is how it is looking currently
Instead of list-style-img use background-image for the list item.
li {
list-style: none;
background: url(../images/bulleticon.png) left center;
padding-left: 20px;
}
And you can change easier the image position as you change the background-position property.
I am learning how to code HTML and CSS, and I decided to make my own website in the process.
My question is: how would I align smaller text to a bigger object, for example, links to different pages on my website neatly aligned under my full name with the links flush to the of the beginning and end of my full name?
I know describing it may have been a bit confusing, so here's an image of what I mean:
Any suggestions?
Thanks!
You can approximate the look and design regardless of the header length, but in the end, CSS doesn't offer as precise typographical tools as you'd need and you will have to nudge the percentages one way or another once you know the length of your actual text.
Sample Jsfiddle
HTML:
<div id="container">
<h1>Large Title Here Etc</h1>
<div id="sub">
<span>music</span>
<span>film</span>
<span>web</span>
<span>photo</span>
</div>
</div>
CSS:
body {
text-align: center;
}
#container {
display: inline-block;
}
h1 {
font-size: 2em;
}
#sub {
font-size: 1em;
display: table;
width: 120%;
box-sizing: border-box;
margin: 0 -10%;
}
#sub span {
display: table-cell;
padding: 0 2%;
}
links flush to the beginning and end of my full name
Get out of the habit of thinking this way as you design websites. This will lead to endless headaches and frustrations for you, as it depends on browser rendering (and possibly rendering bugs), the user's font size, the user's font, and loads of other factors you cannot control. Instead of going for 'pixel precision', the idea is simply to make it look as good as you can on most things.
When designing things like this, consider the markup first. What is the structure of what you're actually writing? In your linked image, Full Name looks to me like a header (perhaps h1), while menus like that are normally done as styled unordered lists (ul) these days. Below is an example of how I might make something similar to what is in your image.
Here is the markup:
<div id="container">
<h1>Full Name</h1>
<ul>
<li>music</li>
<li>film</li>
<li>web</li>
<li>photo</li>
</ul>
</div>
and the CSS used, with comments:
#container { border: 1px solid; }
h1 {
margin-bottom: 0;
text-align: center;
}
ul {
margin: 0.5em;
/* remove default padding inserted by browser */
padding-left: 0;
/* no bullets */
list-style-type: none;
/* this works on inline objects, not just text */
text-align: center;
}
li {
/* hybrid of inline and block; obeys text-align */
/* Also note this does not work in IE <9. Workarounds exist. */
display: inline-block;
padding: 3px;
}
And here is the end result: http://jsfiddle.net/3PLgz/1/
I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div>
<span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
<span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
Based on a proposed a solution for a similar problem here, you can do something like this.
Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services {
overflow: auto;
padding: 17px 0 9px 0;
}
.main-services li {
list-style: none;
float: left;
border-right: 1px dashed #E53B00;
padding-right: 14px;
}
.main-services li a {
display: block;
height: 78px;
color: #ED5D04;
text-decoration: none;
}
.main-services li a img {
vertical-align: middle;
}
.main-services li a span {
display: inline-block;
vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
<li class="service-1">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>Some text goes here</span>
</a>
</li>
<li class="service-2">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text here</span>
</a>
</li>
<li class="service-3">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text goes here but this text overruns</span>
</a>
</li>
</ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.
The top navigation at http://ci2.totalshopuk.com has dividers on the left which means the last link doesn't have a divider. I would either like to remove the first divider or add one at the end.
I copied the .navmenuitem1 style and made a new one .navmenuitemfirst1 and removed the background but strangely the first link was put on a line above the rest!? (even a straight copy of the style does the same thing).
Example:-
<ul class="navmenu1">
<li class="navmenuitemfirst1">Home</li>
<li class="navmenuitem1">Download</li>
<li class="navmenuitem1">About Us</li>
<li class="navmenuitem1">FAQ</li>
<li class="navmenuitem1">Newsletter</li>
<li class="navmenuitem1">License</li>
<li class="navmenuitem1">Contact Us</li>
</ul>
Lastly, in IE6 none of the background images show, I just get the colour as the background... however the backgrounds on the original table design at http://www.totalshopuk.com show correctly.
Any help is very much appreciated!
-- Duplicating all .navmenuitem styles fixed the divider issue --
.navmenuitemfirst,.navmenuitem {
display: inline;
margin: 0;
padding: 0;
}
.navmenuitemfirst a {
color: #FFF;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
.navmenuitem a {
background: url(../images/navdivider.png) no-repeat;
color: #FFF;
font-size: 16px;
padding-left: 30px;
padding-right: 30px;
}
.navmenuitemfirst a:hover,.navmenuitem a:hover {
color: #E64D29;
}
Ok, the answer to your first question can have to do with the a:
http://jsfiddle.net/9DTTd/1/
I created a new class for .navmenuitemfirst1 a
You might have been applying just the new class, when the background style is in the a (the a is a block with a background). I can't see any error with lines, but check it and let me know. This might also answer the second concern about the background, but I don't have ie6 to check it :3
EDIT: I later noticed why it wasn't working, silly me. The class needed to have also the inline property:
.navmenuitem1,.navmenuitem2,.navmenuitemfirst1 {
display: inline;
margin: 0;
padding: 0;
}
Probaly the .navmenuitem1 has an position:relative and float:left and the .navmenuitemfirst1 hasn't. As utopicam asked make an jsfiddle for it so we could check the css with it.