I'm just starting to learn html and css and I've been looking at various websites to practice.
This particular website (http://jsfiddle.net/Hexapod/CWB39/260/show/) had caught my attention but I'm having trouble figuring out how the elements here are working.
If you go to the website, there are "facts boxes" that were made using div elements. These div elements however, are grouped together by a another div element. This div element has an absolute position and an offset of 0px in all directions. Can anyone explain to me what the purpose of this is?
Here's what it looks like:
#container {
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
}
<div id="container">
<div id="factbox1" class="info">
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Thanks in advance!
PS. If I'm doing something wrong with the formatting or anything, please inform me! This is my first time posting here.
This is in place to stretch the element to the full extremes of the closest parent with position set. In this case, to extend the full height and width of the browser viewport.
Its basically telling the element that its top should meet the top side of its parent, its bottom should stretch to the bottom of its parent and the same for its left and right sides.
An alternative would be to use the below CSS:
html, body, #container{
height:100%:
width:100%;
}
The difference being that by using position:absolute the option for layering content is provided.
You can use the inset shorthand these days (not supported by IE of course)
#container {
position: absolute;
background: #002D62;
inset: 0px;
color: #fff;
}
<div id="container">
<div id="factbox1" class="info">
Full with and height 😄
<!-- some code -->
</div>
<div id="factbox2" class="info">
<!-- some code -->
</div>
</div>
Related
To start off I'm relatively new to CSS, Bootstrap and HTML. I want to position a responsive element at the bottom of the screen.
So I have this code which makes it behave responsively:
<div class="col-sm-12">
test
</div>
But how do I get it to stick to the bottom of the page? I already tried ID/ Class selectors with an absolute position. It moved the element to the bottom, but it wasn't responsive anymore.
One solution might be to wrap the desired element in another div, then target the wrapper element to fix it to the bottom of your screen. Your markup could look like:
<div class="fixed-container">
<div class="col-sm-12"><!--your content here--></div>
</div><!--end .fixed-container-->
And you styles could look like:
.fixed-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
This would affix the .fixed-container element to the bottom left of the viewport, and would set the width to 100% of the viewport. The layout-specific rules applied to .col-sm-12 would remain intact.
<div id="my-element" class="col-sm-12">
test
</div>
#my-element {
position: fixed;
bottom: 0;
}
Here is a simple solution to your problem.
Make sure your elements are in a wrapping div. Since you are using Bootstrap, use:
<div class="container-fluid">
Inside this container place your elements/sections including your footer:
<footer class="col-md-12">
Your footer should have the following CSS.
footer {
position: absolute;
bottom: 0;
height: 100px /* Height of your footer */
width: 100%;
}
Here is a fiddle. You can see the footer is at the bottom of the container which has a black border.
http://jsfiddle.net/gward90/ehf2wm83/
I'm learning css right now so you may know what kind of problems are trying to blow my mind... hahaha
Okey, I'm trying to separate my web in two divs like this:
and the intention is that the right-side realize there is something at his left.
Left Side:
.left-side {
background: url('../img/mesh.png') #333;
position: relative;
top: 0px;
margin-left:0px;
width: 100px;
height: 100%;
}
Right-side: Here's the problem
.right-side {
position: relative;
margin-left: 100px;
top: 0px;
float: left; /* Trying to detect something at my left */
height: 100%;
width: 100%;
}
Both have relative positions because I read they should, maybe I'm wrong...
Just for giving you some context, on the left-side would be a navigation bar and on the right side would be all the grid and main content.
I'm using bootstrap framework for creating the grid on the right-side but the problem is that all the div's do not take their parent as a reference.
<html>
<head>
.....
</head>
<body>
<div class="left-side">
<!-- Navbar -->
</div>
<div class ="right-side">
<div class ="container-fluid">
<!-- etc -->
</div>
</div>
</body>
</html>
Thanks for reading this. I would try to fix this by my own, some help would be well recieved
You should use what Bootstrap gives you, which is span classes. What about something like this?
<html>
<head>
.....
</head>
<body>
<div class="row-fluid">
<div class="span3">
<!-- left side -->
</div>
<div class="span9">
<!-- right side -->
</div>
</div>
</body>
</html>
You probably don't need position relative. Usually the best use for that is when you need to position something absolutely inside it - that is, relative to the box you're calling relative.
To use the floats like this, you need to set the widths, and they can't be set to 100%. Doing that means they're taking up as much room as their container, which in this case looks like the whole screen. That means the right div is going to wrap below the left one, since it can't fit next to it. Start out by setting the left to width 100px and the right to width 500px, or something like that, and play with it from there.
And make the left float:left as was pointed out.
Add float: left; to left-side. So, thet element goes to left.
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>​
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
Could someone please help me position my footer correctly in my webpage?
I have the following layout:
This is how I want the footer to behave:
The footer should be positioned at the bottom of the page when the content is empty.
The footer should be 'pushed' down when the content exceeds the height of the page.
here is my HTML:
<html>
<head>
<title>#ViewBag.Title</title>
</head>
<body>
/* This is outside of the container as I want the background
to stretch across the top of the webpage */
<div id="menu">
<div>
/* This contains an unordered list which is restyled as a series of links.
The reason it is contained in inside the menu div is because I want this
content to be centred. /*
</div>
</div>
<div id="page-container">
<div id="header">
<h1>Website title</h1>
</div>
/* This is floated to the left of the content area. */
<div id="content">
#RenderBody()
</div>
/* This is floated to the right of the content area. */
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
<div id="footer">
My footer content goes here.
</div>
Please note the following:
The content and header is contained in a 'Div' called 'page-container'.
The content is made up of two Divs which are floated to the left and right of the content area.
The menu is outside of the page-container div. This is because I want the menu background to stretch across the top of the page (like the Stackoverflow menu)
I am aware that there are many similar questions on Stackoverflow and that a Google search will return a large amount of results.
The thing I have noticed whilst trying to adapt the samples I have found is that they usually depend on a very specific html structure (E.G. everything but the footer is in a container) that does not match mine. No matter what I try I end up with something that doesn't work (E.G. the footer is positioned below the screen bounds when the content is empty or is not moved down when the content exceeds the page).
Update
I can get my footer to stick to the bottom of the page but it is not pushed down when my content expands. I think this is because my content is made up of two floating elements.
Most people seem to be pointing me to tutorials they have found on Google (as already stated I have read most of these and already attempted to adapt them).
I have come to the conclusion that I am going to have to restructure my HTML to get this to work; the point of my question was how do I do this with the HTML I already have? So much for separation of concerns!
A quick google search gave me a few links that you'll find useful.
http://www.cssstickyfooter.com/
http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
I would stick to with the first one, but either should do what you want.
I made a fiddle: http://jsfiddle.net/karlroos/ZVkYC/ (sorry for the badly organized CSS)
Take a look. You'll have to make some workaround for the min-height: 100%; in older versions of IE, presumably with JavaScript.
As mentioned in the edit to my post, I ended up having to alter my HTML slightly:
<body>
<div id="page-container" >
<div id="menu">
<div>
</div>
</div>
<div id="layout-container">
<div id="header">
<h1>Website title</h1>
</div>
<div id="content">
#RenderBody()
</div>
<div id="sidebar">
#RenderSection("sidebar", false)
</div>
</div>
</div>
<div id="footer">
</div>
My CSS is based on CSS found here (This same link was posted by a couple of people but I was already using this anyway!)
The solution is about 99% effective. My footer sticks to the bottom of my page when the content area is empty and is also pushed down when the content grows larger than the screen but I now have a permanent scrollbar as my page height seems to be off (moving the mouse-wheel scrolls the page up and down by a single pixel).
I have so far been unable to get rid of this so I am begrudgingly accepting this as a complete solution unless anyone else can point me in the right direction.
Update
It seems the 1 pixel offset was caused by my footer having a 1 pixel top border. I simply adjusted my CSS to account for this and the scrollbar disappears when the content does not completely fill the screen.
#footer {
margin-top: -151px;
height: 150px;
}
Try editing your CSS to include something like the following:
#footer {
width: 710px;
height: 50px;
margin: 0 auto;
padding: 40px 0 0 0;
}
#footer p {
margin: 0;
text-align: center;
font-size: 77%;
}
#footer a {
text-decoration: underline;
}
#footer a:hover {
text-decoration: none;
}
Then call it in your footer.
Wrap your div-s in a wrapper:
#wrapper {
width:100%;
height:500px;
background:#ccc;
margin:auto;
position:relative;
}
and use the following CSS for your footer:
#footer {
width: 100%;
height: 80px;
background-color: #ccc;
position:absolute;
bottom: 0;
}
Have you tried setting the body to position:relative and the footer to position:absolute with bottom:0 ?
I am writing a glossary page. I have the alphabet links on the top of the page. I want to keep the top of the page (including the alphabet links) fixed, whilst the section of the page with the definitions, scrolls up/down as an alphabet is clicked.
My HTML looks a bit like this:
<html>
<head><title>My Glossary</title></head>
<body>
<div id="top">
A |
B |
Z
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</body>
</html>
[Edit]
The kind of effect I am trying to create is similar to the one here. The difference being that in the example in the link, the page scrolling is done when a user clicks on a category. In my case, I want to scroll the page when an index (i.e. an alphabet) at the top of the page, is clicked.
Yes, there are a number of ways that you can do this. The "fastest" way would be to add CSS to the div similar to the following
#term-defs {
height: 300px;
overflow: scroll;
}
This will force the div to be scrollable, but this might not get the best effect. Another route would be to absolute fix the position of the items at the top, you can play with this by doing something like this.
#top {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 23px;
}
This will fix it to the top, on top of other content with a height of 23px.
The final implementation will depend on what effect you really want.
You can do something like this:
<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
<div id="top" style="position:fixed;background:white;width:100%;">
A |
B |
Z
</div>
<div id="term-defs" style="padding-top:1em;">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... ->
</dl>
</div>
</body>
</html>
It's the position:fixed that's most important, because it takes the top div from the normal page flow and fixes it at it's pre-determined position. It's also important to use the padding-top:1em because otherwise the term-defs div would start right under the top div. The background and width are there to cover the contents of the term-defs div as they scroll under the top div.
Hope this helps.
You can simply make the top div fixed:
#top { position: fixed; top: 20px; left: 20px; }
You can also use flexbox, but you'd have to add a parent div that covers div#top and div#term-defs. So the HTML looks like this:
#content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
#term-defs {
flex-grow: 1;
overflow: auto;
}
<body>
<div id="content">
<div id="top">
A |
B |
Z
</div>
<div id="term-defs">
<dl>
<span id="A"></span>
<dt>foo</dt>
<dd>This is the sound made by a fool</dd>
<!-- and so on ... -->
</dl>
</div>
</div>
</body>
flex-grow ensures that the div's size is equal to the remaining size.
You could do the same without flexbox, but it would be more complicated to work out the height of #term-defs (you'd have to know the height of #top and use calc(100% - 999px) or set the height of #term-defs directly).
With flexbox dynamic sizes of the divs are possible.
One difference is that the scrollbar only appears on the term-defs div.