Surely easy but I am not able ... JQUERY UI - WIDGET - HEADER
I was making this simple trial, but can anyone tell me why the distance from the border of DIV to the H2 header is so much ? How can I reduce it ? I don't want space ...
<html>
<head>
<title>Prova WIDGET</title>
<link rel="stylesheet" href="jquery-ui-1.8.custom/css/smoothness/jquery-ui-1.8.custom.css" type="text/css">
<link rel="stylesheet" href="jquery-ui-1.8.custom/development-bundle/ui/jquery-ui-1.8.custom.css" type="text/css">
<script src="jquery-ui-1.8.custom/development-bundle/jquery-1.4.2.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.custom/js/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(themify);
function themify(){
$("div").addClass("ui-widget ui-widget-content ui-corner-all");
$("input").addClass("ui-button ui-button-text");
$(":header").addClass("ui-widget-header ui-corner-all"); //ui-widget
}
</script>
<style>#test{display:none}</style>
<script type="text/javascript">
function rendiVisibile(){
if(document.getElementById("test").style.display = "none"){
$("#test").css({"width":"200px","float":"right","text-align":"center"});
$("#test").show("slide",{},1000);
}
}
</script>
</head>
<body>
<h2>Tentativo widget con DIV</h2>
<form action="">
<input type="button" value="Submit" id="pulsante" onclick="rendiVisibile()";><br/></br>
<div id="test">
<h2>CIAO</h2>
Un saluto
</div>
</form>
</body>
</html>
Here the CSS; there are no paddings
.ui-widget { font-f开发者_JAVA百科amily: Verdana,Arial,sans-serif; font-size: 1.1em; }
.ui-widget .ui-widget { font-size: 1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Verdana,Arial,sans-serif; font-size: 1em; }
.ui-widget-content { border: 2px solid #aaaaaa; background: #ffffff url(images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #222222; }
.ui-widget-content a { color: #222222; }
.ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
.ui-widget-header a { color: #222222; }
That bad padding is likely set in one of the CSS files you load (twice? there are two files named "jquery-ui-1.8.custom.css").
Hard to say without a visual, but here's one way to solve: use Firefox's "Web Developer" toolbar, choose the "Outline" option menu and select "Outline Current Element." Hover over the elements near your problem area. When the error is contained in the red box, check the hover bar up top to see the name of the CSS selector.
Set that selector locally to something like margin:0 0 0 0; in your own CSS file or <style> element and the "cascading" part of "Cascading Style Sheets" will kick in and solve your problem.
That margin is built in, as part of the default stylesheet, the same way the font size on an H2 is.
Here's a jsfiddle of your code, and here's a jsfiddle of only your HTML, no CSS or JavaScript. Notice how there's still a margin?
To solve this, either set a specific CSS rule like h2 { margin: 0; } or use a CSS reset if you feel like restyling every element.
加载中,请稍侯......
精彩评论