I have a little problem --
I have two div on left and right, as my screen resolution is 1280*768, they work fine here. but when I reduce the window size it overlaps each other ... like left one is reduce in width and right one make that happen ...
here is my code..
<div class="shareBar" align="right">
......
</div>
<div class="content">
.....
</div>
and my css code is here
.content{
position:relative;
margin: 110px 5px 10px 5px;
min-width:700px;
}
.shareBar{
position:relative;
}
here shareBar overlaps content...
And I want to make this shareBar always in a static position and when window re-size occurs a horizontal scroll-bar should appears so that content will always in in a static size. Or otherwise shareBar should reside under content.
Is it possible with pure css?
If you want to make .sharebar appear in the same place and provoke a horizontal scrollbar on window resize, you should remove align="right" from the HTML give it position:absolute as well as a specified location in the CSS. For example:
.shareBar{
position:absolute;
left:900px;
}
Related
I have just started HTML/CSS this week, so sorry if I sound stupid anywhere. Anyway, here's my question:
I am programming a website where all the content is enclosed by a border. The margins to the left and right are 25%. Now, when I shrink the browser, all of the content stays 25% inside the browser always. I want the site to first use up the 25% free space on the left and right... If I'm not explaining properly, I'll show an example. When you are reading a PDF file(http://www.kb.nl/sites/default/files/docs/pdf_guidelines.pdf open to try) and you shrink the window size, the A4 page sized block (all the content) does not shrink until all the grey space on the left and right has been used up. I want to have that in my website. Here are screenshots:
http://i.imgur.com/uhq035r.png <-- full size
SKkt4DK.png <-- shirnkied window
Cant post more than 2 links, that's why i only put the image ID. So yeah, how can I achieve this?
Edit: I've tried the positioning properties before but it didn't work.
What you need to do is have your inner content sit in a container. The container's width should be 100% of the page, and your inner content's left/right margins set to auto.
That way when the page's width shrinks, the container still takes 100% of the width, but the inner content's margins are adjusting to the new changes.
HTML
<div id="container">
<div id="content">
</div>
</div>
CSS
#container{
width:100%;
height:800px;
background-color: gray;
}
#content{
width:800px;
height:100%;
background-color: green;
margin: 0 auto;
}
Demo :
http://jsfiddle.net/zvo4u72x/
Adjust accordingly, but using this sample code should demonstrate what you need.
I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the height: 100% method, but this causes a problem.
I also have a position: fixed header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there's a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth.
Here's an outlined structure of the HTML:
<header></header>
<div class="content">
<footer></footer>
</div>
I have also put together a Fiddle to demonstrate how the CSS works at the moment: http://jsfiddle.net/LY6Zs/. I am unfortunately unable to change the HTML structure (i.e. breaking out the footer element from .content.
You first need to have a container div just after the which contains all the content
.container
{
min-height:100%;
position:relative;
margin:0 auto;
}
.footer{
position:absolute;
bottom:0;
}
I was developing a mental picture of a future website I'm building and stumbled on a question I cannot answer.
Basically, there is going to be a vertical navigation menu about 180px wide. The height will be set to 100% and the position:fixed; top:0;. This way, the div will follow you as you scroll along the page... However, the problem is, that div will have a different background color then the body or the rest of the page and I'm trying to nest the div inside a 980px wide page. I want everything to the left of that div to be the same background color. The reason why I cannot specify the width is because it will be 180px for the navigation, but the width will be 180px + whatever's to the left of the menu. To understand clearly, this is a flexible solution but does not have the left of the div set to the right color: http://jsfiddle.net/kkFc7/ This is a solution that accomplishes the look I want, but only in 1200px wide browsers http://jsfiddle.net/kkFc7/1/ if the browser was wider, it would just stay to the left of the window but I don't want that. I want the div to be held inside the container, but the background color to the left of it should be the same.
The algorithm is something like ((browserwidth-800px)/2)+180px=Width of div#menu.
I'd prefer not to use any algorithms or JavaScript to accomplish. Does anybody know some CSS tricks that will get me a flexible DIV that takes up the width to the left of it?
can create a div that takes up 50% of the width behind the #content div
jsfiddle example (full-screen)
like so
<div id="menu-bg-color-matchtastic"></div> <!-- <<< Add this div -->
<div id="content">
<div id="menu">
Hello<br>
Goodbye
</div>
</div>
add similar attributes as the menu, background color, position fixed...
#menu-bg-color-matchtastic {
position:fixed;
width:50%;
height:100%;
left:0;top:0;
background:#494949;
}
make #content position relative with a white bkgd so our new div stays behind the content
#content {
width:980px;
height:2000px;
margin:0 auto;
background:#fff; /* <<< Add this */
position:relative; /* <<< and this */
}
I have two divs on my page, and between the two div's I have an image. Let me further explain...
Div 1 - This is the page's container.
Div 2 - Holds a few lines of text
Image - Just an ordinary jpeg image I want to format.
Div 2 takes up 40% of my page starting from the page's left border. It stretches very far down my page. So, this leaves around 60% of my page left to work with. I want for my image to be 200px wide, and 110px in height. For one reason or another, my image just appears on the bottom of my page in it's original (pre-format) width and height. I will show you the code that I am using.
HTML:
<div id="container">
<div id="div2">
<p> Hi SO, I hope someone can help me with this issue! </p>
</div>
<img id="image1" src="test.jpg" alt="" />
</div>
CSS:
#image1{
width:200px;
height:100px;
position:relative;
float:right;
}
To recap, I want the image 'image1' to be aligned between the left edge of 'div2' and the page's right border. So, I want it centered between the two but NOT centered on my page of course.
I don't think you want to be working with percentages to achieve what you describe.
This is basically what you want:
http://jsfiddle.net/fdXHs/2/
You can check my styles to see how I did it, if you need a more thourough explanation I will post it.
Also you describe that nothing happens to the image, this indicates that no styles are being applied, check your css markup if theres anything that might cause not being used.
AFTER WEBSITE EDIT
The column that needs to hold both elements (the image and the 40% width div) isn't wide enough to hold them both (combined width is 957px, container width is 845px). There isn't enough room for the image so it gets bumped under the first div...
replace prductsummary with:
#productsummary {
clear: both;
background: red;
margin: 0 220px 0 10px;
padding: 10px 0 0 0;
)
And the image:
#lol {
width: 200px;
float: right;
margin: 10px;
}
Try adding float:left; to #div2, like so. Basically, to float content to the right of something, that other content must also be floated. Even then, though, if the floated content doesn't fit the remaining space, it'll go onto the next line.
If you're still having trouble setting the image dimensions, check to make sure that you aren't overriding the css in the image tag itself (say, <img src="whathaveyou.jpg" width=500 height=500> or <img src="whathaveyou.jpg" style="width:500;height:500">)
I've been given a design for a website, and am trying to implement it.
One problem I've run into is that the design has some background images (one for the header, one for the body, and one for the footer of the site) that are wider than the main content area of the site.
Simply putting them in as background images doesn't work, since expanding the header, body and footer divs enough to accommodate the backgrounds causes horizontal scrollbars to appear if the browser window is not big enough to fully show the backgrounds.
This is undesirable since the backgrounds are not really important for viewing the website, and I don't want scrollbars to appear for them (scrollbars should only appear once the browser is too small to completely show the content of the website).
The second technique is to have a separate, absolutely positioned div to show the header background image (and put it under an element with the browser window's size), and set its width to 100% so that it never exceeds the size of the browser window (and hence create scrollbars).
This works up to a point - however, when the window is too small, the background starts shifting around relative to the content since the "top center" position of the background is relative to the browser window, not the content area. At large sizes, these are effectively the same since the content area is centered, but at small sizes, only part of the content is shown, so the center of the content and the center of the browser window are different.
A good illustration of this problem that I've found is the Quicken website: http://quicken.intuit.com/. At large sizes, its cloud background looks fine, but if you make your window's width small enough, the clouds start shifting relative to the content (bad!).
Any ideas on how to fix this so that backgrounds images
don't create scrollbars since they are not part of the content of the site
are fixed relative to the content of the site (and don't shift around at small browser window sizes)
?
An ideal solution would be something like turning overflow to hidden on the body, but only for specified divs. Unfortunately I believe this is impossible.
I'd prefer a pure html/css solution, but I accept that I may need js to get the effect I want.
Thanks! (this is a complex issue, so if any clarification is needed, let me know)
UPDATE: Fixed this by setting min-width on the background div to the width of the content.
Set the min-width on the div containing the background image to the width of the content.
You need to have your header, content & footer have a width of 100%. And put the image in as a background image in these divs ... center it horizontally.
Inside the specific divs have a wrapper that is centered. and is the width of the content of them divs.
Like so.
HTML
<div id="header">
<div class="wrapper">
...
</div>
</div>
<div id="content">
<div class="wrapper">
...
</div>
</div>
<div id="footer">
<div class="wrapper">
...
</div>
</div>
CSS
div#header {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#content {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div#footer {
background: url(...) 50% 0; /* to center your background image horizontally */
}
div.wrapper {
margin: 0 auto; /* to center the div horizontally */
width: 960px; /* or however wide it should be */
}
Hope this helps.
Am I missing something, or should you be using the CSS background-image property?
I had a look at the Quicken site, and to be honest the cloud background image shifting when the browser is resized shouldn't be worried about unless your background-image is most distinctive than a bunch of clouds.
See what I mean?
You could use the overflow property and set it to hidden on the div that cause a scrollbars to appear.
I had the same issue on a site that I worked on, and come up with the following solution, which works well if all your background images are the same width.
/*
A container div that is set to the 100% width, with the overflow set to hidden.
This hides the overflowing images if the window sizes is too small
*/
#bg_container {
position:absolute;
z-index:0;
top:0px;
width:100%;
overflow:hidden;
}
/*
A div that sets the size of the content and centers itself on the page.
*/
.bg {
margin:0 auto;
width:1000px; /* content size */
overflow:visible;
}
/*
Here I set the image away from the left edge of the div to center it to the content. The actual size of the image is 1500px.
*/
.bg img {
margin-left:-250px;
}