I’m making a website that has a title with differently colored words and fonts. To do this, I’ve put each word in a different div id to change the text color. I’m not sure if there is a better way than this…
Anyway, the first half of the title (the colored part) is lower than the rest of the title. It shows up this way on Firefox and Chrome, but on Internet Explorer it looks just fine. I’m not sure why there is a difference, I’ve tried out different fonts, which sometimes lessens the problem, but never completely eliminates it. Of course, when I add padding to make it line up, it messes it up on Internet Explorer.
Here’s the link for the page: http://www.dinneronthespot.com/index2.html
The solution is, use span
<span id="dotPerfect">
<span id="color1">Dinner </span>
<span id="color2">On The </span>
<span id="color3">Spot </span>
</span >
<span id="dotPersonal">Personal Meal Service is perfect for...</span>
try this:
#topText > h1 > div {
display: inline;
}
add this code in the stylesheet
Use span instead of div for this kind of actions.
<h1>
<span id="color1">Dinner </span><span id="color2">On The </span><span id="color3">Spot </span>
</h1>
I’ve put each word in a different div id to change the text color.
I’m not sure if there is a better way than this…
It's better to use <span>-Tags
DIV-Tags do also have a default property "display:block" from user agent style, that's the reason why you have to set "float:left" (which is really ugly in this case).
Try this
<div id="dotPerfect">
<div id="color1">Dinner </div>
<div id="color2">On The </div>
<div id="color3">Spot </div>
<div id="dotPersonal">Personal Meal Service is perfect for...</div>
</div>
Move the div with id dotPersonal to div with id dotPerfect.
Related
I would like to select a child if it is a specific number of specific (eg. .specialid) parent elements away from a specific (eg. .specialchild) child element.
example (selecting .specialchild under odd nestings of .specialid:
<span>ignored</span>
<div class="specialid"><!--odd - select-->
<span>ignore</span>
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of .specialid-->
<div class="specialid"><!--even - do not select-->
<div>
<div>
<span class="specialchild">ignored</span><!--ignore-->
</div>
</div>
<div class="specialid"><!--odd - select-->
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of .specialid-->
<span>ignored</span><!--ignore-->
</div>
</div>
<div><!--not .specialid, so ignore in even-odd toggle-->
<div class="specialid"><!--even - select-->
<span class="specialchild">ignored</span><!--ignore b/c even parent of .specialid-->
</div>
</div>
</div>
EDIT: If needed, I am open to JavaScript alternatives. (but no JQuery)
EDIT 2: visual: I am making a dark theme chrome extension, and i am using css filters to do it. when applied over each other, they cancel out. the element with the white background and the metal wolf thing, since it has a background image set, has the filter applied over it as well, thus keeping it from looking weird. However, my profile icon is located inside this element, and <img> tags are also filtered again to cancel out the effect. this is where the problem begins. this then leaves it with three filter effects, two of which cancel out, and leaving the image inverted. i am attempting to solve this issue for elements no matter how deeply they are nested. btw im using javascript to detect the background image and add a data- attribute to it.
EDIT i just figured out that i could also just have it so that all children of odd nestings of .specialid can be selected EXCEPT another nested .specialid, without even referencing .specialchild
Ok, first of all, you can't have repeated ID's as ID's are used for unique elements. In order to correct your code you'd have to do something like this:
<span>ignored</span>
<div class="specialid"><!--odd - select-->
<span>ignore</span>
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of #specialid-->
<div class="specialid"><!--even - do not select-->
<div>
<div>
<span class="specialchild">ignored</span><!--ignore-->
</div>
</div>
<div class="specialid"><!--odd - select-->
<span class="specialchild">not ignored</span><!--do not ignore b/c odd parent of #specialid-->
<span>ignored</span><!--ignore-->
</div>
</div>
<div><!--not #specialid, so ignore in even-odd toggle-->
<div class="specialid"><!--even - select-->
<span class="specialchild">ignored</span><!--ignore b/c even parent of #specialid-->
</div>
</div>
</div>
Honestly, I am not really sure what you're trying to achieve with this code, and the structure is a little strange, but I would probably recommend using definitions like these:
To refer to odd .specialid elements.
.specialid:nth-child(odd) { ... }
To refer to odd .specialchild child element of odd .specialid
.specialid:nth-child(odd) > .specialchild:nth-child(even) { ... }
To refer to odd .specialid elements inside odd .specialid elements
.specialid:nth-child(odd) .specialid:nth-child(even) { ... }
I am not sure what else you're trying to achieve but you should work on your HTML structure first.
I was able to answer my own question:
:not(.specialid) *:not(.specialid) .specialid *:not(.specialid) .specialchild{
/*styles*/
}
I'm trying to make a simple yet interactive webpage for my school. Our current homepage we use for links is plain and boring.
I've created this: JSFiddle
But when I open the 'Student Links', the 'PHHS Website' button seems to automatically position itself ~50 pixels up.
Code because I have to:
<a class="itemLink" href="http://hcps.us/phhs/">
<div class="itemStudentsLink" id="PHHSWebsite">
<p class="itemText">PHHS Website</p>
</div>
</a>
If anyone knows why it's acting like this, please tell me. I'm not sure why this problem occurs.
This has to do with the vertical alignment of the blocks and the fact that one of the block's text goes onto two lines. Add
.itemStudentsLink {
vertical-align: bottom;
}
http://jsfiddle.net/ExplosionPIlls/mKYaL/19/
I am trying to use an icon-stack inside of a link. When I just use a single icon, everything works as normal. But when trying to use a stacked icon, it doesn't appear in the link like a single icon would.
The first method I am using is:
<span class="icon-stack"><i class="icon-circle icon-stack-base"></i><i class="icon-twitter"></i></span>tweetthis
Seen: Broken Stacked Icon
That gives me something where the two icons are both left-aligned (off center) and the icons appear over top of the text.
I had thought that including the span with the icon-stack class in place of a single <i> would be the way to do it, but it's not. This works fine:
<i class="icon-circle"></i><i class="icon-twitter"></i>tweetthis
Seen: Inline icons
I am not sure where to put the container <span>, or if there needs to be more styles added to it. I've tried various combinations. Setting the a to display:block doesn't help (there are no other styles applied to the link).
When there is no text in the link, the result is the same. Setting the .icon-stack container class to display:block does help it work, but it's not perfect since the base icon is so much bigger than the icon on top.
It this something that is possible? Or am I pushing the limits of how stacked icons should be used?
Here you go..
<a href="http://google.com">
<span class="icon-stack">
<i class="icon-check-empty icon-stack-base"></i>
<i class="icon-twitter"></i>
</span>
link text
<br/>
</a>
Span set to inline-block to ensure that the icon stays in place
body {
color:#00000;
}
a {
text-decoration:none;
color:inherit;
display:block;
}
span.icon-stack {
display:inline-block;
}
Demo: http://jsfiddle.net/aB4nU/1/
This is fixed in 3.2.1-wip branch. Or you can wait for the release tomorrow. :)
I read about semantic HTML online...
Semantic HTML means using HTML tags for their implied meaning, rather than just using (meaningless) div and span tags for absolutely everything.
If you use <h1> instead of <div class="header">, and <h2> instead of , et cetera, Google and other search engines will interpret your headers as being important titles in your page. This way, when people search on the words in your headers and sub-headers, your page will be considered more relevant (and rank higher). Plus, it's much shorter and cleaner.
So, below is semantic,
<h1>My Website Name</h1>
<h2>My Website Tagline </h2>
What about this below?
<div id="header">
<h1><span class="hide">My Website Name</span></h1>
<h2><span class="hide">My Website Tagline</span></h2>
</div>
I tend to combine h tags with div and span tags like above - is this practised considered as the lack of semantic?
The reason why I have the span with the hide class is that I want to display the site logo instead of text. So use CSS to set the background of h1 as image and then hide the text. is this incorrect practise?
Then, if I don't use div, what can I use to make a box around the h1 and h2?
As far as I know, html 5 is not fully ready yet, we must not use <header> yet, must we??
Thanks.
I would do something like the following if I was going to use HTML5:
<header>
<hgroup>
<h1>My Website Name</h1>
<h2>My Website Tagline</h2>
</hgroup>
</header>
Remember to add display: block; to the HTML5 elements and createElement for IE in the CSS though. The header element shows the block is a header and the hgroup element is there to show that the second h* element is a sub heading, so shouldn't be taken into account when calculating the header levels in the document.
If you don't want to use HTML5 yet then you could use divs instead of the new elements, and use the HTML5 element names as the class value. This will make it easier to switch over when you feel comfortable using HMTL5 on a live site.
You don't really need to use the span elements. You can use tricks such as using a large negative text-indent in the CSS to hide the text off the screen.
If you want to display a logo instead of text, use an image. Google say so (even if they don't know the difference between a tag and an attribute). Taglines, BTW, are not subheadings (and the site name (and thus logo) is usually only a heading on the homepage).
<div id="header">
<h1><img src="foo.png" alt="My Website Name"></h1>
<p><img src="foo.png" alt="My Website Tagline"></p>
</div>
Unfortunately, Internet Explorer 8 does not recognize many HTML5 tags, and when I've tested it, I was unable to set CSS values for the <header> tag, for example. So for now I would recommend that you continue to use div tags to group your semantic meaning.
As a sidenote, Google does not like hidden text, and if you have a lot of it, it will consider it deceptive coding. One is probably fine, but you'd be better off using the alt attribute on the image tag.
Nobody suggested that you should not use DIVs at all... semantic HTML does not mean there cannot be div or span tags in your code. It just only means that whenever possible (there is a specific tag available for a specific semantic meaning) you should try to give semantic meaning.
h2 is not to be used for taglines, as somebody else already suggested.
Also, in my interpretation (some will argue), h1 is not for the name of your website. It is the title for the content on a specific page.
I agree with #David Dorward, the tag line should be in a p tag.
Your example (wrapping the header elements with a div) is perfectly acceptable, though I would like to raise a small caution: Be careful that you do not get in the habit of wrapping everything in div tags. For example:
<div class="content">
<div class="list">
<ul>
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
</div>
Since a ul tag is already a block element, the above markup would be better off like this:
<div class="content">
<ul class="list">
<li>something</li>
<li>something</li>
<li>something</li>
</ul>
</div>
And then just style the ul to look like the div.
On the matter of displaying the logo as an image:
If your logo is text-based, or has text in it, you would be better off doing the following:
HTML
<div id="header">
<h1 class="logo">My Logo Text - My Website Tagline</h1>
</div>
CSS
.logo { text-indent:-9999px;background-image:url(thelogo.jpg) no-repeat;}
/* Also add height and width based on your logo height and width */
I have two span elements. I want them to sit side-by-side and contain some text. Is this possible? If so what am I doing wrong?
.added-box{
background-color:#06C;
padding:8px;
margin:8px;
}
.edited-box{
background-color:#093;
padding:8px;
margin:8px;
}
And the page code is:
<p align="right">
<span class="edited-box">sfds<span>
<span class="added-box">sfds<span>
</p>
Edit: What I am hoping to get is a box, somewhat like the one on this page which has my name, time I asked the question and my points. I don't mind how I get it, but css is preferred, it looks like StackOverflow is using a table. Is this the only way to do this?
You have two typos in your HTML where you are failing to close the <span> tags with </span>. It should be:
<p align="right">
<span class="edited-box">sfds</span>
<span class="added-box">sfds</span>
</p>
This typo is causing your edited-box class to wrap everything and therefore the CSS is breaking.
Use for space between spans.