If you zoom out my website, the structure of the header looks bad. I don't know what to do about this. This is the link of my website. This is the CSS and HTML structure. Hope you can help me, I really need help :(
If you want you header to stay in the centre with your content, you will need t do that, it doesn't just happen.
You should start by agreeing on a width you want you content in (you have width: 1100pxon your container div, so I'll go with that for you.)
In you css for .containerchange width: 1100px; to max-width: 1100px.
Then in the css for #header remove the position: absolute;. Add in max-width: 1100px; margin: 0 auto;
You will need to modify the structure of your HTML and place the header div inside the container div. Currently, that part of your HTML is like this:
<div id="header"></div>
<div id="container">
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
but it should be like this instead:
<div id="container">
<div id="header"></div>
<div id="content"></div>
<div id="navigationposition"></div>
<div id="position"></div>
</div>
After modifying your HTML, you can add the following CSS to your stylesheet:
#header {
margin-left: -100px;
}
your header is positioned absolute
so when you zoom in and out it will stay absolute positioned. In the top left corner when the page is zoomed out
Also you do not have a wrapper for your code.... you may want to wrap everything in a container,
This will also take care of the image size thats over lapping your other content.
I do not know id you wanted the header to overlap like that but if it was intended just use margin-left
a wrapper will also contain your other divs sizes to stay within that wrapper.
Not going to work with zooming in and out
#header {
position:absolute;
z-index:101
}
<body>
<div id="wrapper">
<div id="header">
</div>
<div id="underheader">
</div>
</div>
</body>
css
#wrapper{
width:800px;
} or whatever width you want
#header{
maegin-left:50px;
} or whatever px you desire
Related
I have this structure:
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
I need to use background-image on container, but it does not have any content. Only header, sidebar, and main have content. How I can do it without position: absolute or specifying height in pixels?
min-height is useful, but I want to try dynamic size.
As others had noticed, it doesn't make much sense to have a container without content... but if you really wanna do this, you could use a padding on your #container to give it the size of the image:
#container {
background-image: url(https://lorempixel.com/g/800/600/);
background-size: cover;
padding-bottom: calc(100% * (600/800));
}
<div id="container">
<div id="header></div>
<div id="content>
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
This way, the container will have the same aspect ratio as your background image.
JSFiddle
Basically you can't show a background on a container that does not have content or specific height/width because it makes no sense.
A background means the "backside of the content", if the content don't have a size where you put the background? :)
If you have a rough idea of how much content the container is going to contain, you don't need to specify an exact height for it. Instead, consider using the min-height attribute like this:
#container {
background-color: black;
min-height: 50px;
}
<div id="container">
<div id="header"></div>
<div id="content">
<div id="sidebar"></div>
<div id="main"></div>
</div>
</div>
If you're setting a background, it means that it will be displayed behind all of the content within the area that the content is in. For this reason, a minimum height must be specified for it to display the background without requiring any fixed, unchangeable height and without any content in the container.
Try it:-
background: url("image.png") no-repeat 105% 105%;
try this:
#container {
min-height: 200px;
background-image: url('your-image.png');
}
I've been trying all sorts of solutions offered here and other places, and none of them seem to work. I'd like to have an image take up the full width of the browser window, no matter the size (height scaled proportionally). But I need to place this image within a smaller container <div>, as it's part of dynamic content (the body of a blog post). I'm using bootstrap, but I don't think this problem is unique to the framework. Code:
<div class="container">
<div id="content" class="col-md-8">
{dynamic content in here}
<!-- still part of blog post -->
<div class="large"><img src...></div>
{more content}
</div>
</div>
CSS:
div.content { width: 70%; }
div.large img { width: 100%; }
If I put <img src="..." class="large"> inside the container div, it will, of course, be the size of that <div>. If I manually set the width of the image to, say, 1900px, it extends far out to the right of the main content, and I have to experiment to find an appropriate negative margin-left to center the image (margin: 0 auto doesn't center it). And of course that only works on a pixel-specific size. As soon as the window size changes, that code breaks.
If I set position: absolute;, the image appears on top of any following content, which isn't the behavior I want. I also tried this javascript using jQuery:
<script>
$("div.large img").css("width", $(window).width);
</script>
As well as a version without jQuery that iterates over the results of document.getElementsByClassName().
None of these approaches seem to give the results I want. Opening and closing the container would be a Bad Idea(tm), as this would break the isolation between the static layout and dynamic content, and so break the whole site if the static part of the layout changes and the blog posts aren't all manually updated.
It works for me with position absolute
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body{
margin: 0;
}
div#small{
width: 200px;
background-color: green;
}
div#fullscreen{
position: absolute;
width: 100%;
background-color: red;
}
</style>
</head>
<body>
<div id="small">
i am a small div inside your browser window
<div id="fullscreen">
i got the same width as your browser window
</div>
</div>
<div id="small">
i am a small div inside your browser window
</div>
</body>
</html>
I think you'll need to do something like this...
<div class="container">
<div id="content">
<div class="col-md-8 etc..."></div>
{ content in here}
</div>
<!-- still part of blog post -->
<div class="large"><img src...></div>
<div class="col-md-8 etc..."></div>
{more content in here}
</div>
</div>
</div>
Set the .container to 100%, the content to 70% and the .large to 100% too
I don't even know if what I am asking is possible, but it's worth a shot. Basically I have a one page scrolling website controlled by jQuery, but it's a very very simple code, no plugin or external doc. That works great.
Every "page" if you will is divided into different divs to separately control function of pictures, tables, fonts, etc. per each page. Like this:
//home page
<div id="home">
content here
</div>
//about page
<div id="about">
content here
</div>
and so on and so forth... my question is, can i do something like this? I've tried but maybe I don't have the "decimal" in the right spot...
//home page
<div id="home resize">
<div id="home">
content here
</div>
</div>
//about page
<div id="about resize">
<div id="about">
content here
</div>
</div>
and then CSS be
home resize {
position: relative;
height: 100%;
width: 100%;
}
Two things I see right away. First, your CSS rule should be .home.resize instead of home resize. Second, height, when using percentages, requires that the height be set on the html tag to make a difference. So you will need rules such as this:
html {
min-height: 100%;
}
.home.resize {
height: 100%;
}
Otherwise, height will never take up the entire browser window height.
This all being said, I would guess that your best solution would involve JS or jQuery in some way. I know there are several single page scrolling plugins that do this job quite well.
First things first. HTML id's cannot contain spaces. You should define a class name resize. That being said. You can achieve this by using this.
Here is a fiddle
div id="home" class="resize">
content here
</div>
<div id="about" class="resize">
content here
</div>
.resize{
display:block;
height:100vh;
margin:0;
}
#home{
background-color:red;
}
#about{
background-color:blue;
}
vh is viewport height. It will set the height of your div same as viewport. 1vh is equivalent to 1/100th of viewport height
I don't know how to summarize my situation, but here's the simplified code showing the problem (index.html) :
<html>
<body>
<div id="wrapper" class="divide">
<div id="top" class="divide">
....(all of its contents)....
</div>
<div id="content" class="divide">
<div id="left">
....(all the contents)....
</div>
<div id="right">
....(all the contents)....
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
(style.css)
.divide{
margin-left:auto;
margin-right:auto;
width:960px;
}
body {
background-color: #666600;
}
#left {
......
......
float: left;
}
#right {
......
......
float: left;
}
#wrapper{
background-color:#ffffff;
}
So here I want the "wrapper" div background to be white in color, and the body background surrounding it to have another color (in here I put the brownish color). This works for the "top" div, but not the "content" div (thus, all of its children). The "content" div has the same background color as body, which doesn't make sense to me because the "wrapper" div does contain "content" div.
In other word, the "wrapper" div seems doesn't reach the "content" div and all of its children. Is there any workaround for this problem? Inform me if you all need additional information. Thanks for any help!
NOTE: As our helpful people pointed out, the floating properties in the div element does cause the above problem. I did not realize that. That's why I didn't put the floating properties in the first place. So I just edited the above code so that we know what's really causing it. Peace!
Do you have any floated elements, such as #left and #right?
If so, you need to clear your floats.
One way to do that is to add overflow: hidden to #wrapper.
You should also fix a small mistake in your HTML: </left> to </div>.
If you float your content divs, you might be having a problem with not clearing the floats. Try adding overflow:auto to your wrapper div
I put your code into JSFiddle and got this: http://jsfiddle.net/XPLWR/, it looks fine to me.
I'm helpless, tried my best understanding CSS but it's just not for me.
I would like to make a really simple MasterPage:
at the top a div of full width and height 40px (1)
at the bottom also a div of full width and height 40px (2)
in the middle:
on the left: a div of width 200 px (3)
on the right side of the left div: a div with contentPlaceHolder (4)
What I would like to get is: if i make some site that uses my master page and place a panel in the contentPlaceHolder that has width 800px, I would like my site to adjust to it - top, middle and bottom divs to have their width of 1000px (200 + 800). I also wouldn't like (and I have a huge problem with that) the (4) to move down if I resize (shrink) the browser window - I would like all the divs to be blocked.
This is my master page html:
<div>
<div class="header">
</div>
<div>
<div class="links">
</div>
<div class="content">
</div>
</div>
<div class="footer">
</div>
</div>
What kind of CSS do I have to write to make this finally work?
Not sure if you have checked into this or not, but we use the YUI-Grids CSS Framework for our layouts. It keeps us from having to spend a lot of time on CSS, which we are not great at being developers.
There is even a grid builder which will let you graphically layout a page, and then copy and paste the required HTML to make it happen :)
To prevent floated divs from being "squeezed" out of the alignment you want, you usually use either width or min-width.
For example, in this code the div containing the links and content will never be smaller than 1000 pixels. If the screen is smaller than 1000 pixels, a scrollbar is displayed.
<div style="min-width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
You could also use width instead of min-width:
<div style="width: 1000px">
<div class="links"></div>
<div class="content"></div>
</div>
The difference between the two is simple: if you specify min-width, the div CAN grow to be larger if it needs to. If you specify width, the div will be exactly the size you specified.
Be aware that min-width is not supported by IE6.
Here's a quick stab at specific CSS/Markup for this problem.
Markup:
<!-- Header, etc. -->
<div class="contentView">
<div class="links">
</div>
<div class="content">
</div>
</div>
<!-- Footer, etc. -->
CSS:
.contentView {
/* Causes absolutely positioned children to be positioned relative to this object */
position: relative;
}
.links {
position: absolute;
top: 0;
left: 0;
width: 200px;
}
.content {
padding-left: 200px;
}
You might want your footer to be "sticky." Check here for information on that: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
How appropriate this is depends on precisely what the design calls for. This makes the links section more of a floating box on the left than a column for example.
This ends up looking like this (.content is green, .links is red):