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;
}
/**/}
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 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/
Hello I run a music website and it is in beta at the moment. I have a problem, the music results when loaded into a bottom player lists songs ontop of one another. I want them to be listed side by side but am having trouble doing so. How would you go about formatting a list of results as they are one ontop of eachother to list each search results side by side?
For example Song ''result 1'' "result 2'' "result 3"
instead of result 1
result 2
result 3
#current_playlist_rows {
overflow: auto;
height: 360px;
list-style: none;
padding: 0;
margin: 0;
border-right: 3px solid transparent;
float: left;
display: inline;
width: 500000px;
}
this makes the playlist flat and how i want it. but how do i make this scrollable to the right or left??
Say it's a li, with the class results, then you do the following:
li.results ul{
list-style: none;
}
li.results {
display: inline;
}
Wrap the results in a div tags and give them style -> float:left and some width, andd it will display them side by side :)
Example:
<div style='width:500px; float:left;height:100px;'></div>
<div style='width:370px; float:left;height:350px;'></div>
I hope that helped :)
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;
}
I want to do a navigation with list elements formatted as table so the width of all elements is the same but it won't work for Firefox.
HTML:
<div id="#navigation">
<ul>
<li>
<a>Menu1</a>
<ul>
<li><a>Sub1</a></li>
<li><a>Sub2</a></li>
</ul>
</li>
<li><a>Menu2</a></li>
</ul>
</div>
CSS (some properties are missing but only such things as color...):
#navigation {
position: relative;
height: 25px;
width: 852px;
}
#navigation>ul {
width: 850px;
top: 0px;
padding: 0;
margin: 1px;
list-style-type: none;
display: table;
table-layout: fixed;
border-collapse: collapse;
}
#navigation>ul>li {
position: relative;
height: 25px;
display: table-cell;
}
#navigation>ul>li>ul {
position: absolute;
width: 100%;
margin: 0;
padding: 0;
list-style-type: none;
}
#navigation>ul>li>ul>li {
/* nothing really happening here */
}
JS Fiddle:
http://jsfiddle.net/ZrsXv/2/
Everything works fine in Chrome, Safari, IE8 and greater and with some modifications also in IE6 and IE7
But in Firefox I will always get this
I know I'm not the first one having Problems but I have also tried solutions I found on stackoverflow but if something is changing this is everything I get
So is there a solution that won't mess everything up?
I think your problem is that position: relative; doesn't really work on table cells. I couldn't find a source at the moment but I'm pretty sure I have experienced the same problem before.
So what is happening in Firefox is that the width of #navigation>ul>li>ul is calculated as 100% of #navigation which is the closest ancestor with a position value other than static (default position value).
You can go around the problem by inserting a dummy element with position: relative; (f.ex. a div) inside #navigation>ul>li and then #navigation>ul>li>ul must be changed to #navigation>ul>li>div>ul
The easiest solution is to reference already-existing examples of menus built from nested lists.
http://www.devarticles.com/c/a/HTML/Building-a-Drop-Down-Menu-with-Nested-HTML-Lists/2/
I'm not really sure why you're using display: table, either; it's been a while since I last made a multilevel menu myself, but I never used that display method, and none of the examples I found after a brief search did either.
Reading other answers and comments I understand why you're using display: table and it could be acceptable...
I tryed different solutions and nothing work for Firefox so, if you are interested in using this method I can suggest to give the fisrst li element width to the children ul using javascript / jQuery like I did in your jsfiddle here
Otherwise I can not help you in a different way... sorry.