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.
Related
I am struggling with getting the elements on this page to reflow correctly: http://www.cmattayers.com/moushegianlaw/
I want the semi-transparent box to be flush with the left side of the slider image (the photo of the gavel), and for them to be "fused together." The problem now is that when the window becomes narrower, the semi-transparent callout box drops below the portrait photo, but the slider photo stays where it is. I have tried different combinations of inline and block elements to achieve the desired effect, but nothing seems to change.
I also have a bizarre sliver of space to the left side of the semi-transparent box that I can't seem to get rid of. Adding negative left margins does fix it, but when it drops below, it's off-center and outside of view.
I also need to find a way to add padding to the bottom of the box. When the window is resized to show mobile view, the bottom of the box rests directly on the header text below (I would like there to be padding, but adding padding seems to add it to the text inside the box and not the outside of the box).
In that design, you've done a couple of HTML and CSS things I'd recommend against.
Firstly, your <div id="header"> should be a <header> element. That's more semantic and accessible. If you use multiple headers on the page (which is allowed), you can distinguish this one using role='banner'.
You shouldn't put all those blocks into the header. Rather keep the logo in the header, put the menu in a <nav>, and put the portrait + gavel image + dark paragraph into a <section>.
Next, and to answer your question, perhaps don't use inline and float to position the paragraph. inline and inline-block are great for flowing content, but not great for content you want to always be in one row. Rather give the parts display: table-cell (or use the new 'flexbox' CSS styles).
To get this right, you may need to restructure your HTML a bit.
I am dealing with some web development issues and want to know how I can achieve this specific menu layout in HTML, CSS, Javascript.
When hovering over "Design" or "Hintergründe" the main area changes and shows the content. My problem is the border, the outline that changes when the active menu point is changed. So I would take 2 div containers for "Design" and "Hintergründe" with borders at left, top and right (no bottom). And the main area has to be a div with borders itself. How can I achieve the mising party of the border where menu-choice and main area blend one into another?
By the way: Are those costum (thin) scrollbars possible in HTML for div containers?
Thx in advance
All the best
Michael
The tab that you click on has the same background colour as the content area, and it has margin-bottom:-1px and a z-index to place it over the content. This makes the background cover up the content area's border, producing the effect you're looking for.
MichiMichbeck gave a good answer regarding the tabs.
For the thin scrollbar try one of the many javascript/jquery plugins that are available.
One example is: http://jscrollpane.kelvinluck.com/
You can also change the scrollbar for webkit browser in CSS: http://css-tricks.com/custom-scrollbars-in-webkit/. But the javasript solution would probably be preferred.
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.
I have a a background image on my html with css page, from blue at the top, to white at the bottom.
However, the image 400x800 and the page is much longer, so it repeats.
The page length varies all the time.
Is it possible to solve this so the background stretches to the page length somehow? or maye make it not repeat and make the background white with the image on top?
If yes, how please?
The easiest is to set the image to not repeat and then set the background color the same as one end of the gradient:
body {
background: white url('yourImage') repeat-x top left;
}
Getting a gradient to stretch to fit the window is doable, but is more work and would require some javascript.
I know that there are jQuery / Javascript methods of accomplishing this:
Resizable Backgrounds with jQuery
Stretch background image - jQuery - Demo
but besides resorting to solutions like those - you could:
Select a pattern for your background that repeats (textures etc.)
Create a very long background image that could handle most navigation that your page
would deal with.
Another alternative is to make your gradient the same at both ends with the maximum colour difference at the 50% mark.
Right now im using one large centered image in my body tag.
First image is basically what the front page is going to be like. Looks great.
Second image has some content and pushes down the footer and the whole page. But still looks fine.
This last image has a lot of content and pushes everything down, even past the height of the body background image.
So my idea is too split up the background at the change of colour you see in the first image, where the footer starts, and add that as a background for the Footer DIV.
But the issue is that that part of the background goes on past the browser in the first image. If I were to put the BG in my footer DIV it would have to be 500px in height, resulting in scrollbars.
Essentially I want to put the the lower part of the background in my Footer DIV and have it act like the BODY, in that it won't create scrollbars.
I think that was clearer than my previous explanation? It's hard to explain!
So in the first screenshot the background is one big image?
Yes, you need to split the background up.
Now lets assume these things:
1.) You've set the background color of the body to black (and that black bar that is showing is the body background and not a part of the image.)
2.) You have split the image up so the bottom half is the background image on the footer div.
You can eliminate the black bar by making sure there are no margins pushing the footer div away from browser window, and making sure any default margins created by the browser itself are reset. (i.e. body { margin: 0;}) However, the bar can still show up in other browsers (usually Safari). One solution would be to set the background of the <body> tag to the same as the footer tag. This only really works with repeatable images though.
I'd say your best bet would be to fade the bottom of the image to black like you've done at the edges.
You can use background: scroll; to make the content scroll over the background, but viewed at different resolutions you could still see the bottom of the image.