I'm currently working on this layout
http://imstillreallybored.com/gridiron/indexx.html
at the top menu i have to different backgrounds for the menu the red one and the gray gradient. I need the gray gradient to continue on the right side of the menu off of the page i cant seem to get this to work. I tried absolute positioning but when you resize the browser it covers the menu which wont work. I cant seem to think of the right way to do this anyone have any ideas?
You can create a very long background image for your #menuContainer that is half red and half grey, and then center position it, so it will always stay red on the left and grey on the right. It might be a hacky solution, but that is the easiest thing you can do without changing your markup.
try nesting a few divs. run the grey gradient all the way across, then put your red image over that in another div, and left align it. make the red image like 500px wide and it'll always be on the left, but will extend under the menu and be hidden.
<div style="background-image:url('grey-gradient.jpg'); background-repeat:repeat-x;">
<div style="background-image:url('red.jpg'); background-repeat:no-repeat;">
<div>
<ul>menu</ul>
</div>
</div>
</div>
Related
My <div> background is shows half how can I fix it.
It shift all my background images to left and half right goes white in IE
here is screenshots
http://scrshots.blogspot.in/2014/11/1st-screen-shot.html
If it's a background for whole page try to attache it to body. If it shows only half of image most common problem is something mixed up with divs. If you have more background images try to provide a frame for them (separatly) using divs. Also are you sure that position should be absolute not relative?
body {
background: url(main-bg.jpg) no-repeat
}
I'm looking to build a progress bar that I will generate programmatically. I'm a css novice, at best. Here is what I have so far; using tips from this question.
Ideally, I would style the following simple HTML, but I'm open to adding more tags:
<div id="container">
<h2><span>Goal</span></h2>
<div id="bgblock"></div>
<h2><span>So Far</span></h2>
</div>
Two, maybe 3 issues:
Right now the "text over line" is accomplished by making the text white, on top of the line. This ends up cutting into the green background. To avoid this, I guess I need to have the text (without a background color) and lines on either side of it?
Obviously my formatting / margins / offsets are a mess, and the top of the box borders / hr alignment is not quite right (seems like the top text needs to be shifted up a couple pixels or the container down a couple pixels, but I'm having trouble doing this).
Thoughts on a cleaner solution that gets me where I want to be?
I've created a working fiddle for you. http://jsfiddle.net/avrahamcool/QpWqd/46/
the main trick is to differ the white background and the text of the h2 elements, giving each a different z-index.
both the background and the text are above the border.
but the green background come between the white and the text.
so the layers are:
border
white background of h2 tag
green background
text
Tested on: IE10, FF, Chrome
Not sure if the title explains it properly.
I've made a fiddle of my problem: Fiddle
.
The right box properly shows the border on hover. But when theres content in the box it's hidden. Is there a way I can make the border stay on top?
EDIT: FIXED IT WITH CSS: overflow:hidden;
The image is rendered on top of the box which is covering up the animation. If you take the image out you'll see that the hover functionality works on both boxes.
You probably need to add some CSS for the image instead of just the div that the image is in.
I have some problems with a project and am on a thight deadline.
The problem:
For a webproject the header consists of a full-width background slider and a menu containing the logo and menu items see: (http://d.pr/i/ln6N)
The problem I have is the way it is divided, the red part acts as a slider. The logo has some space between the menu bar.
How would I go about the transparant space arround this logo?
What I have now is a 100% width div containing the list items and logo on top of it.
I can't figure out how to get the white space on the left and right of the logo while the menu bar is 100% width.
I hope the image (above) clarifies some as I just don't know how to handle this one.
Thanks in Advance,
- V
I got it fixed, dirty tho..
In the image the gray area is one big image with the center cut out so i can place the logo en menu in it so there is some transparant space left.
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.