I have been working on a site lately. I am attempting to get a border that surrounds all my content and is at least as tall as the page is. My #Container is the div that should expand to fill the full page. I am attempting to use the min-height:100%; in my css, but for some reason it isn't expanding the border down the whole page. This is my website. The home page is a basic html setup.
<div id="Container">
<div id="header">
<div id="menu">
<ul id="navbar">
<li><a id="nav1" class="nav-text" href="http://usedatcollege.com/">Home</a></li>
<li><a id="nav2" class="nav-text" href="http://usedatcollege.com/bookdb.php">Books</a></li>
<li><a id="nav3" class="add-text" href="http://usedatcollege.com/bookdbform.php">+</a></li>
<li><a id="nav4" class="nav-text" href="http://usedatcollege.com/wanteddb.php">Wanted</a></li>
<li><a id="nav5" class="add-text" href="http://usedatcollege.com/wanteddbform.php">+</a></li>
<li><a id="nav6" class="nav-text" href="#">Info</a></li>
<li><a id="nav7" class="nav-text" href="#">About</a></li>
<li><div id="nav8"><a href=loginform.php class=linktext>Login</a><a class=slashtext>/</a><a href=register.php class=usertext>Register</a></div></li>
</ul>
</div>
</div>
<div id="content">
<h3>Home Page</h3>
</div>
<div id="footer">
<div id="footertext">Copyright © UsedAtCollege.com</div>
</div>
</div>
My CSS is fairly simple too. I have a CSS reset, that I don't think is affecting it because I took it out and it still had the problem.
* {
margin: 0;
padding: 0;
}
#Container {
width:980px;
min-height:100%;
margin-left:auto;
margin-right:auto;
margin-top:0px;
border-style:solid;
border-width:1px;
border-color:rgb(154,154,154);
}
So that's the CSS control for the div wrapping my entire page in.
I just want to know if anyone knows why the min-height is not getting the border down all the way to the bottom of the screen?
Add this to your CSS
html, body {
height: 100%;
}
Something like Firebug or DOM-Inspector would come in handy in such cases. If you fire up Firebug, and see the content of your page in Firebug, you will notice that your body itself doesn't expand through the entire page, it expands only upto around half the page length, the same position where the bottom border is showing. This is because the body will expand only as per its content, the content being minimal here, the body expands only as much, and so does the min-height: 100%.
You can get around this by wrapping the entire page content inside an absolutely positioned wrapper div, setting its top and left values to 0px, and height and width to 100%. Then the border would expand upto the bottom of the page. Of course Firebug would still show the body expanding upto half page only, for absolutely placed elements don't contribute to the natural dimensions. For that, you will have to use relative positioning, and adjust margin-top to the requisite value in order to have the effect.
Related
I have a <div> positioning issue on single-page web design. To be more specific — I can't find a way to fill the background properly, using the <div>s.
For some reason, the <div>s won't fill the background as I want — the background always stays visible (on left/right and top/bottom sides of the <div>s).
What I'm trying to achieve:
My entire page is a single-page website. The page is composed of 5 rectangle <div>s, "touching" each other in a vertical fashion (0 pixels of background between them). I don't want the background to be visible at any part of the page.
I want the top <div> to fill the upper part of the screen ("touch" the browser's upper menu) and the right/left sides.
I want each one of the 3 middle <div>s to "touch" the left and right sides of the screen (and of course touch the two <div>s above and below, without any space between them [no background seen]).
I want the bottom <div> to fill the lower part of the screen ("touch" the browser's lower menu) and the right/left sides.
I've tried to change the position value on the CSS part. The outcome was always a "twisted" version of the page.
My HTML code:
<div id="page1" align="center">
<a id="about"></a>
</div>
<div id="page2">
<a id="portfolio"></a>
</div>
<div id="page3">
<a id="Dream"></a>
</div>
<div id="page4">
<a id="contact"></a>
</div>
<div id="page5">
<a id="Love"></a>
</div>
My CSS code:
#page1{
height : 1000px;
background-color: #4c3719;
}
#page2{
height : 1000px;
background-color: #9a8479;
}
#page3{
height : 1000px;
background-color: #ddbad8;
}
#page4{
height : 1000px;
background-color: #ddd28d;
}
#page5{
height : 1000px;
background-color: #ed9aa9;
}
Write before all CSS code this
* {
margin:0;
padding:0
}
If I correctly understand this may help
I have been trying to figure this out for some time but I cant seem to understand whats happening.
So basically I have a max width on my body tag of 900px. I would like a footer div inside the body to be 100% of the browser window. I have tried the using width:100vw but it behaves unexpectedly and the div starts from the left border of the body (not browser window). So then I positioned the div absolutely to left:0 and right 0. The problem arises when I try to center the content within the div with margin:0 auto. It does not get centered.
The result that Im trying to achieve is to have a footer menu with multiple columns of links that expands to fit the full width of the window.
<body class="minwidth900">
<footer>
<div class="full_browser_width">
<div class="width100% margin0auto">
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
<ul class="floatleft">
<li>link1</li>
<li>link2</li>
</ul>
</div>
</div>
</footer>
</body>
I have tried my best to figure this out and searched a lot for an answer on the net. So please be kind if this is an easy fix.
Thanks for your time and any help will be greatly appreciated.
This is my website
Does anyone know how to put the nav bar right next to the white box where my content will go? I just want it exactly vertically aligned with the white box, but make it sit just to the left of it. Thanks
HTML
<nav>
<div class="nav-container">
<ul class="nav">
<li><span class="text">HOME</span></li>
<li><span class="text">HTML & CSS</span></li>
<li><span class="text">USABILITY</span></li>
<li><span class="text">ACCESSIBILITY</span></li>
<li><a href="page5.html"><span class="text">HOW I BUILT THIS</span>
</a>
</li>
</ul>
</div>
</nav>
CSS
nav {
margin: auto;
}
EDIT: I misunderstood the question, here is the new answer:
http://codepen.io/Vall3y/pen/gbpRoG
I have put the nav and content again under the same container, but the container is now relatively positioned, and the nav is absolutely positioned at top: 0, left: 0. You can control the distance of the nav from the content by adjusting the container width, or with the left attribute of the nav. I have applied a dashed border around the container to demonstrate what is happening, but in your site it doesn't need a border of course.
Orig:
If you could include the rest of the code I could give you a better example, but here is the layout you want:
http://codepen.io/anon/pen/EajXgq
The key here is that the nav and content are adjacent in markup (elements comes right after another. I used float left to make them on the same vertical line but there are other techniques)
The nav is floated left, so that it doesnt take any flow space and allows the content to horizontally align at the center, using a fixed width and an auto margin.
They both are contained in a container to allow margin from the logo if necessary
Also see that there is a clearfix element, for clearfix. Google it to find out what it does but basically it allows the container to stretch over the floated elements so it doesn't mess up the layout
<div class="purple-logo"></div>
<div class="container">
<div class="nav"></div>
<div class="content"></div>
<div class="clearfix"></div>
</div>
I am working on a site that uses the 960 grid system. It has an issue with the navigation. Rather then try to explain, I'll show you a picture of what I'm going for
I figured the best way to do this would be to have a DIV called navHolder that stretches the whole way across the screen. Inside navHolder is a div with a class of container the hold it in the 960 system. I would give navHolder a top and bottom border to achieve the effect.
Here is the HTML
<div id="navHolder">
<div class="container_12">
<div class="grid_4" id="leftNav">
<ul class="leftNav">
<li>About Us</li>
<li>ABG Way</li>
</ul>
</div>
<div class="grid_4" id="logo">
<img src="images/abg_website_logo_2014.jpg" alt="abgLogo" id="mainLogo"/>
</div>
<div class="grid_4" id="rightNav">
<ul class="rightNav">
<li>Portfolio</li>
<li>Media</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
The issue is that the image forces navHolder to become large, so the top and bottom border lose the desired effect.
Here is a screenshot of the image making it too large
Screenshot
I attempted to give the image an
position:absolute
to stop it from resizing the div. This works, however, this causes the navigation options to collapse behind it.
Here is a screenshot
I attempted to create a fiddle to recreate this scenario
Fiddle
But its not quite the same.
My question is then, is there a way to set this image so that it doesnt resize its containing DIV AND still holds its place with the navigation so its on both sides of the image? Is there a better way to go about this then what I am currently doing?
I'd give the container <div> desired size and set the image as it's background without repeat instead of using an <img>, and apply background-size: 100%;
Look into more CSS Background Properties # MDN
I would go about this by overriding the gird (only for nav).
so it would be
#navHolder .grid_4
{
float:none;
display:inline-block;
vertical-align:middle;
}
You would also need to offset the random white space display:inline-block gives so set the font size of the parent wrapper in this case #navHolder font-size:0;
#navHolder
{
font-size:0px;
}
here is your fiddle with my changes
http://jsfiddle.net/bCzK5/4/
Links within a page scroll your content to the top of the browser window. Is there any way to add a margin to that? I'll be using some javascript to guide the scrolling, but would like to have a viable fallback.
So, in short, can I add a margin in CSS that will add some space inbetween the top of the browser window and a section when it's a page link.
HTML:
<nav>
TEST
</nav>
<div class="section">
<a name="test"></a>
<p>This content should be offset from the top of the page when scrolled to</p>
</div>
the preferred way to do in-page links is to use the id instead of name attribute.
<a href="#test">
should match up with:
<div id="test">
From here you can easily add padding to the top of the #test div and that will be your scroll position.
Example: http://tinkerbin.com/EvV7byy9
CSS now supports scroll-margin-top.
This is the best way to do it in 2021.
Hmm, I would set the anchors in each section to be positioned absolutely, about 10px down from the start of the section. It would look like this:
.section {
position: relative;
}
.section > a {
position: absolute;
top: 10px;
}
That is essentially a 10 pixel margin. You can adjust the value of top accordingly to change the margin/padding. I also used the direct descendant operator ( > ) so links in the paragraphs won't be affected.
Also, as mentioned by #NathanManousos, you should no longer use the name attribute, but the ID attribute. Relative document links will scroll to the ID of any element, not just links. You could put an ID on each of your section DIVs and use padding to scroll to the top of the div, and the padding will cause the actual content to be further down in the div.
<style>
.section {
padding-top: 10px;
}
</style>
...
<nav>
TEST
</nav>
<div class="section" id="test">
<p>This content should be offset from the top of the page when scrolled to</p>
</div>