Display one element above another - html

Semantically it makes sense in the document to be written like this, I also imagine it better for SEO.
<div id="header"></div>
<div id="main"></div>
However, I want the 'main' section to be above the 'header' on screen.
Is there a way to do this using pure CSS?

One way is with a container and some absolute positioning.
http://jsfiddle.net/QpPh4/
.container
{
position:relative;
}
#main
{
position:absolute;
bottom:100%;
}
<br><br>
<div class="container">
<div id="header">Hi I'm a header</div>
<div id="main">Hi I'm the content</div>
</div>

Related

Seperate css for 4th sub element in a row

I want to have a separate style for each 4th element in a row.My html structure is like this
<main>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
<div class="a">
<div class="container"></div>
</div>
</main>
and css is
.container:nth-child(4n) {
left: -2rem !important;
}
So it doesn't reflect on that 4th element.
Any help is highly appreciated. Thanks in advance.
Given the markup you provided, your selector will never match any of your elements as there is only one child .container element within each .a parent element. What you want to select is the .container child element of every 4th .a parent element, like so:
.a:nth-child(4n)>.container{
left:-2rem;
}
Note that the above is identical to:
main>div:nth-child(4n)>.container{
left:-2rem;
}
If you're asking wht the left property isn't being applied to that element then that's because you also need to give it a position. In this case, relative would probably suit your needs best.
.a:nth-child(4n)>.container{
left:-2rem;
position:relative;
}
Alternatively, you could also achieve the above with a single property by using the translatex transform function (although transform does still require some prefixing].
.a:nth-child(4n)>.container{
transform:translatex(-2em);
}
Update Css
.a:nth-child(4n) {
left: -2rem !important;
color:red;
}
Further Link
Since each .container class is surrounded by <div>'s, you cannot select it directly because there is only one child per <div>. If you want to select every element inside the <main>, you can do something like this:
CSS
main .a:nth-child(4n) {
color: red;
}
<main>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
<div class="a">
<div class="container">Hello</div>
</div>
</main>
JSFiddle

Html <div class="row"> not centering

First I'd like to say that I know very little about coding.
In this website I made http://academiadae.com, I added two small divs at each side, so I could get a div class="6u" centered.
<div class="row">
<div class="3u"></div>
<div class="6u"><img src="images/logo.png" /></div>
<div class="3u"></div>
</div>
Can you help me to get it centered without the need for the other divs?
I tried making different elements =center in the CSS, but it didn't work.
Thanks.
First of all, your are using as class 6u which will not be selected. A CSS name must begin with an underscore (_), a hyphen (-), or a letter(a–z) to use it as an CSS selector. You can check this page for any reference.
Second if you want to have the a single div centered you could apply this:
<div class="row">
<div class="item6u">
test
</div>
</div>
Where there is only one div with a class name that starts with a letter.
For you CSS you need to set the width of the div and like #Sprazer told you need to set the margin:
.row{
background-color:yellow;
}
.item6u{
background-color:red;
width:50%; //changed to 50% percentage as wawa suggested
margin:0 auto;
text-align:center;
}
See code here: JSFIDDLE.
So, you currently have something like: HTML
<div class="row">
<div class="3u">
</div>
<div class="6u">
<img src="images/logo.png">
</div>
<div class="3u">
</div>
</div>
and CSS:
div.6u{
width: 50%;
clear: none;
float:left;
margin-left: 0;
}
You need to change this to HTML:
<div class="row>
<div class="6u">
...contents of the div here...
</div>
</div>
and CSS (note: do remove float:left, otherwise it will not work):
div.6u{
width:50%;
clear:none;
margin-left:auto;
margin-right:auto;
}

When Zooming out my website, everything looks wrong

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

map and fixed side bar with bootstrap

