I'm trying to understand this webpage:
http://www.canadianliving.com/food/slow_cooker_beef_stew.php
It is divided into several sections where each section has a border around it. For example, to the right of the title "Slow-Cooker Beef Stew" is an image "tested till perfect". Immediately to the right of this is a border, which separates it from an advertisement. This border extends down and separates the section from the "Related Content" section below.
But what is making the border? I am using Chrome's Inspect Element, Computed Style, but none of the tags seem to have a border-style. What else can create a border?
(I'm not looking for the best way to make a border; I need to understand how other pages do it.)
EDIT:
Based on people's answers, I tried the html below, which is not working. I don't get how an image in a parent div is repeated in each child div in such a way that it fits exactly along the border.
<div style = "float:left;background-image:url('http://www.canadianliving.com/media/images/background_02.png?201206051535');background-clip:border-box;background-origin:padding-box;background-repeat:repeat-y;" >
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">hello</div>
<div style = "float:left;width:300px;background-clip:border-box;background-origin:padding-box;padding-left:8px">there</div>
</div>
http://www.canadianliving.com/media/images/background_02.png?201206051535
Its an image, not a border, remove the image to get rid of the 'border'.
I deduced this by selecting the container element and reviewing the css background property,
for future reference.
Here an example:
<style>
div#test {
height:800px;
width:800px;
background:url(http://www.canadianliving.com/media/images/background_02.png?201206051535) top right repeat-y #676767;
}
</style>
<div id="test">TestDiv<div>
Keep in mind, this is a rough sketch of what it should look like. I'm not planning on learning you this without some effort. Try w3schools for an html / css tutorial.
I'm betting we all did this kind of research and a lot of trying before trying to submit to these kind of forums.
Happy coding, good luck!
D.
The background is set on the div#right_col where the ads are. They have a padding-left of 8px (width of the shadow background image) and a background set on content-container with url('/media/images/background_02.png') 0 630px repeat-y.
basically, it is a background url that is used as a shadow border. Please look at the CSS of #content_container in firebug/chrome inspect element.
It is not a border but used as a seperator.
Related
I've been trying to place some bootstrap/html/css on top of CSS animated starfield as a background.
One way that seems to stick out online is to make a 1x1 pixel png. I'm hoping there is a way to code in transparency instead.
background: rgba - to play with alpha doesn't work.
opacity:0 also doesn't work.
z-index:-1 with the above also doesn't work.
I've been fiddling with it for a while. Here is the codepen.
http://s.codepen.io/awaybackhome/debug/QdqNNX
Ideally, I'd like to see the stars coming through the Div that contains text, the Div(column) left of the quote box, and the Div that contains the buttons. Instead, I'm just getting the black background.
In my experience this is fairly simple code, but a bit twisted initially. Start with a <div> for the background. Give it an id or class relating to position on top of the Star Field background. Now, in your CSS reference the new <div> by setting background-color: transparent;. This makes it effectively an invisible layer you can output on top of. Next, put your stuff inside the new <div> layer. HTML should look similar to this:
<div id="starFieldBackground">
<div id="background">
<p>Your Code Here</p>
</div>
</div>
And your CSS:
#background {
background-color:transparent;
}
Be sure to set the width and height of <div id="background">.
This could also be accomplished with z-index positioning with a bit more code.
Edit:
reference to background-color properties.
http://www.w3schools.com/cssref/pr_background-color.asp
I am using jquery and ajax to load different pages into my index page. links are targeted to open in a specific DiV and for some reason Every page that I create seems to have this white border at the top. I removed the padding from the css but for some reason every page that I load into the div pops up with white border at the top with the text in it. I want to remove this white border and align the content area to the center. Please help me
the code is a bit much to post please visit my website for a live view... only working links are Roster, and Labels....
http://www.trillumonopoly.com
Just take the background-color css rule off body.
Also, every major browser has a devtools component nowadays - it is your best friend.
edit: I see that it's applied by bootstrap. You can override it by specifying body { background-color: none; }
By the way, I think it's bad practice to apply a background image to the html node. Instead, apply it to the body node.
I'm working on a project in which I am using an image as a background for a menu. I have defined classes in my CSS stylesheet that dictate the appearance when items are or are not "selected", meaning the user is not on the page each item is linked to.
I have it structured with a div on top of the image with styles applied to it to make it have a semi-transparent white background, so it looks like that part of the image is highlighted. Each semi-transparent div also contains the text that makes up the link, with a color set to white. I would like the div to keep the opacity, while the text remains at an opacity of "1".
I have tried the method discussed in a similar question (CSS - Apply Opacity to Element but NOT To Text Within The Element) but the method does not seem to work for me.
I've posted the bit of code for the link on JSFiddle at http://jsfiddle.net/Cwca22/uG5y8/ if you'd like to take a look at it.
Thanks in advance for all the help.
If you're looking for a pure CSS solution, and are willing to change your markup a little, take a look at this example:
http://jsfiddle.net/jJ4MZ/3/
It treats each "link" as a combination of separate background and text elements, and then positions them over each other, so that only the background div uses transparency.
If I'm understanding you correctly, you want the background colour of the div to be partially transparent to show the image through, but keep the text opaque? That's simple :3
<div style="background-color: rgba(255,255,255,0.5);">Text</div>
If you want to provide support for browsers that don't allow this format, then you need:
<div style="background: #ffffff; background: rgba(255,255,255,0.5);">Text</div>
Old problem without any standard solutions yet! This is something known to be impossible with today's CSS. The only solution i know of is using JS. Using JS you can catch the mousemove of the affected H# and create/position an element. This new 'over' element should not be a child of the DIV with opacity 0.2.
Once i wrote a jsFiddle for a problem like this. Here it is http://jsfiddle.net/A53Py/5/
Create a same-level element which positions absolutely behind the elements without opacity. No need to tell it's cross browser.
Hope it helps
As the title states,
I am currently building a website, I am new to this and am trying to learn quickly. However this problem is quite frustrating as websites I have gone to do not help.
So at the moment I have an image that is of a high enough resolution that it should fill the screen easily. However when I load the HTML the image is zoomed in on the top right corner which is the only part visible. I have tried using "height" and "width" commands. I have also tried without them. I have attempted to use a <div> and <body>. However this problem still persists.
Another point is that when I use a <div> the whole screen is not filled, it still has a white border around what I believe is the <div>.
If you need to support older browsers, it's not as simple as just adding one or two properties.
Read this: http://css-tricks.com/3458-perfect-full-page-background-image/
Another point is that when I use a <div> the whole screen is not
filled, it still has a white border around what I believe is the
<div>.
You need this CSS to remove the default margin on body:
html, body {
margin: 0;
padding: 0;
}
OK, I would suggest you to make the width and height not in px but in % and secondly try setting the image using CSS
Read this Link, it will be more useful
http://css-tricks.com/3458-perfect-full-page-background-image/
I'm sure it's just simple html/css but I don't know what to call the bar (googling horizontal bar html always results in a horizontal rule).
http://jquery.com/ has one - the grayish bar the runs across the top separating the menu from the content of the page. I'd love to make one of my own.
There is a number of ways to do this.
On jquery.com it is part of background image applied the body tag.
You can have a header section which has background aligned to the bottom as an image and bottom padding that prevents text/content from overlaying that part. Finally you could use thick border if you want to just have plain color. I am sure there are numerous other ways to do this as well.
Easiest solution:
<!-- content above bar goes here -->
<div style="height:30px;background-color:lightgray;clear:both;" ></div>
<!-- content below bar goes here -->
You do the clear:both just in case you're floating elements that you want to keep above the bar.
The best way (in my opinion) is the page background image method, if your design is static enough. Otherwise, create a div with the correct height, set its background image to a very thin (1 or 2 pixel) image with the correct height/color/gradient properties, and tile it across the x axis.
I would avoid the thick border method, as that might render differently on different browsers.
Its a BG image that's applied to the body tag.
body {
background: #2a3139 url(../images/bg_home_tile_sml.jpg) repeat-x 50% 0;
}
IMO it's the best way to achieve this effect.