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.
Related
Alright so I am working on a website and I did it on a lap top, so for bigger screens the left side is just the blank background color. I was hoping someone could inform me of a way to center the site on a bigger screen. Im open to any other ways of solving the screen problem though.
Usually this situation calls for margins, but the problem is that you can only set one margin. Try out the top, bottom, left, right attributes in CSS. By doing this, you can set how far you want the text to be from either the top, bottom,left, or right. Try getting a rough average of how big most devices are and set your measurements from there.
So the traditionnal way to center a page content is through a container. Just give it a width (px, em, %, etc.) and side margins set to auto.
.site{
background: red;
}
.container{
width: 40%;
margin: 0 auto;
background: yellow;
}
<div class="site">
<div class="container">
Site content
</div>
</div>
I want to create an HTML/CSS layout for a page where there are multiple images that poke outside the content area of the page. The layout for the content area is fixed width and centered. I do not want scrollbars to appear if the user's window is as narrow as the content area.
The content area is a container div with a fixed width and margin: auto 0;
Ideas I've considered:
Use CSS 3 Multiple Backgrounds on the <body> tag. The background elements would have to be relative to the body, and wouldn't center with the content area.
Use negative margin or relatively positioned divs. This would make scrollbars appear if people had their browser width smaller than the width of the images that poke out past the content area.
I want the images to be kind of bonus content for people who have their browser windows fullscreen but not seem necessary.
Here's some example HTML/CSS that would simulate this example.
css:
#containerDiv {
width: 910px;
margin: 0 auto;
}
html:
<html>
<head>[...]</head>
<body>
<div id="containerDiv">
<header>HEADER</header>
<section id="contentArea">
<h1>Content</h1>
</section>
<footer>FOOTER</footer>
</div>
</body>
</html>
The scrollbar problem of your second idea could be simply fixed by setting:
body {
overflow-x: hidden;
}
The images would appear as much as they can according to the window size of the client; thus they would look like background, and only appear to those who have a higher screen resolution, without cluttering the lower-resolution people's screens.
Edit:
To get the images as you put in the example, use position: absolute and set their lefts, rights and tops as you see need. You could use a script to check whether the page hit a certain height; and when so, add the next picture you set.
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;
}