Question 1:
Is css possible to make the corner of a img or a div to this?
I don't concern browser support problem, are any css1 or css2 or css3 can make this in easy way?
Question 2:
Can I prevent the css for deepLevel1 which not affect to deepLevel2, without adding any css to deepLevel2
I mean the css will only affect to own level, not deeper level
I only want abc is red, and 123 is still black color.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
#deepLevel1
{
color:red;
}
#deepLevel2
{
}
</style>
</head>
<body>
<div id="deepLevel1">
abc<div id="deepLevel2">123</div>
</div>
</body>
</html>
Hey now you can do easily as like this
check to this live demo http://jsfiddle.net/pkZ8G/1/
more info http://www.freshdesignweb.com/useful-example-css3-style.html
Question 2: You cannot prevent the color being applied without overriding it in your deepLevel2 id style.
Related
I have two items
One with classes:
navbar__item dropdown-wrap navbar__item-layout
and two with classes:
navbar__item dropdown-wrap
I want like to hide item two without hide item one.
It's pretty simple using the :not(X) directive where X is the selector you don't want the styling rules to apply.
Let's take the following:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h2 class="navbar__item dropdown-wrap navbar__item-layout">Hello</h2>
<h2 class="navbar__item dropdown-wrap">Hello 2</h2>
</body>
</html>
And the CSS:
.navbar__item.dropdown-wrap:not(.navbar__item-layout) {
font-size: 11em;
}
This should work in your case! :)
What are we doing here?
We are telling the CSS style processor that we want to apply the style rules to items with the classes .navbar__item .dropdown-wrap but at the same time, the element can't contain the class .navbar__item-layout. You can go pretty complex by using :nth-child or parent, etc.
You can do that by using :nth-child (see more here).
So I am using the CSS framework Bulma.io.
Normally, without it, when doing
body {
background: black;
}
the background turns black.
But when I use Bulma.io, only the background behind a written text turns black and the rest of the website stays white. So does someone know how I can make the entire website turn black like it normally does without a framework?
Can you provide an example of what you're working with? My snippet below shows how you can change the background color. Other than setting the background-color property, I also set the body height to be the full height of the view.
body {
background-color: black;
height: 100vh;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.2/css/bulma.css" rel="stylesheet"/>
</head>
<body>
</body>
</html>
You can make that by modifying body background color from Generic variables [$body-background-color] override this variable before importing Bulma. an easy
explanation is now available https://bulma.io/documentation/customize/variables/
You can apply the background helper
<body class="has-background-grey-lighter"></body>
If you want to change the background of the whole page, you need to give the html tag a color class.
example:
<html lang="en" class="has-background-dark"></html>
I'm currently trying to make a div that is 100% as wide as the whole screen. And I did it by writing the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>100% width</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html,body {
padding:0px;
margin:0px;
width:100%;
}
</style>
</head>
<body>
<div style="background-color:yellow;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>
It works fine in normal zoom settings but when I do max zoom in (FireFox 6.0.2) the letters inside the div outgrows the yellow box. Is there a way for the yellow box to extend to the end of the window as well?
Thanks.
You can force the really long word to wrap with:
word-wrap: break-word;
in your div style.
Does it really matter what happens at maximum zoom though?
Option 1
If you want to keep the text within the yellow box try adding this CSS styling.
div {word-wrap: break-word;}
It will cause the text to go to the next line rather than continue.
Option 2
OR you could try hiding the content that goes past the div border using CSS styling
div {overflow:hidden;}
I'm learning css and trying to change background-color of all html except one div tag using :not element.
When i put like body:not(.one) it is changing background-color of whole html but not excluding the div mentioned in :not condition. Same problem if i use *:not(.one) Am i doing correct?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
body:not(.one)
{
background-color:blue;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div class="one">
this is first div
</div>
<div >
this is second div
</div>
<p>
this is a paragraph
</p>
</body>
</html>
The background color of your div is transparent. It looks to me like you're setting the body color and then expecting the div to be white or such like.
Given the CSS rule you're using, it's only styling the body tag anyway. You don't need to tell it not to style the div because it wasn't going to anyway.
The not() selector comes in handy when you want to style all divs for example, except ones that have a given class, such as:
div:not(.items){ /* some styles */}
This makes sens because there may be many div that we want to style, except div with the class items.
Your example in the question doesn't make so much sense because you're styling the body of which there's only one.
Your statement actually says:
Style all body tags except any body tag that has the class name one.
The :not selector is a CCS3 feature which not many browser support. Which browser are you testing in?
If all browsers are to be supported you should probably look into a javascript/jquery solution.
On a anchor-tag with a url to a external site we have a little icon that indicates that this is a link to a external site. Now this Icon is included via a additional span-element around the link-text and displayed via CSS background-image with position 100% 50% to always be at the end of the text and a padding-right for the text-gap between link and the following text
now this works fine in every browser — as long as the link-text is not longer than 1 line … if it is on multiple lines, the whole thing works still fine everywhere, except IE7 (IE6 is not supported by the project)… IE7 displays the Icon at the end of the first line and a few pixels to the bottom, instead of at the end of the link-/span-text on the second or third line…
Sometimes a picture says more than 1000 words: http://img859.imageshack.us/i/spdexternalerror.jpg/
HTML-Code: <span class="external">Link-Text to multiple lines</span>
CSS to the span-element: {background: url(/#/icon-new-window.png) no-repeat center right; padding-right: 14px;}
adding zoom:1 CSS property resolves this problem at most situations
Multi-line background is a problem for IE7. The correct way to do what you want, without adding extra markup, is to use CSS :after however :after is not supported natively in IE6 or 7 (support was added in IE8). If you don't mind using JavaScript to add :after support to IE7 then you could use the ie7-js library (also see this question :after and :before css pseudo elements hack for IE 7)
Using that library, the following is working for me in IE7.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
p {
width:100px;
border:1px dashed blue;
}
a.external:after {
content:url(http://www.knowledgewand.com/images/icon_new_window.gif);
}
</style>
<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->
</head>
<body>
<p>
Link-Text to multiple lines
</p>
</body>
</html>