<style>
*{
display:block;
margin:0 auto;
}
#it is no use to show all the css and html code here.
Why *{display:block; margin:0 auto; } in css to display all the css code on the web?
If *{display:block; margin:0 auto; } was deleted on the html,no such error now.
What result in the effect？
Please try the whole html file.
<html>
<meta charset="UTF-8">
<head>
<style>
*{
display:block;
margin:0 auto;
}
body{
width:900px;
height:50px;
border:solid 4px green;
}
#d2{
width:100%;
height:auto;
}
#d21,#d22,#d23{
width:33%;
float:left;
border:1px solid red;
}
select,input{
width:150px;
height:auto;
}
</style>
</head>
<body>
<div id="d2">
<div id="d21">
<select id="id_select" name="s1">
<option>==> please select <==</option>
</select>
</div>
<div id="d22">
<input type="button" value="start" onclick="start()">
</div>
<div id="d23">
<input type="button" value="stop" onclick="stop()">
</div>
</div>
</body>
</html>
<style>...</style> is also HTML element. So by using * selector in CSS you also select <style> element and apply appropriate styling. <style>'s default style is display:none so by applying display:block you actually make it visible.
The * CSS selector selects all elements. This means that it includes the <style> element, as well as the <head> element, which the style tag lives it. Both of these are hidden by default by your browser.
By adding display: block, you are overriding the default display: none for all element, as shown in Chrome Developer Tools screenshot:
Chrome Developer Tools Screenshot
The direct equivalent of this would be to add this to your CSS:
head, style {
display: block;
}
Workaround
In order to force all elements to be displayed block, and centered, you may want to select just the ones that live inside of the <body> tag like so:
body * {
display: block;
margin: 0 auto;
}
* selector won't accept display:block. Every elements in html except <a> <small> <img> and more..... are block elements. So no need to add display:block to * element. Remove the display:block and check the result.
The * selector can also select all elements inside another element, but <a> <small> <span> are elements. So the css syntax become an error.
I'am currently working some code for my website and i came to this problem.I want to change background of paragraph on div's hover but it doesn't seems to works.I found some tutorials and I don't know what is wrong with my code
<style>
.more_news{
padding:10px;
border:1px double lightgray;
width:170px;
height:100px;
overflow: hidden;
margin:0px;
}
.more_news img{
width:100%;
height:100%;
}
.more_news p{
color:green;
position:absolute;
display:block;
background:gray;
margin-top:-40px;
width:170px;
height:40px;
}
.more_news div:hover ~ .more_news p{
background:red;
}
</style>
<div class="more_news">
<img src="images/proba1.png" class="more_news_img">
<p class="more_news_p">Hello</p>
</div>
All you need to do is select the class and element like so:
p.more_news_p:hover {
background:red;
}
No need for ~ or any other combinator/selector
http://jsfiddle.net/7H4XW/
Or, if you want to change the background when you hover over the entire div you can do something like this:
.more_news:hover p.more_news_p {
background:red;
}
http://jsfiddle.net/qfb9Z/
"I want to change background of paragraph on div's hover but it
doesn't seems to works."
You'd just use:
.more_news:hover > .more_news_p {
background:red;
}
You were using the general sibling selector ~, which selects sibling elements after that element.
whereas you actually want to target the paragraph which is a child element - hence the use of the direct child selector (>)
jsFiddle here
I am fairly comfortable with html5/css3 now, so I am trying to make a site using same and make it responsive.
So far things are going smoothly except for these two problems:
the use of em i dont understand the calculations at all, especially why i have to put this font: .81em/150% i am following a guide from a tutorial online.
i am having some imaginary padding on my div, you can see it here http://jsfiddle.net/NhZ2A/
e.g. I have on the body:
body{padding:0px; margin:0px;}
Then I have a div with an image like this:
<div id="slider">
<img src="images/slider.jpg"/>
</div>
Then in my css I have:
#slider{
width:100%;
height:auto;
}
#slider img{
width:60%;
height:auto;
}
With the above css I still have padding on the slider div below or maybe it's a margin on the image below.
I don't understand why and its killing me.
For the second issue :
The space is not padding, it is created because the <img> tag is an inline element and therefore has a whitespace use display:block; on the <img> tag to remove it.
Use css resets , To get consistent cross-browser experience,it should be included,any one among these.
Eric Meyer’s Reset CSS
HTML5 Doctor CSS Reset
Yahoo! (YUI 3) Reset CSS
Normalize.css
Get it from here --> http://www.cssreset.com/
Yes, CSS reset is important to set default initial value for each element.
reset.css Source - Reset5
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,audio,canvas,details,figcaption,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,summary,time,video
{
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
margin:0;
padding:0
}
body
{
line-height:1
}
article,aside,dialog,figure,footer,header,hgroup,nav,section,blockquote
{
display:block
}
nav ul
{
list-style:none
}
ol
{
list-style:decimal
}
ul
{
list-style:disc
}
ul ul
{
list-style:circle
}
blockquote,q
{
quotes:none
}
blockquote:before,blockquote:after,q:before,q:after
{
content:none
}
ins
{
text-decoration:underline
}
del
{
text-decoration:line-through
}
mark
{
background:none
}
abbr[title],dfn[title]
{
border-bottom:1px dotted #000;
cursor:help
}
table
{
border-collapse:collapse;
border-spacing:0
}
hr
{
display:block;
height:1px;
border:0;
border-top:1px solid #ccc;
margin:1em 0;
padding:0
}
input[type=submit],input[type=button],button
{
margin:0!important;
padding:0!important
}
input,select,a img
{
vertical-align:middle
}
em - Unit measurement values (1em is equal to the current font-size,same as 2em = 2*font-size)
Font Syntax:
font: font-style font-variant font-weight font-size/line-height font-family;
In your question value .81em/150%
.81em/150% - font-size/line-height
Every browser has a default behaviour and configuration
If you want a clean start from all of them, you must set it with a "reset.css" style sheet, to avoid undesirable behaviours and have all homogeneous.
Check this SO answer to get a proper reset CSS stylesheet:
https://stackoverflow.com/questions/167531/best-practice-for-css-reset-style-sheet
The first choice will be
Css Resets
Most Used Css Reset
JUSR USE CSS RESET
* {
margin:0;
padding:0;
box-sizing:border-box;
}
when i add this code to my css file it does not work ? However when i add this to my jsp file in the Head tag it works ?
Any idea what am i missing ?
<style>
input[type="text"]
{
width:500px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:200px;
margin-left:35px;
display:block;
}
</style>
Remove <style> </style> tags .Not required for external CSS.
No need for the style open and close in external style sheets.
if you are using an external CSS file then you should not use <style> tags. Use style tags only when your using the CSS in the same HTML document
The style tags tell the browser how to treat the contents when included directly within your page and are necessary because of the potential for mixed content types within a single html document.
However when you are defining styles directly within a CSS file you should not include the style tags as the contents are determined by the file type (i.e. an external style sheet).
Your CSS contents should look as follows:
input[type="text"]
{
width:500px;
display:block;
margin-bottom:10px;
background-color:yellow;
}
input[type="button"]
{
width:200px;
margin-left:35px;
display:block;
}
How to show an edit link on the profile picture just like the one on facebook but positioned at the right-top corner of the image?
HTML Code:
<div class="topgrid">
<a href="#"><img src="C:/images/users/image1.png"/>
<span class="image" id="image">Edit Picture</span>
</a>
</div>
CSS Code:
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
right:0;
width:80px;
position:absolute;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
I am here using the fixed width of the span element, but when I don't specify the width of the span element, the element doesn't appears at the absolute top right-corner . So i have to adjust the right property as:
right:13%;
which is not the standard way to do it. I need your valuable suggestions!
I am also attaching the tried out fiddle here!
http://jsfiddle.net/nQvEW/81/
Try this Fiddle
css:
.image {
position:relative;
color:#033;
font-size:12px;
background:#FFF;
display:none;
top:0;
}
.topgrid:hover .image{
display:block;
cursor:pointer;
position:relative;
width:auto;
background:none;
top:-205px;
}
.topgrid {
text-align:right;
width:300px;
height:200px;
margin:20px;
}
Is this what your looking for ?
The span element has no fixed width and remains in the top-right corner!
.image {
color:#033;
font-size:12px;
background:#FFF;
display:none;
width:auto;
float:right;
}
.topgrid:hover .image{
display:block;
margin:0 auto;
cursor:pointer;
}
.topgrid {
background-color:gray;
height:100px;
width:100px;
position:relative;
}
Here's the updated Fiddle: http://jsfiddle.net/b6Yw6/15/
What i have done is :
made the span width to auto and gave float:right.
Removed position:absolute;top:0;right:0 property from span. Add them if it causes browser compatibility problems
You can also do
.image{
background:transparent;
color:white;
font-weight:500;
}
to make it look good!
Here's the new Fiddle as per your request! Tell me if there's anymore changes to be made.
First step is to have the image be a background image rather than a straight-up <img> tag. This will allow you to add child nodes.
Add one such child node: the edit link. Make it appear where you want it, ignore the "only when hovering" part for now.
When you're ready, add display:none. Then, in the :hover style for the container, (ie. #container:hover>#editlink), add display:block. Done.
Or you can use the dynamic html tag generations every time on hover