-edit- sorry i put in a lot of useless info. In short i want a static div that i can set the left and right of (from top to bottom) which i can fill and it should be on top of my background image but below the text in the sidebar.
long version:
I am hacking something in wordpress. I need the sidebar to have a green background. Theres two problems. 1) Is if i make #secodary green i have a TON of whitespace on the left and it looks wrong (but to the right the menu also looks wrong)
2) I need the color to go to the bottom of the page. I dont know how long a page will get.
I think using a fixed place div that is from X to Y (maybe 80 to 300) green. I just dont know how to do it as my css and html-fu is weak. I'll note that i have a background image but the menu is on white which is coming from something else. I dont know if its from #main (post+sidebar) or #primary(post) since changing primary bg color did change the sidebar menu (i bet the theme is using float somewhere...)
Instead of having that tiny little thing green i want it from the left (where the red starts) to the right where i marked with my poor paint.exe job. Also the green should go all the way down. The black circle in the css shows that it isnt simple to do in css which is why i want to hardcode a green box into it
Ok, here is the simplest way to code a position: fixed; div. (with words and white areas as shown in your paint img)
HTML:
<div id="greenBox">
<p>About us</p>
<div class="white">
</div>
<p>Services</p>
<div class="white">
</div>
</div>
CSS:
body /*jsfiddle only, so you can see the fixed effect*/
{
height: 1000px;
background: -webkit-linear-gradient(top, #d0e4f7 0%,#73b1e7 24%,#0a77d5 50%,#539fe1 79%,#87bcea 100%);
}
#greenBox
{
position: fixed;
height: 400px;
width: 250px;
background-color: #008000;
}
.white
{
background-color: #fff;
width: 90%;
height: 100px;
margin: 0 auto;
}
Example for you here.
I made a JFiddle for you here;
http://jsfiddle.net/sfnGH/
#secondary{
position: absolute;
background: green;
top: 0;
left: 0;
height: 100%;
width: 300px; /*or however long you want it to be*/
z-index: 999; /*So it stays on top. I think that's what you wanted?*/
}
Is that what you wanted?
Edit: As pointed out in a comment to my answer you asked for position: fixed;
Before you decide to use that as a left bar there is at least one thing to keep in mind.
It will stay in the fixed position when scrolling. This means, that if you have a lot of content in the sidebar you would never see the bottom part of it on smaller screens.
For a more thourough explanation of differences in positioning you can check out this link: http://css-tricks.com/1191-absolute-relative-fixed-positioining-how-do-they-differ/
Whatever you decide to use I hope you end up with an awsome site.
Related
I have been trying to set my footer in my web for a while with no luck..
The footer sticking to the bottom of the screen, and if there is scroll-bar, so when I scroll down, it will slide up...
I want it to stick to the bottom but not like position: fixed (if there is scroll-bar, then I don't want to see the footer until I scroll to the bottom).
There is 3 main components in my web (header, content and footer).
This is the footer css:
background: #929191;
border-top: 1px black solid;
position: absolute;
bottom: 0;
text-align: center;
width: 100%;
I have tryed changing html and body to "height: 100%" but the only thing that was almost like I wished for, was when it made the height bigger than the screen.
It was like height: 110% (even though the sum of heights was 100%).
I Tryed to reduce it, until I fit but it every little change in the UI make troubles.
I would very appreciate any help..
Sounds like you are looking for <footer>. Keep in mind it won't work in early versions of Internet Explorer. Here is some more information. Let me know if this works out.
Try this on your footer -
.footer {
position: relative;
bottom: -500px; // you can adjust the negative value
}
I am almost certain that this is not possible to create, but I have to ask. So I have those 3 divs. One is main wrapper, other is green one on the right side, and 3rd is the small one. So what would I like is to make that small div transparent all the way down to wrapper. So that it doesn't have green background, but the smiley one. Don't think it's possible, but then again, I might be wrong. I know I can split the green div in 4 blocks and "wrap" the transparent one, but that won't work because I have border radius on the small one.
UPDATED:
http://jsfiddle.net/9hLf8mcu/3/
Just add this background: url('http://superlifestylecoach.typepad.com/.a/6a0120a9506f8e970b01348158e534970c-pi');
background-position:center right; to your .same_as_blue {
DEMO
It is not possible with pure css as you would need to have the green div to be transparent too, which it obviously isn't. A work around would be to give your small square the same background as the one you want it to have and then use background-position to move the image to where you want it
.blue {
width: 200px;
height: 200px;
}
.blue,
.same_as_blue {
background: url(http://lorempixel.com/200/200/) left top no-repeat;
}
.green {
width: 50px;
height: 100%;
background: green;
float: right
}
.same_as_blue {
width: 40px;
height: 40px;
background-position: -150px top;
}
<div class="blue">
<div class="green">
<div class="same_as_blue"></div>
</div>
</div>
Your fiddle updated - If you move the background:green you will see the little image matches up nicely
I really like Anthony's answer using the duplicated background. Another solution would be to look into the clip and mask features of CSS.
I'm trying to move a div from the top of the page down to the bottom, but it's not working.
Here's the div and its CSS:
<div class="slides">
<?php include 'slides.php'; ?>
</div>
.slides {
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I've got the code (some of it, anyway) over on jfiddle:
http://jsfiddle.net/jerU7/
You can see the original page here:
http://www.autotrafficinfo.com/
I need to move the rotating banner at the top down to the bottom just above the footer. I moved the div (class="slides") down to the bottom of the html, but it's staying at the top. I realize you can make divs do things that aren't apparent, but I'm not sure how to make this one move down.
In the code on jfiddle, you can see that the text ("Real time traffic for 1.6 million...") is up at the top. The rotating images are, in fact, appearing towards the bottom (although all three are appearing there, instead of one at a time and rotating, because the java script isn't hooked up). The text and banners should all be at the bottom.
How do I scoot the div (class="slides") down so that it's just above the footer?
Your code needs a bit of restructuring.
Wrap all the divs from #greenSmall to #green in a new .content div.
Remove the css property float:left from #green
Move the .slides div to below the .content div and above the footer div.
css:
.slides{
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
The code on the above answer is almost correct but it misses an element. For the 'top' and 'bottom' to work, the element must be positioned absolutely. So, the above code will become
.slides{
position: absolute;
top:97%; // Or designate the px location if you so desire
width: 990px;
height: 390px;
margin-bottom: 15px;
}
I have a div within a div. I want one to extend out of the shell div so it resembles a tab. I thought just using absolute positioning with a negative value would push it out of the parent div. That doesn't seem to work. Is there a CSS work-around?
Example
http://jsfiddle.net/W3CyT/
http://jsfiddle.net/iambriansreed/W3CyT/4/
CSS
#sideWall {
height:100px;
width:100px;
position:absolute;
top: 10;
left: 10;
background: black;
margin-top: 60px; /* give room for tab */
}
.showSideWall {
height: 60px;
width: 30px;
position: absolute;
top: -60px; /* move tab above container */
right: 0;
background: red;
}
You're doing it correctly, however, you need to rethink your values for bottom and right.
If you're looking to have the red box protrude from the black box on its right side, consider removing right:0 and applying left:100% instead. This approach guarantees that no matter how wide the black box and red box are, the red box will always be on the outside to the right; they are width-size agnostic. This can be ideal because you may want to change the size of either box dynamically or in the future (it doesn't lock you in to hard set values).
Here's a fiddle of what I'm talking about.
You could use a Z-Index and position one on top of another. There is a better way to do it with Twitter bootstrap code.
http://twitter.github.com/bootstrap/
they give you templates for all kinds of cool features
I have an issue with a site I am working on where the right wrapper keeps dropping down below the site. Obviously I want it to stay on the right hand side.
I've coded up a test case which shows my issue (I think) and I'm wondering if there is a better way to do things.
The website url is http://www.musicworkshop.co.nz/
Below is the test case which (I think) is the cause of my issue, however it may not be. The pink box drops down if it does not fit within the page width.
I've also included a diagram of what I'm trying to achieve along with a screenshot of the right wrapper not where it should be.
Is there a better way to do this?
John
<html>
<head>
<title> Test page </title>
<link rel="stylesheet" href="test.css" type="text/css" />
</head>
<body>
<div id="superbox">
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
<div id="box5">
</div>
<div id="box6">
</div>
</div>
</body>
</html>
#superbox{
width: 1000px;
height: 100px;
margin: 0 auto;
}
#box1{
height: 100px;
width: 200px;
background: red;
float: left;
}
#box2{
height: 100px;
width: 200px;
background: yellow;
float: left;
}
#box3{
height: 100px;
width: 200px;
background: blue;
float: left;
}
#box4{
height: 100px;
width: 200px;
background: green;
float: left;
}
#box5{
height: 100px;
width: 200px;
background: grey;
float: left;
}
#box6{
height: 100px;
width: 200px;
background: pink;
float: left;
}
alt text http://www.musicworkshop.co.nz/website.png
alt text http://www.musicworkshop.co.nz/website_right-wrap-missing.png
Since all your boxes are 200px wide go for a %.
if it doesn't fit into the page width, this is the way float works... if you want to have the boxes in one line whatever happens, set your superbox with to the with of all boxes (which is 200*6 = 1200 / not 1000).
EDITS:
Looking at your example site I think you mean when the viewwindow is small that you want the div to go off-screen. In your case the best solution is to make that repeating image the background-image of your body.
Something like:
body { background: #6593aa url('http://www.musicworkshop.co.nz/templates/musicworkshop/images/right_repeater.png') repeat-x; }
And make sure to take the backgrounds off your other divs. You'll probably want to pick a different image to repeat with too rather than just the right segment. I can see you were trying to get it to match up with the header nicely but the way you are going about it just won't work. My best solution is to use a transparent background on your leftwrap and rightwrap near header (use a .gif or .png with transparency for your rounded corner rather than the current image with the bit of "amplitude wave" in the background).
Summary:
Remove all wrapper etc. backgrounds.
Change the "rounded corner" images to have a transparent background.
Remove your "repeating" divs.
Apply that CSS above to the body.
Original:
What's your desired behaviour? For superbox to go 1200px? Unfortunately you can't have fixed sizes and "auto-grow".
If you want 'superbox' to grow to fit its children then don't specify a width (i.e. leave it width:auto).
If you instead want the children to resize if they are too large for 'superbox' use percentage widths on them.
It sounds like you want your boxes to stay their current size and not wrap. Well try and imagine what would happen if you put a new div under 'superbox' and wrapping your 'box_'es that had a width of 1200px. It's going to make 'superbox' grow to wrap around it so at the end of the day you might as well just make 'superbox' this larger width in the first place!