Please help me design the above example in HTML and CSS. Explanation:
Each rectangle is a div.
There is one container DIV with black colour and surrounded by A B C D corners.
Inside the container div there are two TIER1 divs, light grey and dark grey.
Those TIER1 divs themselves contain child divs and they can contain other child divs.
In other words, NESTED divs. Thus: parent contains the child.
Important: the horizontal positioning has to be absolute; simply putting the next div right next to the previous one is not what i want. As you can see the red div does not start at the start of the light grey TIER1 div; this is intentional.
The different TIERs should have a vertical indentation; as you can see TIER3 has a margin at the top so that the parent div is visible.
They way i like to implement this is as follows:
Stylesheet contains generic CSS code; the HTML page contains the positioning of each child DIV using 'left=Xpx' or 'margin-left:Xpx' combined with 'width=Xpx'.
The nesting does not have to be perfect; my code will generate the child divs so that they do not exceed their parent div. So the actual HTML code may just be a bunch of divs inside one container div; it just has to LOOK like they are nested. I think this is easier than actually nest divs in the HTML code itself.
The DIVs get their colour using a simple 'background=#XXX'.
In other words, i want to play with a 'canvas' and draw rectangles in the perspective of position 0,0 = A and 100,100 = D. The HTML code will provide those coordinates, from start (left-top) to end (right-bottom).
I have been playing with display:table, float:left, margin-left and other stuff, but can't get this to work. Horizontal positioning of div elements has always been a tricky side of CSS for me. But i think this can work. Please help me out, thanks a bunch!
Ok, i solved the issue, here is the solution for anyone who has similar issues:
<!-- container DIV uses relative position -->
<div style="position:relative">
<!-- sub DIVs use absolute positioning and can be positioned with CSS: -->
<div style="position:absolute; left:100px; top:10px; width:200px; background:#00f"></div>
<!-- you can have as many DIVs as you want, and they may overlap each other, they will not push each other out of the way -->
<div style="position:absolute; left:80px; top:20px; width:200px; background:#f00"></div>
</div>
Related
I don't understand why when I change position to relative, the "facebook and Facebook helps you connect and share with the people in your life" lies at the top of the page. I've just started learning css for three days. Thanks!!!!
This is the html file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="henry.css">
</head>
<body>
<div class="h1">
<h1 class="h">facebook</h1>
<p class="pr">Facebook helps you connect and share with the people in your life.</p>
</div>
</body>
</html>
css file
.h1{
position: absolute;
left: 10%;
top: 40%;
width: 550px;
}
If you need align elements, first try flexbox(remenber to add flex on the parent elements what you want align): https://css-tricks.com/snippets/css/a-guide-to-flexbox/
After some struggle with flexbox, try to align with grid: https://www.w3schools.com/css/css_grid.asp
FLEXBOX X GRID:
Flexbox: unidirection align, to aligning center vertical all elements in a list of posts
Grid: bidirectional align, generaly use to structure your page the places they will be "header, footer, menu, body..." and inside FOOTER you can use flexbox and is very common
(in first view is hard, but one day make sense to you :D)
Theses properties (flexbox, grid..) is a fluid structure where one HTML element interfere/support to another, try in "inspect elements"(in browser) and play to delete some HTML Nodes like DIVs, SPANs... and see how to behave elements in screen.
Inside these elements add a div (equal you create) with position absolute. and in inspect element (in browser) and delete these element. You will understand the element position "put it out" to structure where element interfere to anoter.
position:absolute positions an element relative to its first not static ancestor element. In this case, the div with class name "h1", the one that wraps those two sentences, has as ancestor the <body> element: this makes your div go at the top.
Little tip: avoid giving keywords as class names, it can be confusing.
I'd switch from to or
position: relative cannot be aligned in the same way as absolutely positioned elements can be using top, bottom, left, or right. Using these will instead shift their position based off of where they should be in relation to other elements.
Since there are no other elements in the DOM, the element will sit at the top.
position: absolute, which is what I assume you were using before ignores all other elements.
If you would like to give this div an offset, use the margin CSS property.
(margin-top, margin-left, margin-bottom, margin-right).
However, you cannot give a relatively positioned element a top offset without using a display, such as display: flex or display: grid
Sorry for my rushed first answer, I hope this clears things up.
I am trying to make the green div's height to be fluid when adding content in the blue div, the red div work as spected but not the green one.
So I want the green div to be as fluid as the red one when adding content to the blu div.
Here is the code http://jsbin.com/ivobav/1/edit
Well you have multiple things at play here. First, if you want a fluid height on green div, you need to remove height: 90% from the CSS. You will notice this will make your green div disappear (because it has no relative positioned content in it).
If you type something in the green div, you will notice it grows. Now, I am assuming you want the red div to nest inside the green div. In order to do this, you need to remove the absolute positioning on the red div.
If you do this, the red div now disappears. That is because the blue div is floated inside of it, meaning it will not grow to hold the blue div. So simply add overflow: auto; to the red div and you should get what you want.
See the results here:
http://jsbin.com/ivobav/5/edit
This happens because parents don't stretch to fit their float children. To go around this problem, you may either:
not use floats
insert the equivelent of <div style="clear:both"></div> as the last element in the parent container
have otherwise non-floated content inside the parent
Edit: For a more thorough explanation, look at http://www.quirksmode.org/css/clearing.html. Mike's answer is the best way to do it, but unfortunately it won't work on all occasions. Notice that while this seems like a problem for which people have tried to come up with solutions, it's not actually a bug, it's the spec - cue someone to introduce some new standard CSS property to make an element to stretch to fit its floats...
I have a big div with a big background-image. Now I want to create some div's and to put them over some elements in the background image, then use qTip2 to give some explanations. In the middle I want to put a form.
<div id="bigdiv" style="background-image:url('back.jpg')">
<div id="qtipbox1"></div>
<div id="qtipbox2"></div>
<div id="form"></div>
</div>
The problem is: if I use position relative for the qTip boxes the form goes down. If I use absolute position, results are different as I resize window.
What do I have to do?
It'd help if you'd share the relevant code or (even better) put up a sample on JSFiddle.
Anyhow, you use position: relative on the container div with the big background image and then use position: absolute on the elements inside. That way, they should be absolutely positioned relatively to the container.
I have this page: http://www.problemio.com/community/public_member_profile.php?member_id=1
It is supposed to have the gray background extend all the way below the footer. If you look at it in firebug, it shows that the layout div contains a number of other divs.
So I don't understand why the gray background doesn't extend all the way down. Any ideas?
Thanks!
Add <div style="clear:both;"></div> at the end (before the close tag) of div#layout.
clear:both has to be added because of the floating inner DIVs. See also: MDN: clear.
I believe with divs, the stack on top of each other. So your background div may have a grey color, when you open the next div it sits on top of it so to speak, which puts it in front of the colored div. Have you tried to apply the bg color class to another div inside the layout div to see if that is it?
You could add overflow:hidden to the container to clear it (if u have float children)
#layout{
overflow:hidden;
}
Edit: or put a clear:both element as last child as a clear fix.
Add overflow:hidden; to the containing div. This will ensure that the container will wrap around all of it's content.
A useful tip when debugging is to put a bright border border:solid 1px lime; around the containing element to see how it is wrapping around it's child content.
Is there CSS which can allow an element to follow flow (similar to position:inline), while a child to the element has position:absolute?
EDIT: the answer is yes, just use inline and position absolute. I had a different issue than the one I posted. My apologies. My issue was that using margin:auto made the item centred, but gave all margins 0 rather than the maximum amount (ie. the container would spread as far as it could and the border would generally touch the border of the parent element). To solve the issue I'll be using an additional container and text-align.
Thanks to the people who helped and read this question.
Ignore the following historic portion of the post.
Obviously I want the position absolute to be positioned relative to
the bounds of it's parents (so the parent would not have
position:static).
Still I am unsure how to do this. Does CSS even have the expressive
power to do this?
Think of having a picture in the middle of a paragraph, but instead of
an image, it's a container with more elements inside.
Basically what you are looking for is position:relative;
Position relative retains the normal flow position but allows coordinate modifications. Using the css values top and left, for example will move the object relative to where it should normally be placed. If you nest the object inside a div, it will use the div's top left corner as the 0,0 coordinate origin.
Keep in mind that the position:relative property is applied to the elements inside your parent container and not the parent itself. You can use static or whatever you'd like for the parent. However, the parent won't necessarily resize to encapsulate its relatively positioned children visually, so you will have to set height and width values yourself.
<style type="text/css">
#my_button {
position:relative;
top:10px;
left:10px
}
#my_div {
height:25px;
background-color:yellow
}
</style>
<div id="my_div">
<input type="button" value="OK" id="my_button"></input>
</div>
Use position:relative; That way the parent stays in the same location but child elements with position: absolute are positioned relative to the parent not the body.