I know a lot of HTML but it's all been self-taught and I keep running into these unkowns when trying to make sites that look how I actually want them to.
I want to make my site a minimum of 940 px wide- if the browser is less than this in width, users will have to scroll horizontally.
If the browser is more than 940 px wide however- I want images to appear to "connect" with my header image(show as a full width header) and nav image(show as a full width nav).
Check out the attachment to see what I mean.
Sean
http://i45.tinypic.com/2n862ys.png
In CSS:
header{ min-width: 940px; width: 100%; overflow: hidden; }
.headerImage { display: block; margin: 0 auto; }
Then in HTML:
<header>
<img class="headerImage" src="./Images/HeaderImage.png" alt="" />
</header>
If you have a image larger than the 940px that you would like as your width then you could just set the background position of your image to be centered so if it increases or decreases the image wont move just the amount that is shown.
Another method could be is to repeat the background image so it wont end... but that depends on what sort of image you are using...
Try this
<style type="text/css">
img {
min-width:940px;
width:100%;
height:auto;
}
</style>
Related
I want my background to be full screen with 100vh but i also want it that if I minimize the screen vertically that the background stays at the end of the picture that is on the background
header{background: #efe0d9; display: inline-block;width: 100%; float: left; height:100vh;padding: 1% 0 0;}
I want to have a background that ends at the bottom of the screen becase then the picture that is on the screen is big enough but when I minimize the screen vertically the pictures stay the same size (as wanted) but the background also goes up so the pictures are overlapping with next part of the websiteenter image description here
Have you tried setting min-height?
Edit: This may not be exactly what you're looking for, since I had to add an extra element, But you could try wrapping the <header> in a container with its height set to 100vh, making the header's contents take up the minimum height you want to cover, and giving the same background color to the wrapper and the header.
Check the snippet and toggle to full screen to see the background expand beyond the header's contents.
#container {
background: #efe0d9;
height: 100vh;
}
header {
background: #efe0d9;
width: 100%;
}
.stack {
height: 100px;
text-align: center;
}
body, p, hr {
margin: 0;
}
<div id="container">
<header>
<div class="stack"><hr><p>0px</p></div>
<div class="stack"><hr><p>100px</p></div>
<div class="stack"><hr><p>200px</p></div>
<div class="stack"><hr><p>300px</p></div>
<div class="stack"><hr><p>400px</p></div>
<div class="stack"><hr><p>500px</p></div>
</header>
</div>
Edit: Adding a container div with its height set to 100vh and display set to flex, and giving the header a min-height seems to have done the trick. Here's an updated fiddle.
Can anyone enlighten me to why the following occurs with this test case?
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: #ffffff;
margin: 0;
padding: 0;
}
.section {
background-color: #000000;
color: #ffffff;
}
.wrap {
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="section">
<div class="wrap">Some content here</div>
</div>
</body>
</html>
When the window is big enough to accommodate 960px, everything works as expected.
When the window is resized to smaller than 960px a horizontal scrollbar appears (As expected). However, when scrolling horizontally it appears that the .section div has not been stretched across the document and appears only to be the width of the window, therefore revealing the body's white background.
I would normally expect the black, .section div to stretch across the document since it's display: block by default.
Does anyone know why this is happening and more importantly, how to get the result I expect?
Cheers
It's because the witdth of your section is only as big as what's in it. In this case this means your wrapper which is set to 960px. Setting the section in percentage only works as percentage of the available screen, so width:100% wouldn't solve this. You should set your section width to a specific number and that would fix the issue.
Edit: Use min-width instead of width and it works even better for when you go bigger than you min-width.
section is sizing to it's contents, try setting width:100% on .section
In addition, you may want to add this to .wrap
margin-left:auto;
margin-right:auto;
that will center the wrap div
I want to make so that when the user visits my site to see only one image (100% width) and when he scrolls down to be able to view the rest of the site.
I've seen this and tried it...it works: Full page background image with vertical scrolling
But i have two main concerns:
By this method i must use position: absolute for every section below the image (I will have at least different 4-5 sections with content). Is that the right thing to do ?
This method does not seem to be responsive, is there a way to make it ?
You don't have to use position at all. Once you set a div's size with the screen size all the rest of your content will be below.
Here you go: example
The image div will contain your image, and you set it to width: 100% and height: 100%
then, just add your content below this div.
HTML:
<div class='image'>
<img src="image.jpg" />
</div>
<div class='content'>Content</div>
CSS:
html, body{
margin: 0;
height: 100%;
}
.image{
width:100%;
height:100%;
background: green;
}
.image img{
width:100%;
height:100%;
}
.content {
width:100%; height: 100px;
}
You also need to add
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
to support all screen sizes.
Try this: http://jsfiddle.net/stddC/
In this way the image will be 100% height and width and won't mess with the content.
I have an image that should be positioned near the bottom of the screen. I have a main image that is the background image and will resize with the browser size. I need the image over the background image to be 20-30px from the bottom no matter what size screen or if the screen is resized. (Image also must be centered.)
I am not sure how to go about doing this. What is the best way to do this?
Here is the code I have tried:
.bottom{
position:absolute;
margin-left: -355px; /* Image is 710 in width */
left:50%;
bottom:-20px;
}
That code has the image centered on the page properly but not 20px from the bottom. Also I have content below the image and I want the content to stay below the image but it currently comes up over the image.
HTML:
<img class="bottom" src="src-path.png" alt="Text" />
<p style="clear:both;"> </p>
<!-- More Content here that consist of img and p tags. -->
I guess to position the image 20-30 px from the bottom you can use css property
margin-bottom:30px; or 20px what ever value suits you.
for aligning at the center use vertical-align:middle Please do share the code that the thing is more clear. Hope I answered it correctly.
CSS Together must look like:-
margin-bottom:30px;
vertical-align:middle;
You better use a CSS file, in which you declare a footer to be at the bottom of your page. Then put your image in your page, with class of that CSS and id of "footer". Clear enough?
Here is the way I finally did this:
CSS:
.image_block {
/* Size of image is where the width/height come from */
width: 710px;
height: 500px;
}
.image_block a {
width: 100%;
text-align: center;
position: absolute;
bottom: 0px;
}
.image_block img {
/*Nothing Specified */
}
HTML:
<div class="image_block">
<img src="src.png" alt="Alt Text" />
</div>
When ever I develop HTML pages, I get problem with window resize. The page alignment gets disturbed. One element or tag overlaps with the other.I want my page that when I resize,
my page it should remain the same & srollbars should appear.Someone Pls suggest solution.Which style attribute (position, overflow) is good to use for this?
Set a width on the body (or, more preferably, a min-width)
Not sure if this is what you need, but probably:
overflow:auto;
is what you are looking for
i understand i think, the issue is that you place your elements in a relative position(the default for position on any element), so relative to your current screen size. you can change the position to absolute and they will not move, this can cause you to loose control if your not an css ninja. ill show some cool techniques now how to control elements.
hint 1:
wrap your tags! a wrapped element will stay put!
example:
html =>
<div id="box_wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
css =>
#box_wrapper {
margin: /*top and bottom*/5px /*left and right*/ auto; /*this will center your wrapper*/
height: 300px; /*what ever height you want*/
width: 1200px; /*what ever width you want*/
}
.box {
/*what dimensions you want*/
}
this a good way of keeping objects in place, they will never leave the wrapper element if you specify a overflow.
hint 2:
position: absolute; caution this can get messy.
i use position absolute when positioning logos to the corner of a screen so that if you change the size of the screen the logo will still remain in the corner. this is cool cause you dont need a specified width for the parent elements.
html
<div class="header">
<img src="/images/logo.png" alt="page_logo">
<div id="login_button">
/*......*/
</div>
</div>
css
.header {
width: 100%
height: 150px;
border: 1px solid #ccc;
}
.header img{
position: absolute;
margin: 0px; /*position: absolute must have a margin even if its 0*/
float: left;
height: 150px;
}
#login_buttons {
float:left;
position: absolute right;
margin-right: 5px;
}
this example puts a logo on the top left hand side and the login buttons on the right and if you then change the screen size it will keep them where they need to be.
i dont want to write a whole tutorial here but these tips should help in designing solid pages that adapt to multiple screen sizes.
its hard to kinda guess what the issue could be if i cant see the code but i hope this helps.
<body id="page" onload=" pageHeight = document.getElementById('page').offsetHeight;
pageWidth = document.getElementById('page').offsetWidth;
pageHeight=1000 px ;
pageWidth=600 px ;
"> </body>
you got to fix the width of the body on page load to pixels instead of % based on the resized browser window size.