I have a facebook app and I am working on the front-end now. I am just getting started with css and html, so this might be a silly question- sorry for that.
What I am trying to do is to divide the page in two sections. I've created two divs for that, but the problem is the way they are positioned. My code is the following:
<style>
.choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
}
.frame_div{
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
<hr>
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
I thought that right:0px; for one and left:0px;for the other would position them properly, but they are just one at the bottom of the other.
Can anyone please help with this?
This is the normal way to do what you ask, using float:left;. There were a few other issues with your styles though:
You were targetting .choose_div the class (.), not the id (#)
You need to use box-sizing:border-box when you're doing this otherwise the padding and border is added on top of width:20% making the width larger than 20%.
jsFiddle
#choose_div {
width: 20%;
height: auto;
padding: 1px;
border: 2px;
float:left;
box-sizing:border-box;
}
#frame_div {
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
float:left;
box-sizing:border-box;
}
As for left and right, they can be used to align to a particular side of the screen if using position:absolute. position:relative simply shifts the element a particular amount, for example left:2px would shift the element 2 pixels to the left.
position:absolute positions the element on its closest ancestor that has a position of non-static. Then left/right/top/bottom can be used to indicate the sides of the ancestor.
for the div which to be shown write:
float:left
And for the right one:
float:right
<style>
#choose_div{
width: 20%;
height: auto;
padding: 1px;
left: 0px;
border: 2px;
float:left;
}
#frame_div{
float:right;
right:0px;
height: auto;
width: 80%;
border: 2px 2px 2px 2px;
position: relative;
}
</style>
If you add borders you must shrink your divs' witdh. Or they overflows the parent section and seen top-bottom.
<style>
html,body{margin:0;}
#choose_div{
display:block;
float:left;
width: auto;
height: 100%;
padding: 1px;
}
#frame_div{
float:right;
height: auto;
width: 80%;
height: 100%;
border: 2px 2px 2px 2px;
border-left:solid 2px #000000;
padding:10px;
overflow:hidden;
}
</style>
<body>
<div id="choose_div">
<ul>
<li class="li_choose">
<div class="li_div">
<p>Save</p>
<img src="arrow.jpg" id="arrow_save" style="width:10%;height:10%">
</div>
</li>
</ul>
</div>
<div id="frame_div">
<iframe id="frame_opened">
</div>
Related
Can I achieve this with css only?
50% does not work on rectangle
1 more thing: no fixed height.
One option is to set a fixed value for horizontal border-radius as follows:
div {
display: inline-block;
border-radius: 50px / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Setting a fixed value of horizontal border-radius does the trick!
</div>
You may also want to use a different percentage value instead:
div {
display: inline-block;
border-radius: 12% / 50%;
padding: 1em 2em;
border: 2px solid #000;
background-color: #009EE0;
text-align: center;
}
<div>
Stuff goes <br>
here... <br>
& here... <br>
Or set a different percentage value for horizontal border-radius
</div>
Try this
div{
width:200px;
height:100px;
background:lightblue;
border-radius:50px;
border:2px solid black
}
<div></div>
Edit: use 50vw for making it responsive any height will be okay
div{
width:500px;
height:300px;
background:orange;
border-radius:50vw;
}
<div></div>
There is a trick for that
Just us a very large border-radius value!
e.g. {border-radius:10000px;}
Here is link to demo (Try changing width/height to see working) : http://jsfiddle.net/890z699p/
.rect {
width: 300px;
height: 200px;
background: #000;
border-radius: 10000px;
}
<div class="rect"></div>
It works on me, below is my code snippet
div {
display: block;
border-radius: 50%;
width: 200px;
height: 100px;
border: 2px solid #000;
background-color: #009EE0;
}
<div>
</div>
When my app-container div expands, it will overflow my footer. My footer should move down away from the app-container (or the entire wrapper respectively), but it does not, and I don't manage to find what's wrong.
HTML Code:
<div class="wrapper">
<div class="wrapperbackground">
<div class="app-container">
</div>
</div>
</div>
<footer>
<div class="footerwrapper">
</div>
</footer>
CSS code:
.wrapper { text-align:center; min-height: 900px; }
.wrapperbackground { background-color: #C63D0F; height:375px; padding: 25px 0px; }
.app-container {
border: 1px dotted;
padding: 30px;
margin: 0 auto;
min-height:300px;
width:775px;
background-color:#FDF3E7;
overflow:hidden;
}
footer {
height:100%;
border-top: 1px dashed #FDF3E7;
background-color:#250800;
text-align:left;
}
.footerwrapper { border-bottom: 1px dotted #3B3738;padding:50px;min-height:200px; background-color:#220a03; margin: 0 auto; }
Would be nice if someone could help me. I agree that the CSS code is a little bit messy, and that's perhaps the problem.
You needed to move .wrapperbackground to be before .app-container so it is no longer wrapping it. Then on '.wrapperbackground' apply:
position: absolute; top: 0; right: 0; left: 0; height: 200px;
Then on .wrapper apply position: relative; for good measure and more portability.
See this updated fiddle - http://jsfiddle.net/p57rK/1/
I have been playing with a responsive site, and when all the menus and logos worked well in Coda, sliding nicely into place I tried the site in Chrome, and the logo seems to be hiding behind the header - any help gratefully received!
HTML
<div id="menu">
<div class="menu">
<ul>
<li>Prices</li>
<li>About</li>
<li>Contact</li>
<li class="contact"><span>✆</span> 0783 448 5449</li>
</ul>
</div>
</div>
<div class="container">
<div class="sixteen columns">
<div id="track">
<div class="logo"><img src="images/logo-120.png"></div>
</div>
</div>
CSS:
#menu {
position: fixed;
top: 50px;
height: 50px;
background-color: rgba(255,255,255,0.9);
width: 100%;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px#888;
box-shadow: 0 0 5px #888;
text-align: center;
z-index: 3000;
}
.menu ul li {
display: inline-block;
margin-left: auto;
margin-right: auto;
margin-top: 12px;
text-align: center;
vertical-align: middle;
padding: 2px 4px 2px 4px;
background-color: #fff;
font-size: 130%;
}
#track {
position: fixed;
top: 1px;
}
.logo {
position: relative;
height: 120px;
width: 153;
top: 20px;
left: 0px;
z-index: 3500;
}
Not sure if this should be called a "bug" per-se.... it's just the way the browser handles the relationships between parent/child elements and the z-index property.
The problem is the #menu is a sibling to the .container element, not the .logo.
It doesn't matter how high you put the z-index on .logo it won't go in front of the #menu because the .logo's parent (.container) will always be behind the #menu....
.container has no position or z-index
If that makes no sense, I understand. You might get a better idea from this jsFiddle http://jsfiddle.net/EpgxK/1/ and check this out as well http://css-tricks.com/almanac/properties/z/z-index/.
Oh, and you'll probably have to recode your html if you want the menu to appear in front of the logo at smaller screen sizes.
The position: fixed header needs to have a z-index of 0 (or negative) for the logo to appear above it. I think you may be missing some styles to see this problem based on what you have given us, though.
http://jsfiddle.net/ExplosionPIlls/MaDe2/1/
I Had a same issue I solve by just giving position:static instead position:relative.
In your case just change this class.
`
.logo {
position: static;
height: 120px;
width: 153;
top: 20px;
left: 0px;
z-index: 3500;
}`
Container #666 has margin: 20px; overflow: hidden;.
Nodes #333 have margin: 20px 0 0 20px; float: left;.
Example, http://jsbin.com/owejal/3/edit or picture:
However, the intended result is:
container with 20px margin,
children with 20px margin in-between, but not with the container.
This could be achieved using negative padding (i.e. if container had padding: -20px 0 0 -20px), though such thing does not exist.
The desired result can be achieved using additional element (http://jsbin.com/owejal/4/), though I am keen to learn whether there is CSS only solution.
If you only care about the spacing between the elements, you can discard the pseudo element. It's only there for the background.
http://codepen.io/cimmanon/pen/mucDv
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo"></div>
The CSS:
.group {
overflow: hidden;
margin: -10px 0 -10px 10px;
padding-right: 10px;
position: relative;
}
.group:before {
display: block;
content: '';
position: absolute;
z-index: -1;
top: 10px;
right: 20px; /* 20px instead of 10px due to padding */
bottom: 10px;
left: 10px;
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 10px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
This is a little hacky, but how about just hiding the top and left margin areas with some strategically placed pseudo-elements?
http://jsfiddle.net/SUJtd/
.foo {height:20px; background:#00f; margin:20px 20px 0;}
.group {overflow:hidden; margin:0 20px 20px 0; background:#666; position:relative;}
.group:before{content:""; position:absolute; top:0; left:0; right:0; height:20px; background:#fff;}
.group:after{content:""; position:absolute; top:0; bottom:0; left:0; width:20px; background:#fff;}
.node {width:100px; height:100px; float:left; background:#333; margin:20px 0 0 20px;}
No extra HTML tag - but a class change & No Pseudo elements
A simple trick which probably should work for you :
http://jsbin.com/owejal/65/edit
Screenshot:
Will work with all possible number of nodes :)
<div class="foo"></div>
<div class="group">
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
<div class="node"></div>
</div>
<div class="foo2"></div>
CSS:
.group { overflow: hidden; margin: 20px; margin-bottom:0px; /* margin is required */ background: #666; }
.node { width: 100px; height: 100px; float: left; background: #333; margin: 0px 20px 20px 0px; /* there must 20px gap between every node, but not the container */ }
.foo { height: 20px; background: #00f; margin: 20px;}
.foo2{
height:20px;
background:#00f;
border-top:20px solid white;
margin:20px;
margin-top:-20px;
}
Since you didn't mention resizability as requirement, you could simple use a nth child declaration like in here:
http://jsbin.com/owejal/51/
However, this solution is optimized for fixed widths of parent container, so there should always be 4 elements in a row for example. Nevertheless, its css only.
Change the margin of the node to:
.node { margin: 0 20px 20px 0; }
See http://jsbin.com/owejal/52/edit. Note that this will still give you extra padding at the bottom, but this is a common issue that isn't easily solved. See http://css-tricks.com/spacing-the-bottom-of-modules/ for various ways to solve this (though in the case you presented, none of these solutions work).
The following CSS will get you the desired result, actually you will still have 2 limitations:
If you change the background of body, you need to update the border color for element .foo
The inner nodes still have right margin, this is also the case your desired result screen shot (.group can have 5 nodes, but in this solution it will only have 4).
.group {
overflow: hidden;
margin: 20px; /* margin is required */
background: #666;
}
.node {
width: 100px;
height: 100px;
float: left;
background: #333;
margin: 0px 20px 20px 0px;
}
.foo {
height: 20px;
background: #00f;
margin: 20px;
}
.group + .foo {
height: 20px;
background: #00f;
margin: 20px;
position: relative;
top:-40px;
border-top: 20px solid #fff;
}
You can still find the solution here
I've got three div elements within one class, which in html document it looks like that:
<div class="content">
<div id="content_head">
<!--CONTENT HEAD CODE-->
</div>
<div id="between_ads">
<!-- ADS HERE -->
</div>
<div id="content_middle">
<!--CONTENT MIDDLE CODE-->
</div>
</div>
And css code for these:
.content
{
position: relative;
width: 75%;
float: left;
left: -52px;
margin: 5px 0 10px 0;
border-right: 1px solid #D9D9D9;
}
.content #content_head
{
/*position: relative;*/
width: 100%;
float: left;
border-bottom: 1px solid #D9D9D9;
}
.content #content_middle
{
/*position: relative;*/
width: 100%;
float: left;
margin: 5px 0 0 0;
border-top: 1px solid #D9D9D9;
border-bottom: 1px solid #D9D9D9;
}
/*BETWEEN ADVERTS*/
.content #between_ads
{
position: static;
width: 100%;/*737px;*/
height: 10px;
/*margin: 302px 0 0 -17px;*/
margin: auto;
padding: 0;
background: #000;
}
/*BETWEEN ADVERTS*/
The problem is, that resulted code for BETWEEN ADVERTS looks like this:
http://i.stack.imgur.com/ZU2FD.png - black bar over window "Polecane" that's highlighted in blue - but this div element should be placed here:
http://i.stack.imgur.com/ww0Ko.png - where is the yellow highlight.
Setting .content to position: absolute and rest to relative brakes totally the layout of .content class.
I'm quite new to html and css and still not everything understand.
Cheers
Try taking out the position and float of all your divs. Divs naturally like to be sitting one on top of another so adding positioning css disrupts it I would think.