I know how to create a border, How do I fill in the rest inside the border with a different color? Here's what I have so far:
<div style="width:200px;height:100px;border:6px outset orange;">text</div>
Use
background:#fff
or any color;
and one more advise never use inline css for optimal output use external CSS
<div id="something">text</div>
#something
{
width:200px;
height:100px;
//likewise
}
Here you go: http://jsfiddle.net/XVDkS/
Explanation: it adds box shadows (at least 2 of them) after the border (with 0 blur). Manipulate the number of shadows & the width of them according to your need. You can as well use blurring, if required. Read the MDN article for more details on box-shadows.
It's a CSS3 solution, so old IE versions won't play nice (unless you do dark magics on it).
use the background property, for example:
background:#ccc;
which would leave your code looking like this:
<div style="width:200px;height:100px;border:6px solid orange; background:#ccc;">text</div>
<div style="width:200px;height:100px;border:6px outset orange;background:#000000">text</div>
use css background property
If you mean a background this will help
CSS
backgound:black;
HTMl with CSS
<div style="width:200px;height:100px;border:6px outset orange;background:black;">text</div>
you can use groove or ridge in place of outset,
See here is some examples for this on W3schools
http://www.w3schools.com/cssref/playit.asp?filename=playcss_border-style&preval=none
or if you want 2 borders and a different border then you try this
<div style="width:200px;height:100px;border:1px solid #000">
<div style="width:190px;height:90px;border:5px solid orange">
<div style="width:188px;height:88px;border:1px solid #000">
test
</div>
</div>
</div>
Demo is here:
http://jsfiddle.net/SPhec/
Related
I have created two div tags. One containing /hello/ the other containing /world/. My issue is i want both of these to be on the same line so I put in the code display: inline, but that did not work. I also want /hello/ to have a background color of yellow. so I have tried giving them classes but that did not work either. Please simple answers because I am only 12
You might be messing up with class names or while importing the CSS files Here is the example that works fine for me
See if this is what you want,
<div class="firstDiv">
Hello
</div>
<div>
World
</div>
And my CSS as,
div{
display:inline;
}
.firstDiv{
background-color: red
}
You can also try inline CSS to get the same effect,
<div style="display:inline;background-color:red">
Hello
</div>
<div style="display:inline">
World
</div>
Div are block elements. Which means by default they will place on a new line. You will need to use css to make them display inline.
<div style="float:left; border:1px solid red; width:200px; height:400px;"></div>
<div style="float:left; border:1px solid blue; width:200px; height:400px;"></div>
See the demo here: http://jsfiddle.net/2L878bcu/1/
Why am I getting this strange padding, and how can I remove it?
<div style="border: 1px solid black;">
</div>
http://jsfiddle.net/uE9F6/1/
It's because the line-height is bigger than the image of the flag. Specify line-height:11px;. See this jsFiddle for more help.
For more information on this, see the W3C's information on the height of a line.
I'm very new to YUI. And I used this tool to generate some css grid layouts. But even though I get the code, when rendered in browser I can't able to see the borders at all. But others(like alignment, the number of columns..) are correct.
How do I add border to the YUI generated code?
Thanks in advance
You can add a border to YUI2 grids by adding styles to the yui-u class
.yui-u {
border: 1px solid black;
}
However, borders don't play very nice with YUI2 grids because it relies on percentage based widths for columns, so you'll have to insert another div inside each unit and add a border to that div:
<style>.yui-u-inner { border: 1px solid black; }</style>
<div class="yui-g">
<div class="yui-u first">
<div class="yui-u-inner"></div>
</div>
<div class="yui-u">
<div class="yui-u-inner"></div>
</div>
</div>
There may be more elegant solutions.
You should consider moving to YUI3. YUI2 is only on maintenance mode and there is no new development besides basic bug fixing. YUI3 is quite active and in particular its CSS grids are a lot simpler to use.
I'm making a website (Although I know nothing about HTML & Photoshop).
Its quite a challenge for me and I'm pretty happy with what I got so far.
Now I want to make boxes / floating squares on the site.
So I wanted to do this by using a the div but I have no clue how :#
<div id="div1" style="background-image: url(../bg_content_middle.png);height: 129px">
HELLO IS THIS A BOX?
</div>
I have this in my style.css:
#div1 {Background: url("bg_content_middle.png");}
bg_content_middle.png is a 1 pixel high "bar" which I want between top and bottom.
And thats not even working :(
Please help me.
You're mixing in-line CSS with external CSS rules. The inline style with ../bg_content_middle.png is overriding the other background image url of bg_content_middle.png. You only need to define it once.
In this case you could go for a pure CSS solution:
<div id="div1">HELLO I AM A BOX ^_^</div>
#div1 {
background-color: #900;
border: #f33 1px solid;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}
Please don't number your divs though, call them something relevant like <div id="content">.
Hope that helps
1) Make the B in background lower-case
2) Is the image in the same directory as style.css? If not, you'll have to link to the correct directory.
well, if all you want your div to have a backround, you can have something as simple as this example from this tutorial:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
First of all, you only need to define this particular style once, but inline styles (styles within the tag's <style> attribute.) take precedence. You should remove the inline style in this case, since it's redundant and double check your image paths just in case. Remember that css paths can be document relative, in which case they refer to the location of the css file, and are not relative to the HTML page.
If it's one pixel high you might want to set the repeat property as well. put this in the element's CSS:
background-repeat: repeat-y;
And set a width equivalent to the image width.
You need to set the position : absolute in your css. From there you can use top, left and height to position and size your tags
As shown in this screenshot:
I tried looking in the source code , but couldn't find it myself.
For the header, they use empty divs with the class .gbh, which provides the style border-top: 1px solid #C9D7F1;
Firebug's Parsing
<span id="ghead" style="visiblity:visible;">
<div id="guser" width="100%">...</div>
<div class=gbh style=left:0></div>
<div class=gbh style=right:0></div>
</span>
Just use firebug or other similar tool and it'll take you 15 seconds.
border-left:1px solid #D3E1F9;