If you are inserting something at the start of links (an icon, or whatever), how do you prevent the browser inserting a line break between the icon and the text when the link wraps at the edge of the page. i.e. With this:
a:before {
font-family: FontAwesome;
content: "\f101\00a0";
font-size: 0.9em;
opacity: 0.7;
text-decoration: none;
display: inline-block;
}
Currently if you resize the browser window, html like this:
<p>
This is some example text where my link
link is having its icon on the
previous line.
</p>
may render something like this:
This is some example text where my link %
link is having its icon on the previous line.
Try adding white-space:nowrap to your a element (not the :before psuedoelement)
However keep in mind that this may cause problems if the text cannot actually fit on one line in the window.
i.e. http://jsfiddle.net/A4VcV/4/
Remove the display:inline-block;
http://jsfiddle.net/ApaYP/
Tested on Mac Firefox, Safari and Chrome.
Hope this helps!
I prefer position: absolute; for this sort of thing. Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style media="all">
a {position: relative; padding-left: 1em;}
a:before {
font-family: FontAwesome;
content: "\f101\00a0";
font-size: 0.9em;
opacity: 0.7;
text-decoration: none;
position: absolute;
left: 0;
vertical-align: middle;
}
</style>
</head>
<body>
<p>This is some example text where my link link is having its icon on the previous line.</p>
</body>
</html>
Related
I am using the following HTML code:
hr {
border: none;
border-top: 3px double #333;
color: #333;
overflow: visible;
text-align: center;
height: 5px;
}
hr:after {
background: #fff;
content: "§";
padding: 0 4px;
position: relative;
top: -13px;
}
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="hr.css">
</head>
<body>
<p>§1: The first rule of Fight Club is: You do not talk about Fight Club.
</p>
<hr>
<p>§2: The second rule of Fight Club is: Always bring cupcakes.</p>
</body>
</html>
What should be happening is that TWO horizontal rules should appear between the two sentences, with an curly shape in the middle.
What is happening is that only a regular single horizontal rule appears.
What's going on?
Thanks!
Your code snippet shows your favoured outcome, perhaps in your working environment you have a cached version of your styles?
This in essence means that your browser is loading an older version of your code, you will need to force it to load the newer version, to do this in Google Chrome, open up your developer tools using right click > inspect and then hold down your mouse button on the refresh button until a dropdown appears.
When it does, try to select the option Empty Cache and Hard Reload
I'm having trouble centering the text inside a HTML month-input field. Here's a simplified version of my HTML/CSS to demonstrate the issue:
If you run it, you'll see that it is not centered - and if you try "text-align: right", it doesn't move all the way right either. It does move with both alternatives, which is strange.
Any idea why this happens?
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>
This is how it looks to me: As you can see the text is not centered inside the input box.
This doesn't work as expected because of the way input type="month" is rendered.
If you remove the disabled attribute you will see that (depending on the browser) you have some arrows and carets on the right. Taking them into account your text is in dead center.
You need to add this CSS
input[type=month]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-inner-spin-button {
display: none;
-webkit-appearance: none;
}
et voila
EDIT:
You can use :disabled CSS selector so it doesn't affect your other inputs
input[type=date]:disabled::-webkit-calendar-picker-indicator,
input[type=date]:disabled::-webkit-inner-spin-button {
-webkit-appearance: none;
display: none;
}
It is caused by default input controls being present (but invisible due to the input being disabled) when you give it month type. The inputs text is centered relatively to the inputs width minus the width of the controls. One way around it is giving them a manually selected margin to visually center the text.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body {
font-family: Helvetica;
font-size: 14px;
position: relative;
text-align: center;
}
.monthSelector{
display: inline-block;
text-align: center;
width: 250px;
box-sizing:border-box;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: -15px; /* <-- Apparently some margin are still there even though it's hidden */
}
</style>
</head>
<body>
<input disabled type="month" class="monthSelector" min="2017-01" max="2099-12" value="2018-01">
</body>
</html>
#Daut has given a good explanation about the rendering of hidden elements in the month input.
You could go with the solution but it adds another challenge. Now, you are forced to make sure that the CSS has enough properties to render correctly in all browsers. Then you usually go for polyfills or you could just mark the input type as text.
I am trying to put a <p> tag inline with an <a> tag, but I can't figure out how. I've tried several display types in css, but they either don't work or do something weird to it.
(Here is a bunch of unnecessary words because the thing is saying there is too much code and not enough words. I think its pretty dumb because what I said is enough unless someone specifically asks for details about something).
Here's some example code:
body {
margin: 0;
padding: 0;
background-color: #efefef;
}
header {
margin: 0;
margin-top: -10px;
background-color: #ffffff;
}
header p {
margin: 0;
font-family: "arial";
font-size: 50px;
color: #3c3c3c;
margin-top: 10px;
margin-left: 10px;
text-align: center;
}
header a {
}
#information {
width: 500px;
height: 250px;
background-color: #ffffff;
box-shadow: 7px 7px 4px grey;
margin-left: 100px;
margin-top: 150px;
}
#information p {
font-family: "arial";
font-size: 20px;
color: #1febff;
}
#delete {
margin-top: 2000px;
}
<!DOCTYPE html>
<html>
<head>
<title>SaHa | Color Scheme</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<p>SaHa</p>
Menu
</header>
<div id="information">
<p>Pretend that there is a bunch of important information here even though there really isn't.
This is normally where a message that actually means something would go, but this is just a
placeholder because I have nothing important to put here right now.
</p>
</div>
<div id="delete"></div>
</body>
</html>
In your HTML, try directly typing or after whatever text you want it to appear.
For example:<div>When i came<a> ut yiur name</a>so what do i do</div>
In your CSS body, try inline-block or just inline parameters with DISPLAY property to get any image or text into the normal flow of a line.
For example:
a {display:inline-block;}
Could you specify which elements in your example code you want inline?
Generally using display: inline and display: inline-block will make elements flow as if they were text. They will sit next to each other and jump to new lines when their container width gets too narrow. Browsers commonly apply display: block to <p> elements by default.
Assuming we are talking about the contents of your <header>, I added the following rule to your existing CSS. Check it out in action.
header p {
display: inline-block;
}
EDIT: Based on further comments, here is a solution to what you are looking for.
First of all I've wrapped your menu items in a nav element and made your main title a h1 element. Search engines like this better. A h1 element is also displayed inline by default and respects text-align properties on its parent container (which in this case is header).
<h1>SaHa</h1>
<nav>
Menu
Thing
Stuff
</nav>
On the CSS side I've made two crucial changes.
First, I've center-aligned your header text. This centers the new h1 element. Additionally I've set position: relative because we will need it in the next step.
header {
text-align: center;
position: relative;
}
Second, to position your menu to the right side of the screen I've lifted it from the regular flow of content with position: absolute. Now, by specifying either a top or bottom and left or right, we can position the menu anywhere in the header. Why the header? Because it is the nearest parent to nav that has a relative position. This is why we set it earlier!
nav {
position: absolute;
right: 10px;
bottom: 10px;
}
Try changing the values for right and bottom in this Codepen example. Try changing right to left and see what happens. What happens if you remove position: relative from .header?
The code below works fine in Chrome and FireFox but the glyph (a chevron) does appear for internet explorer.
Removing display:table-cell makes it appear.
I would like to keep the table-cell display in there.
Does anyone know why?
EDIT:
This only breaks on internet explorer 11 (and below) on windows 8 / 7 so maybe it is a bug?
It works on MS Edge and also IE11 on a windows 10 machine.
I've also changed the example below to show why I need table-cell. The link needs to be indented next to the chevron like so:
a {
display: table;
width: 150px;
text-decoration: none;
}
a::before {
padding-right: 20px;
display: table-cell;
vertical-align: middle;
font-family: "FontAwesome";
content: '\f054';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
i am a test link which goes over multiple lines
</div>
Alternative idea.
As its part of the table display would it be possible to have the icon behave like a table caption instead of a cell?
The icon displays on IE using the following:
div:before {
font-family: "FontAwesome";
content: '\f054';
display: table-caption;
}
first of all wich version of IE are you talking about?
try adding this meta-tag to your head:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
and if you're using IE8 add this script tag to your head:
<script src="http://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
As Tom Hood and RoToRa have kindly pointed there is a bug where pseudo element ignore the css font directives (e.g. font-family) when using table-cell.
To help anyone who this trips up I have posted my work round.
Keep the :before pseudo as display table-cell so it does the nice vertical indent and keeps the height of the real element.
Don't display anything (content: '') in the pseudo element for the child (the ).
Give it enough padding to give room to display something.
Put a pseudo element on the parent (the ).
Display the glyph using absolute positioning.
Phew!
Of course if you can get away with it and want to target latest browsers - flex box would much preferable.
div {
position: relative;
}
div::before {
font-family: "FontAwesome";
content: '\f054';
position: absolute;
top: 5px;
}
a {
display: table;
width: 150px;
text-decoration: none;
}
a::before {
padding-right: 30px;
display: table-cell;
height: 100%;
vertical-align: middle;
content: '';
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div>
i am a test link which goes over multiple lines
</div>
I am having trouble positioning a (div) element at the top right of a span. It works in FF3, but not in IE7:
<html>
<head>
<style>
body
{
font-size: 24px;
}
.tag
{
padding: 3px;
background-color: lightblue;
position: relative;
}
.x
{
position: absolute;
top: 0px;
right: 0px;
width: 10px;
height: 10px;
background-color: orange;
}
</style>
</head>
<body>
text <span class="tag">tag<div class="x"></div></span> text
</body>
</html>
In FF3, a 10x10 orange box is rendered at the top right corner of the light blue box. I am having trouble getting this to work in IE7. Thanks!
First, get a proper doctype for your page so that it's not rendered in quirks mode.
W3C: Recommended list of DTDs
Second, make sure that the code is valid. You can not put a block element (div) inside an inline element (span).
W3C markup validation
you can also see this post if you have trouble with positionning in IE7 in the future