In HTML, I'm laying out an unordered list something like this:
Fruit: Apple, Banana, Cherry, Durian...
I am treating the word "Fruit: " as generated content. I want for the list to be able to wrap so that the second line is flush left with the first "Apple."
My current attempt at this is here. I've included a background color just to highlight the weird close-but-no-cigar spacing.
This probably isn't the exact correct method, but simply changing the -4em to -2.2em seems to get the trick done. Not sure how it tests across browsers or with font size changes, but it works as a start:
li:first-child:before {
content: 'fruits: ';
margin-left: -2.2em;
}
http://jsfiddle.net/2t8cq/4/
Update: This method does break down as font size increases or decreases.
What you need is typically done using a DEFINITION LIST. You will need to style it accordingly.
<dl>
<dt>Fruit:</dt>
<dd>Apple</dd>
<dd>Banana</dd>
</dl>
OK, here's what I came up with. It uses positioning instead of margins, which seems a little ugly, but it does work. I'm still open to other solutions.
The relevant part:
ul {
margin: 0 0 0 4em;
padding: 0;
position: relative;
}
li {
margin: 0;
padding: 0;
display: inline;
background-color: #ccc;
list-style: none;
}
li:first-child:before {
content: 'Fruit: ';
position: absolute;
left: -3em;
}
Related
I'm having issues with my nav bar, I'm wondering how I can make the set closer to the left most edge.
CSS:
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
}
#nav li
{
display: inline-block;
list-style-type: none; /* removes bullets */
padding: 10px;
margin: 0px; /* removes margins */
background: grey;
}
#nav li:hover
{
background: green;
user-select: green;
}
Fiddle: https://jsfiddle.net/yumyum0/cgx61w0q/2/
Also, I'm not sure if the background and user select in the #nav li:hover is redundant. I'm modeling it off of the tutorial on https://html.com/css/#example-nav, and I started to add things to try and style it the way I wanted. I'm still a long ways away from knowing what all of the declarations do. It used to be flush so I think I probably added something that has a conflict, or I removed it without knowing.
I also had a question that wasn't really related to this, is this formatting okay? I wasn't sure if there was a agreed upon way with brackets and everything else.
Placing this ruleset at the start of your code will remove the margins at the top of your navbar.
* {
position: relative;
margin: 0 0;
}
Your formatting is slightly off; place the opening bracket on the same line as the CSS selector, and make sure there is a gap between rulesets, for greater readability.
A good thing to do is set the styles for the HTML and Body tags. This is what I would do:
html, body {
margin: 0; // Removes space on the sides
box-sizing: border-box;
width: 100%;
height: 100%;
}
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
box-sizing: border-box; // Add this to take 100% width without overflowing
margin: 0; // Remove space above nav bar
}
...rest of your CSS
You can position absolute and declare it must be at the left most point of the page.
#nav
{
overflow: auto;
user-select: none;
background: grey;
width: 100%;
position: absolute;
left: 0;
}
Styling your code is up to you! I like keeping the name in the same line as the curly bracket like #nav {
Navigation spacing: One thing to research is a solution called "CSS Reset". Browsers like Chrome and Firefox have different "base values" for HTML selectors. A reset stylesheet ensures that all of your elements will have the same "base" styles. There are 1000 different reset sheets out there that different people have attempted. They all roughly do the same thing in my opinion.The <body> tag has margin assigned to it by default. A reset sheet would normally assign these to 0 amongst other things.
Kind of the same thing as above, the <ul> tag also has margin on it by default. You should add in the following CSS:
html, body {
margin: 0;
}
#nav
{
background: grey;
width: 100%;
margin: 0;
}
Let's discuss the user-select property. This property is what you would use in order to target a "highlight" or "text select" for a copy/paste situation on a webpage. I do not think this is what you should be using for a "hover" effect. You should be just fine with using the background property.
I am trying to float an li's :after, which includes a background element.
It works in every browser on Mac, and every browser on Win, EXCEPT IE.
I tried changing around parameters like the display and floating, which does not work.
CSS:
ul.nav li a:after {
background: url(images/nav_icon.png) no-repeat;
width: 8px;
height: 5px;
font-weight: 400;
content: "";
display: block;
float: right;
margin: 8px 0 0 6px;
}
Heres what it looks like right:
Heres what IE does:
I am thankful for any help. Only thing i found googling was clearfix tricks for IE7, nothing regarding how that stupid browser interpretes selectors.
Solved using conditional comments which contain display: inline-block and removing the floating for the :after.
Please visit this website.
There is a blank space at the bottom. I checked it and there is no minimum height mentioned in my css.
I suspect it's in the body's css details as below:
body {
line-height: 1.5;
font-size: 87.5%;
word-wrap: break-word;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
padding: 0;
border: 0;
outline: 0;
background: none repeat scroll 0 0 #EFEFEF;
}
html, body, #page {
height: 100%;
}
This removed the bleed for me in Safari 6.0.3;
#footer-wrapper {
margin-top: 40px;
background: url("../images/footer.png") repeat-x scroll 0 0;
overflow: hidden;
}
You might want to handle that overflow differently tho, based on the content inside it. But this should fix the white space.
I figured it out by just deleting nodes from the DOM bottom-up. It had to be in the #footer-wrapper. As margin-bottom didn't work and you were using relative positioning I figured it was some shadow styling bleeding out of that element.
Update (better fix)
Just found the real issue to the problem;
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
Change content: "."; to content: ""; and it's fixed. Or just remove that style at all, as it doesn't seem to have use in that case.
"overflow: hidden"
makes things harder but try,
"overflow: auto"
in order to be able to flow when you need.
I'm late to the show here but it may help somebody in my case I had an empty space at the top I added the margin-top=-20px now the empty space at the bottom, tried almost all suggestions I found on these and many threads and nothing. Decided to run it thru some HTML validator there are a few none of them pick up but after a couple one found an extra character(`) at the end of a tag, and that was it, so it was user clumsiness, took that thing out now my page was shifted, took the negative margin and all good. So try a validator and look for something like this.
margin-bottom: 0px;
This would do it
Btw ..nice site dude :)
Sometimes, it's some iframes/objects that are created by third party services that create this blank space. In my case, Google Adwords and Google Analytics was creating this. So, I removed by adding this CSS:
object[type="application/gas-events-cef"],
iframe[name="google_conversion_frame"] {
display: none !important;
height: 0 !important;
width: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
margin-top: -13px;
float: left;
}
Maybe you will need to add some extra rules for your case. Hope that helps.
I'm working with a specification requiring that the following code:
<dl>
<dt>Key</dt>
<dd>012345678901234567890123456789</dd>
</dl>
...render like so:
Key 01234567890123456
7890123456789
When the contents of the DD contain spaces, it works just fine, but when there are no spaces, it fails. Even including dd { word-wrap: break-word; } doesn't quite work, and results in the following:
Key
0123456789012345678901
23456789
My current CSS looks like this:
dl {
margin: 1em 0;
padding: 0;
width: 250px;
}
dt {
float: left;
clear: left;
margin: 0;
padding: 0 .5em 0 0;
font-weight: bold;
}
dd {
margin: 0;
padding: 0;
word-wrap: break-word;
}
dd:after {
content: ".";
visibility: hidden;
clear: left;
}
How can I achieve my intended effect using only HTML and CSS?
I have a demo up here, as well, to attempt to clarify my needs: http://cdpn.io/Ezujp (warning, contains SCSS rather than CSS, but it's not incredibly complex, so it should be easy to mentally translate).
I read, learned from, and made use of https://stackoverflow.com/a/1577397/771948, and while it got me closer to my intended solution, it did not meet all my needs.
I am not required to use a DL. If there is another way of achieving my intended effect in a cross-browser (IE7+) way, then I would be willing to use that instead, provided it is semantically correct and doesn't involve too many hacks.
I would try dt { display: run-in; } but that doesn't work in Firefox, and it still didn't result in any difference form what I have now (when dd { word-wrap: break-word } was included, the dd began on the next line, and then wrapped, just like it does now).
Edit: After doing a bit more searching around SO, I found this answer: https://stackoverflow.com/a/3284425/771948
It presented a few alternative options that are easier to style than a DL, but I'm not sure on the semantics. Nonetheless, I set up a working prototype using a ul structured in the following manner:
<ul>
<li><strong>Key</strong>012345678901234567890123456789</li>
</ul>
...which, when styled as follows:
ul {
outline: 1px solid #F00;
margin: 1em 0;
padding: 0;
width: 250px;
}
li {
width: 100%;
outline: 1px solid #00F;
margin: 0;
padding: 0;
word-wrap: break-word;
}
strong {
white-space: nowrap;
}
...renders as intended, but I'm not sure this is semantically correct, nor screen reader accessible. Does anyone have any useful advice for me in this scenario?
Thank you in advance. If nothing else, I hope this proves a useful resource to others in similar situations (because of links to two other SO answers for similar questions).
According to the CSS3 Text draft, you can use word-break: break-all (on the dd elements). The names are misnomers; the settings declare that any string in the content may be broken at any point. (This contrasts with word-wrap: break-word, which similarly allows “free” line breaks, but only when absolutely needed to avoid overflow, i.e. as emergency breaks.)
However, it is supported only by Firefox and by IE. For better browser coverage, you would need to insert e.g. zero-width spaces or <wbr> tags after each digit (but you could do this with client-side scripting); both options have pros and cons.
I have a list of phone extensions that I want to print a friendly version of it.
I have a print css for it to print appropriately onto paper, the extensions are located within an unordered list, which are floated to the left.
<ul>
<li>Larry Hughes <span class="ext">8291</span></li>
<li>Chuck Davis <span class="ext">3141</span></li>
<li>Kevin Skillis <span class="ext">5115</span></li>
</ul>
I float it left, and when it prints the second page, it leaves off the name part of the list (in Firefox, works fine in Google Chrome and IE), see here: http://cl.ly/de965aea63f66c13ba32
I am referring to this: http://www.alistapart.com/articles/goingtoprint/ - they mentioned something about applying a float:none; to the content part of the page. If I do that, how should I go about making the list show up in 4 columns? It is a dynamic list, pulled from a database.
Any help is appreciated.
If the purpose of the list is to associate names with extensions, then a dl or table would be more appropriate. If the purpose of the list is merely to list names and the extensions are just… extra, I guess you're alright with the ul — as for that ul, this CSS seems to work alright here:
/**/#media print {
ul {
list-style: none;
margin: 0;
padding: 0;
font: 12px/18px sans-serif;
}
li {
float: left;
width: 24%;
margin: 0 1% 0 0;
position: relative;
border-bottom: 1px solid gray;
}
li
span {
position: absolute;
right: 0;
top: 0;
}
/**/}