I have a css homework to copy exactly a web site. I've done about 80% of my work but there're still some elements in the original website that i can't bring to my copy, for example, these separators:
I've tried some ways on the Internet but none of them seems to work with my current situation.
This is my work until now: https://dl.dropboxusercontent.com/u/178536659/xin/index.html.
Besides that, my teacher provided us some resources (included logos, images etc... to make a copy of the website). It includes some transparent-only horizontal rectangle images. I dont' know what it is used for ... Is it use for make these separators, i guess ?
So I hope you guys could help me with this ... any comments would be appreciated. Thanks so much in advanced !
They are simple borders, such as
ul#nav_menu li {
border-right: 1px solid #cecece;
}
Now remove the border of the first child from the element using some class or id and setting no border to it! Simple.
There are many ways to create vertical separators, the most common border-left/border-right or pseudo elements :before and :after, horizontal separators are made with <hr> tag.
Borders documentation:
http://www.w3schools.com/css/css_border.asp
Here are some good examples with pseudo-elements (which you can use with your images):
http://krasimirtsonev.com/blog/article/CSS-before-and-after-pseudo-elements-in-practice
You can also create divs, give them css properties to emulate a separator and place them in between or use images.
Use this in your CSS. I think it will work for you.
#header ul li{border-right:2px solid #d8d8d8;}#header ul li:last-child{border:none;}
Related
I have a weird one that I can't seem to be able to figure out. I am new to CSS and decided to use bootstrap to assist with styles etc.
the problem I have is when I try to assign two classes to a div element, 1 being the bootstrap column and another from my own stylesheet.
the code from my stylesheet seems to be ignored in some cases. now i have taken that one bit of code and css out and put it into the jsfiddle but it works fine. its only when combined with the rest of the html does it seem to have issues. also note that if i use inline styles it works...
I copied the entire code to js fiddle now so that you guys can replicate the issue. the section I am having issues with is the 4 images that are side by side
class="services-boxes"
anyway any assistance will be appreciated, as well as general feedback as I am new to this all! :)
https://jsfiddle.net/d9bv0grx/1/
Due to the way cascading style sheets work it (styles are be applied in order AND by specificity). It is most likely that styles you are expecting to see are being overridden by specificity.
Give this guide a read.
An example is that for <div id="selector">
#selector {background-color:red;}
div {background-color:green;}
You can expect to see a div with a red background, even though the green background is set afterwards, the id selector has greater specificity.
Then try and alter the specificity of your selectors in your css so that they will take precedence over in bootstrap.
Also just going to add, you have casing issues - you declare the class with lowercase in css, capitalised in your html.
You also have syntax issues in your css. Your css should look like:
.services-boxes {
padding:0;
max-height:500px;
width:100%;
}
Sort all this and you should be golden! jsfiddle
Looks like a combination of syntax errors. Your style should be declared like this:
.services-boxes {
padding:0px;
max-height: 500PX;
width:100%;
}
Note that the class is all lowercase (which should match style where declared which is currently Services-Boxes), a colon separating property and value (you has used = in some instances) and one set of curly braces per declaration (the above class .logo-image has 2 closing braces). Just a bit of formatting should see your code recognised
When you don't have total control over your HTML, you can use the !important property in css to give a priority to your styles.
.services-boxes {
color: red !important;
}
However keep in mind that you have to avoid the !important property as much as possible and do not use it unless you can't do it any other way.
Conditions
I'm essentially trying to replicate the webpage output for this assignment. Pictures used in webpage are here. That's basically my ultimate goal in all of this, getting this webpage as close to the Desired Output as possible. Not just similar, but as close to identical as possible.
This needs to be done in a way that doesn't just superficially reflect the intended output, but is done in the "right" way. For example, I could very well just adjust padding and margin sizes until it looks the way it needs to be, but that wouldn't solve the overarching problem and makes for badly styled code.
This has to be predominantly done with CSS. Only organizational HTML tags can be used and no packages or code can be imported.
Problem:
Each review is supposed to be separated by 20pt of vertical distance. This isn't working out for whatever reason.
It might have something to do with the fact that I've got some of my reviews looking like this when I need them to look like this.
That might have to do with the fact that padding is applying only to the text when it needs to apply to the review as a whole.
You can see in the first image that the blue bar, which represents padding, is only under the text and not under the image and the text.
I'm wondering if this has something to do with img elements being inline elements and not block elements? Any advice you have on this would be greatly apprecaited.
Code:
CSS
HTML
The padding does not work with your images because you have
float: left
applied to them. If you take that property out, the padding will take the img into account.
On a side note: maybe you should reconsider your html structure. Logically the review text and the reviewer belong together, so they should be enclosed by some parent div element. Just look at the real rotten tomatoes website and how they structure their reviews and let that "inspire" you ;-)
But basically it should be something like this:
<div class="review">
<div class="review_quote"></div>
<div class="review_source"></div>
</div>
Well structured HTML really helps with styling. HTML and CSS go hand in hand, so if your HTML is messy your CSS will be messy and "hacky" too. So first make sure your HTML makes sense (grouping, nesting, etc.) first.
add this class in your css
.reviewer-text::after {
clear: both;
content: "";
display: block;
}
Well.. your padding in css is refering only to class 'reviewer-info'. Elements with class 'reviewer-text' got their padding set to 8px;
If you want to have result for that block like on the picture apply bottom padding for 'reviewer-text'. Change:
.reviewer-text {
padding: 8px;
}
to:
.reviewer-text {
padding: 8px 8px 20px 8px;
}
See: https://fiddle.jshell.net/a9xxoz8L/1/
I would like to add some right-positioned borders to my menu.
But the ones that I can use by default are not working for me. Can anyone recommend where to get a bit better looking borders, and how i add them in the css?
the css style you need :
#mymenu
{
border-right:solid 50px red;
}
You could try using jQuery (its more shape than actual border)
There's also a set of jQuery plugins to use on top of that.
Finally, there are some nice and easy css3 border properties that you could use.
I hope this helps.
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com
Imagine I have this setup:
<div class="dialog">
<div class="toolbar first">Bla</div>
<div class="toolbar">Yada</div>
</div>
and this style definition:
.toolbar { background-color: red; }
I actually want a small 2 pixel border between the 2 "toolbars", so I see 2 general possibilities,
1) add a background colour to the "dialog" div and a margin to the first "toolbar":
.dialog { background-color: #fff }
.toolbar.first { margin-bottom: 2px; }
2) add a 2px border to the first toolbar:
.toolbar.first { border-bottom: 2px solid #fff }
Is there any difference in terms of "cost" of rendering/applying? Which is more desirable to that extent?
I know this is a very small example and it might make no real difference, but imagine a page with tens of these dialogs (dialogues?).
What a timely question!
I read this excellent article a couple of days ago about performance for CSS. Granted that CSS selector performance is tiny compared to the effort expended on serving an entire page, but it's still something to keep in mind.
http://css-tricks.com/efficiently-rendering-css/
EDIT
I didn't notice that the question was about CSS rules and not selectors. Trying to answer that question now.
Like I said in my original answer, CSS performance is the area you'll be able to gain the least amount of performance in your system (generally, unless you're using things like filters), and should be addressed last if you want to micro tune your site. It's better to keep it readable and work on the other parts of your site first.
I think we'll see real difference in performance only with tens of thousands of elements otherwise it'll stay in the millisecond margin.
So my advice it to stick with the most readable/simple way which is probably adding the "direct" border to the first toolbar. :)
personally I think your second option is the best, you're adding a border so use border ;) - however I'd do it reverse and add the border to the second toolbar.. imagine you have more than 2, what you actually want is for the second and subsequent ones to have a top border, but not the first
.toolbar { border-top: 2px solid #fff }
.toolbar.first { border: 0;}
that way that .first class is doing it's job and specifically overriding
Without knowing the which browser, and how the css is implemented, how the elements are rendered, which can vary by platform hardware, It's very difficult to find out. What may be slow today might be fast next month( and vice versa!)
About the only assumption you can make is that all browser vendors want their code to perform as fast as possible...
Keeping your CSS readable, consistent, and maintainable is much more important than 'performance'.
I would recommend to write it the way it is meant, and optimize only if you have reason to do it. If the space belongs logically to the dialog, then you should add it to the dialog, and then you can probably discard the "first" declaration.
Even if you have hundreds of this dialogs you won't notice a difference, anyway it's the client browser who will render the page and the server is not affected.
So to answer your question, yes some operations are more expensive than others, absolutely.
They generally fall into 2 categories:
Reflow triggering css styles
Non-reflow triggering css styles
Examples of styles that trigger reflow in general:
Width
Height
Margin
Padding *only if it affects adjacent elements
Float *only if it affects adjacent elements
Flex properties
Borders that affect
Basically anything that causes a portion of the DOM other than the current element to have recalculate its size
Removing elements at the top or middle of a list
Examples of styles that don't trigger reflow:
Background image
Background-color
Color
Border color
Padding * as long it's only on the current element and doesn't affect sizing for adjacent elements
Removing an element at the bottom of a list or on a section that doesn't cause other elements to have to recalculate their positions/sizing/etc