Does anyone have any explanation for this? I've tried setting a width on #menu_wrapper ul li to no avail.
sIFR is limited in width to the width of the element you're replacing. If this element is floated, the width is the actual width of the HTML text. If the Flash font is wider than the HTML font, this means the Flash text won't fit in the allowed width and splits into multiple lines.
Possible solutions:
Specify letter-spacing for the list items, such that the HTML text is as wide as the Flash text
Set forceSingleLine parameter for sIFR.replace() to true, with as downside that the Flash movies will show horizontal resizing as they are initialized
Combine the two solutions to get better initialization performance, and the security that the text will never split
sIFR calculates the dimensions of the element you're applying it to. Floated elements are shrinkwrapped and take up only the width in which its necessary for the text inside to display.
I suggest you give an id to each of those lis, something like
li#nav-blog { width:200px; }
This will give you finer control over how much area each of those nav list elements take up, and more space for sIFR to use.
My solution:
sIFR.replace(gothic, {
wmode: 'transparent',
forceSingleLine: true,
selector: '.quick-access li h2 a',
css: [
'.sIFR-root { background-color: transparent; font-size:24px; color: #abaaab; text-align: center; cursor: pointer;}',
'a {background-color: transparent; font-size:24px; color: #abaaab; text-decoration:none; text-align: center; cursor: pointer;}',
'a:hover {background-color: transparent; font-size:24px; color: #77b100; text-decoration:none; text-align: center; cursor: pointer;}'
],
});
And CSS:
h2 {
font-size: 18px;
font-weight: normal;
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.35;
margin: 0 0 5px;
}
*{
margin: 0;
padding: 0;
}
Related
How do you make the h1, h2 seem like standard text?
For example, I want the word 'standard' in the sentence above be a H1 on my page... I can make it the same size, issue is it makes a new line and margin etc...
set this in your CSS file (or tag).
play with the font sizes and such in order to set proper text size and color.
h1 {
font-weight: bold;
color: #fff;
font-size: 32px;
}
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
Both the <h1> and <p> elements are block level. Change them to inline so they don't occupy full width.
p, h1{
display:inline;
font-size:1em;
font-weight:normal;
}
<h1>hello</h1>
<p>there</p>
Just style it in CSS:
.your_class h1{
font-size:20px;
font-weight:400;
margin:0; // if You use for example bootstrap
padding:0; // if You use for example bootstrap
}
Let's pretend your font-size is 14px for the entire page. Change the h1 font-size to that and apply 0px line-height. This is the closest I was able to get.
h1 {
font-size: 14px;
line-height: 0px;
}
Edit: I didn't add bold because I am assuming you wish to keep the default font-weight applied by h1.
If you are wanted to make the word "standard" a different size to the rest of the text try wrapping it in a span and then give the span an id and edit it from CSS to be a larger size
i have the following HTML code:
<div class="impressum">
<a class="impressumstyle" href="https://www.google.de/?gws_rd=ssl">Impressum</a>
</div>
And in my CSS file:
.impressum {
position: relative;
left: 20px;
top: 275px;
background: transparent;
text-align: left;}
.impressumstyle {
font-family: Verdana;
font-style: normal;
font-weight: bold;
font-size: 16px;
color: #fff;
text-decoration: none;}
.impressumstyle:hover {
color: #8d8d8d;}
My problem is, that the link, when i use the top-value in .impressum, does not work anymore. And it does not change its color anymore as well..where is the problem?
Thanks.
try to target your ling directly through whole structure
.impressum .impressumstyle:hover {
color: #8d8d8d;}
or
.impressum a:hover {
color: #8d8d8d;}
or, if you wish to use the hover trigger over .impressum, use
.impressum:hover *{
color: #8d8d8d;}
or also this should work:
.impressum:hover a{
color: #8d8d8d;}
but beware, in some cases, using hover efect on parent element, if you want to change only its child, may not work, it depends on size of parent element. Especially with combination of absolute positioning, you can hover your link, but you actually not hovering its parent element in the same time.
My bad guys, i put this div into another, major div. the top value positioned this underneath the major div, that's why it doesn't work..
my task is to create a tag which CONTAINS an ordered list, that's my idea:
<section>
<h2>Ich kann physische Auszeichnungen:</h2>
<ol>
<li><b>Coffee, Bold Text </b></li>
<li><i>Tea, Italic Text</i></li>
<li><u>Milk, Underlined Text</u></li>
</ol>
</section>
is this correct? Second problem:
I am asked to make the <h> tag size 300% and word-spacing between listed text 50px with CSS styling, that's what I do:
h2 {
font-size: 300%;
}
ol {
word-spacing: 50px;
}
it seems to be working, but when I do that, the order (1.2.3) of the list disappears, how should I fix it?
You are targeting the wrong element for word spacing.
Try this:
h2 {
font-size: 300%;
}
b, i, u {
word-spacing: 50px;
}
See fiddle: https://jsfiddle.net/nLjy6xgp/1/
You could try something like this. You can wrap a <p> tag around your elements inside the li - then add the word spacing to the p tag
h2 {font-size: 300%;}
ol p { word-spacing: 50px; }
Example: http://jsfiddle.net/Lj5kz8p5/
This works:
h2 {
font-size: 300%;
}
li {
word-spacing: 50px;
margin-left:30px;
}
Fiddle
Seems that the wordspacing is messing with the numbering. Adding a bit of left margin works.
Okay, I have one <h1> in my <header> , and one <h1> in my <section>. The first question is why the size of this both <h1> different? I assume that they have their own size depends on their parents tags, which is I'm not certain of it. The second is I have styling this <h1> with external CSS, like:
h1{
font-size:2em;
}
tutorial
but, the <h1> inside the <header> won't change, only the <h1> inside the <section> make sense. I'm still beginner even in html, so please explain nicely. Thanks in advance.
Issue demo: http://jsfiddle.net/c06tpb3u
You're not using any CSS reset, which means you're at the browser's mercy and the default Stylsheet.
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
}
are the default styles set for h1 heading element
while for section things are getting salty:
h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
display: block;
font-size: 1.5em; /*<<<< and the new value*/
font-weight: bold;
margin: 0.83em 0;
}
h1 {
/*display: block;*/
/*font-size: 2em;*/
/*font-weight: bold;*/
/*margin: 0.67em 0;*/
}
so as you can notice (the above is inspecting in FF) that h1 is getting overwritten for h1 being inside section. <heading> element is omitted from that group leaving heading1 at the 2em default font size.
Browsers' default CSS for HTML elements
https://developer.mozilla.org/en/docs/Web/CSS/length
em This unit represents the calculated font-size of the element. If used on the font-size > property itself, it represents the inherited font-size of the element.
This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often has a value expressed in em.
To override any CSS add the !important notation to the style..
h1{
font-size:2em !important;
}
This will override any of the browsers default CSS.
Consider the following example: (live demo)
HTML:
<div>
<p>
<strong>Stack</strong>
<span>Overflow</span>
</p>
</div>
CSS:
p {
background-color: #aaa;
}
span {
background-color: #777;
}
How could I make <span>'s width to be all the available space?
Note: <strong> and <span> should be on the same line.
If you want the items on the same line with the full width taken up you could do this.
http://jsfiddle.net/Sohnee/Gfyjc/
p {
background-color: #aaa;
}
strong {
float: left;
}
span {
display: block;
background-color: #777;
margin-left: 40px;
}
But a better alternative would be to get the background-color run from the parent element.
If you don't need the span to actually be that wide, only have it look like it is, you can simply give the <p> the background colour of the <span> in your example, and the <strong> the background colour of the <p>.
p {
background-color: #777;
}
p strong {
background-color: #aaa;
}
See this example.
This only works correctly as long as the <p> has a padding of zero, though. Otherwise, you'll need the solution with the float.
Use display: inline-block to have possibility to set size and keep element positioned as inline elements. Mathias example changed to use inline-block: http://jsfiddle.net/gXDjZ/7/
span is basically an inline element
making it a block element using display:block; will add a \n before n after the element
so making it a block will take the span to the next line and you can float:left; on its sibling and bring it back to the same line
something like this
strong{
background-color: #aaa;
float:left;
}
span {
display: block;
background-color: #777;
}
you can also use padding-right:__px; in span
so that it takes up the adjacent spaces
span{ padding-right:433px; }
http://jsfiddle.net/gXDjZ/15/