I'm using bootstrap to do a simple version of something like this: http://techlist.in/
Basically, I want to have a map and a right side bar with a fixed size and fixed position.
I've started with something like:
HTML:
...
<div class="container">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
...
CSS:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
left:0;
right:0;
margin-top:40px; /* used for the top navigation bar */
}
But this is not working as expected, as the map remains 100% width and the "some stuff" label appears on top of the map. Any hints?
UPDATE
In fact, I already have the nav-bar, but I did not detailed it in the code, my bad. So basically the whole structure of the html page is (with the missing row div added):
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
...
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="span10">
<div id="map_canvas">
</div>
</div>
<div class="span2" style="position:fixed; right:0">
Some stuff
</div>
</div>
</div>
<!-- include javascript stuff -->
...
</body>
The css file is:
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:200px;/* used for the top navigation bar */
background: #ccc;
}
If a leave 200px of right margin for the map, how can I fill the margin with the sidebar ?
Basically, I need a side bar of 200px width and the map adapting accordingly on screen resizing.
UPDATE 3
I'm wondering if I really need to use container / row to achieve this layout in fact (I still do not manage to have this working as expected). As I only need to have a map and a sidebar (that should always remain on the right of the map even if the window is resized), would it make some sense to use basic div / css and not bootstrap classes ?
This is basically what I needed: http://jsfiddle.net/kuXYq/4/
have a look at this fiddle I made it might help.
http://jsfiddle.net/eKQGD/
I used percentages to keep things the same
#map_canvas {
display:block;
position:absolute;
height:auto;
bottom:0;
top:0;
height: 90%
width: 80%;
left:0;
right:0;
margin-top:40px;
margin-right:150px;/* used for the top navigation bar */
background: #ccc;
}
There are a few parts to the answer to this question.
The first thing to point out is that it's a little hazy as to why there is the requirement of a "fixed size and position", and by that I mean that the terminology being used may be throwing off your thinking a bit. Typically, you only need to use the "fixed" css position property if you plan on the page having scroll bars and you want the element to stay in the same position on the page no matter what. In this case, it doesn't seem like you want page scrolling at all since the map will appear to be the same size as the entire page. It seems like what you really want on the sidebar is for it to be a fixed height (aka the height of the browser window) with overflow set to scroll.
Secondly, it appears that you're missing a <div class="row"></div> tag around your elements - a tag with a "row" class is necessary to make the bootstrap "span" classes work.
Lastly, here is something that I would go with if I was trying to duplicate the link you posted, using a bit of JS love as well: http://jsfiddle.net/kzBkA/5/ (background colors added just to show what it looks like )
HTML:
<div class="container">
<div class="row">
<div class="span10">
<div id="nav_bar">
Nav bar goes here
</div>
<div id="map_canvas">
test
</div>
</div>
<div class="span2">
<div id="sidebar">
Some stuff
</div>
</div>
</div>
</div>
css:
#nav_bar {
height:40px;
background-color:blue;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
js:
$(function(){
$("#map_canvas").height($(window).height() - 40);
$("#sidebar").height($(window).height());
});
UPDATE:
So - again, first off, I encourage you to reconsider your use of fixed elements. You seem to be trying to build a page that won't scroll, but then using a "positioning" feature that's specifically for scrolling (position:fixed), which basically tells all your nice bootstrap code to be ignored and just put it where you tell it. A much nicer way to do this would be to use Bootstrap to your advantage. I changed the row class to row-fluid, I moved your nav bar into the span10 with the map (since that's how wide you actually want the nav, or at least that's how it was in the example), I removed the "navbar-fixed-top" class since you don't actually need things to be fixed, and removed the fixed positioning from the sidebar (since again that's basically making it ignore what you're trying to do). Check out the updated jsfiddle: http://jsfiddle.net/kzBkA/7/ - you may have to tinker with the JS to get the map_canvas div set with the correct height, but otherwise this should take care of making your page fluid when the browser is resized without having to add a ton of unnecessary CSS rules. In general, if you use a scaffolding framework, you should use it to your advantage to avoid creating cluttered, messy css with lots of "width:80%; height:20%; margin: ..." - the whole point of using the framework and scaffolding was to avoid that kind of code :)
HTML:
<div class="container">
<div class="row-fluid">
<div class="span10">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
navbar
</div>
</div>
<div id="map_canvas">
map goes here
</div>
</div>
<div class="span2" id="sidebar">
Some stuff
</div>
</div>
</div>
CSS:
.container{
max-width:100%;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
JS:
$(function(){
$("#map_canvas").height($(window).height() - 40);
$("#sidebar").height($(window).height());
});
UPDATE 2
Just realized I missed the part about the sidebar always being 200px but the map width being fluid. I've updated the fiddle to reflect that as well as updating so that sizes get reset when window is resized - http://jsfiddle.net/kzBkA/9/
HTML:
<div class="container">
<div class="row-fluid">
<div class="span10 left-col">
<div class="navbar navbar-inverse">
<div class="navbar-inner">
navbar
</div>
</div>
<div id="map_canvas">
map goes here
</div>
</div>
<div class="span2 right-col" id="sidebar">
Some stuff
</div>
</div>
</div>
CSS:
.container{
max-width:100%;
}
#map_canvas {
background-color:green;
}
#sidebar{
background-color:red;
overflow-y:auto;
}
.right-col{
width:200px;
}
JS:
$(function(){
resizeElements();
window.onresize = function(event) {
resizeElements();
}
});
function resizeElements(){
//set height
$("#map_canvas").height($(document).height() - $(".navbar").outerHeight() - 20 /*not sure where this is coming from, possibly the scrollbar?*/);
$("#sidebar").height($(document).height());
//set width of left col
$(".left-col").width($(document).width() - $(".right-col").outerWidth() - 20 /*not sure where this is coming from, possibly the scrollbar?*/)
}

Distribute DIVS evenly or equally... yes I know I should use a table

I have the following HTML code / structure:
<div id="container">
<div id="div1">text</div>
<div id="div2">more text</div>
<div id="div3">nice text</div>
<div id="div4">bad text</div>
<div id="div5">hello world</div>
<div id="div6">foo</div>
<div id="div7">bar</div>
<div id="div8">Dick Beatie</div>
<div id="div9">Chuck Norris</div>
<div id="div10">Brian Blessard</div>
</div>
and say I have the following CSS:
#container{
overflow:auto;
width:100%;
}
#container div{
float:left;
padding:10px;
text-align:center;
width:10%;
}
The DIVs within the container are an equal size but don't fit within the container! How do I make them fit as they spill onto the next line currently. Please don"t say I should use a table, I know I should use one. I also realise that I could reduce the width of the DIVs however I"d then have to adjust the width of the container.
Thanks for the advice.
Ps. I bet some joker says use a table!
Use box-sizing: bordex-box to make padding included in width.