I have a list of names which is rendered inside <ul>. I am applied some CSS code but facing some browser specific issues.
Chrome : List element is getting displaced by 1 row.
Firefox : All list items collapsing to one item.
Code snippet (JS bin editor)
HTML
<div id='container'>
<ul class='list'>
<li> <div class='rel'>
<div class='abs'> item 1 </div>
</div> </li>
... More items similar to above one
Css
#container {
height: 100px;
overflow-y:scroll;
width: 200px
}
.list {
background-color: skyblue;
}
.rel {
position: relative;
}
div.abs {
position: absolute;
left: 20px;
}
I want to know the reason of this misbehavior in both the browsers. Have I written wrong CSS ?
Update: With in <div class='abs'> I have a lot of code which I have not added here as it is not necessary and the content of abs div is positioned with respect to its parent i.e. <div class='rel'>
The problem is indeed the
div.abs {
position: absolute;
left: 20px;
}
This positions every element with class "abs" 20px to the left (and 0px from top) of the ul element.
What would you like to achieve? Your menu horizontally or vertically?
Horizontally: Use float:left or display:inline with a margin-left:20px;
Vertically: for a 20px margin-left:
http://jsbin.com/ediloh/17/edit
I first added margin:0px to delete the top and bottom margin of the ul element. Next I added a left margin of 20px to move it to the right.
alternative: put margin-left on the li-element instead. This will not move the circles
The divs with position:absolute are taken out of the page flow, basically causing their parent divs to have no content at all (no content amounting to any width or height that is). So they will collapse.
What outcome do you actually want. You are fixing the div.abs to be indented by 20px inside its containing div.rel.
Could you give some idea of what you are trying to achieve.
Wing
Related
#Here, I'm trying to create horizontal scrolling for a div element for my application. The div element consists of ul li element and some other div tags for my requirement. The Ul li elements are dynamically added inside the parent div element.
Although I could get the vertical scrolling working properly and my horizontal scrolling is displayed using overflow-x: scroll. I am not able to scroll it, the ul li elements gets distorted. I have set a predefined width of 700px for the div container also. Its like the horizontal scrolling is disabled. I am not using overflow anywhere else in the application
<div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length>0 && !isLoading">
<ul>
<li *ngFor="let emp of empArr">
<div class="user">
<div class="name">{{emp.empname}}</div>
<div class="role">{{emp.empdesgname}}</div>
</div>
</li>
</ul>
</div>
My CSS file:
.org-chart {
display: flex;
justify-content: center;
left: 29px;
position: relative;
overflow-x: scroll !important;
overflow-y: scroll;
height: 400px;
width: 65%;
transform: translateY(12%);
}
Looking at your code, providing overflow-x: scroll !important; is big no no from me, it should be the last option for you to use.
now coming to your requirement, you need to specifically provide overflow-x: scroll if you give overflow:auto it automatically gives you a scroll when needed.
now when is it??
when the height and width is more than the browser size that is when you will get the scrolling feature.
if you need a scroll within browser size then, decrease the width of the container and apply overflow:auto; that should give you a scroll on sight.
here is the example of what I am saying:
so what does it mean is when you want a scroll within the browser then you should have a child class and the width of that class should be less w.r.t the content so that it can overflow.
.org-chart {
display: flex;
justify-content: center;
left: 29px;
position: relative;
overflow: auto;
border: 1px solid black;
/*Main container */
height: 300px;
width: 65%;
}
.content {
width: 100%;
/* you should have another width inside main container */
border: 1px solid red;
}
<div class="org-chart" appOrgachart [empArr]="employees" [orgaArr]="orgaArr" *ngIf="employees.length>0 && !isLoading">
<ul>
<li *ngFor="let emp of empArr">
<div class="user">
<div class="name">{{emp.empname}}</div>
<div class="role">{{emp.empdesgname}}</div>
<div class="content">Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last
on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it,
text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below. Notice that the text-align-last property sets the alignment
for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH of the paragraphs. To use text-align-last on only the last paragraph in the container, you can
use :last child, see example below. Notice that the text-align-last property sets the alignment for all last lines within the selected element. So, if you have a with three paragraphs in it, text-align-last will apply to the last line of EACH
of the paragraphs. To use text-align-last on only the last paragraph in the container, you can use :last child, see example below.</div>
</div>
</li>
</ul>
</div>
apply max-width property as 64% and overflow:auto
I'm attempting to stack divs (styled to look like sticky-notes) so that part of the divs on the bottom hang out. I initially considered okay, I'll just style the top-most div as normally, and then only style the parts that you can see with the bottom divs (as opposed to making all divs the same width+height and stacking them). The issue is that I also want to style the border-radius of all divs the same, and if I do it the non-stacking way, then border-radius applied to the top div doesn't yield the same design as any border-radius applied to the bottom divs (because the width+height is different for the top div, I'm guessing).
<div class="stickynote1"> content <div>
<div class="stickynote2"> content <div>
<div class="stickynote3"> content <div>
Is there a way to fix the border-radius issue without resizing the divs to all be the same width+height?
If I were to resize the divs to all be the same width+height, how can I stack them? It seems that position:relative and z-index combination on the divs won't work because position:relative created a new container block, thus somehow making the z-index not work with the other divs' new container blocks.
If I were you, I'd:
add another class called stickynote and find all the common style (in this case border-radius) and apply the class to all of them
I'm not sure what you mean by stacking them -- when I read your initial paragraph, I thought you meant stack them vertically on the y axis, but seemingly, you're struggling with z-axis, so it seems like you want to stack them on the z axis. In which case, I'd put all three of them in a container, position that container relative, and position the three stickynote absolute, with different z-index, but identical x/y position.
Please do the following for better scalability:
Use a common class.
Close the </div> correctly.
Check the snippet.
Snippet
.stickynote {
position: absolute;
background: #0f0;
border: 1px solid #f90;
border-radius: 5px;
padding: 10px;
width: 75px;
top: 10px;
left: 10px;
}
.stickynote + .stickynote {
top: 20px;
left: 20px;
}
.stickynote + .stickynote + .stickynote {
top: 30px;
left: 30px;
}
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
<div class="stickynote"> content </div>
friends,
I decided to ask this because I've seen many answers on the internet, but no one seems to be a definitive answer.
In out HTML documents we have many elements one inside another. Eventually we'll want to add paddings and margins to these elements.
So, what if we want to have all content horizontally aligned to the center of the page? If the content has 1000px of width and the screen resolution will change from device to device, the most common solution is something like (will work on netscape based browsers):
body{
width: 100%;
}
#content{
width: 1000px;
margin: 0 auto;
}
But if we have lots of other elements inside the #content element, like a table made of DIV elements, we start to face some problems. The parent's height will not adjust to its children's height and padding and margin will not work properly (if we inspect the element we will see that the width and height is not behaving as expected) unless we add some new rules.
I use float: left but then the headache starts! When I add float: left only those elements will work fine, but the parents will not. If I add float: left to an element that already has margin: 0 auto set, it will no longer be aligned to the center of the page...
I've seen some solutions using text-align: center to the parent and display: inline-block; float: none; to the element we want to be aligned to the center. But it also has many problems (for example, we can't set the float rule)
How do you deal with this problem guys?
You need to use clear after you use float on elements in order to 'clear the floats' and make the height propagate up to its parents. You can use clear:left (or right) to just clear float:left elements but typically it's fine to just use clear:both.
In the below example there are two versions of clearfixes, one that uses a pseudo-element on the container and another that is just another element.
Demo
HTML
<div id="content">
<nav>
<ul>
<li>Home</li>
<li>Second</li>
<li>Third</li>
</ul>
</nav>
<div class="float-me">Test1</div>
<div class="float-me">Test2</div>
<div class="clear"></div>
</div>
CSS
#content {
width: 500px;
margin: 0 auto;
}
li {
float:left;
}
/* our pseudo-element clearfix */
ul:after {
display: block;
content: "";
clear: both;
}
.float-me {
float:left;
}
.clear {
clear:both;
}
This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):
Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!
The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.
You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>
I am a relative novice in the world of CSS so please excuse my ignorance! I am attempting to use the following CSS to align two divs horizontally:
.portrait {
position: relative;
display:inline-block;
width: 150px;
height: 200px;
padding: 20px 5px 20px 5px;
}
.portraitDetails {
position: relative;
display:inline-block;
width: 830px;
height: 200px;
padding: 20px 5px 20px 5px;
}
Unfortunately, unless I remove the display: inline-block from the .portrait class and replace it with float:left the .portraitDetails div block appears underneath the first div block. What on earth is going on?
Since you provided a working example, the problem seems to be more clear now.
What you have to do is simply remove display: inline-block and width: 830px properties from the right div. Of course remember to NOT add the float property to it.
People sometimes forget what is the purpose of the float property. In your case it is the image which should have float property and the image only. The right div will remain 100% wide by default while the image will float it from the left.
HINT: If the text from the div is long enough to float underneath the image and you want to keep it "indented" at the same point then add the margin to the div with a value equal to the image's width.
The problem with display: inline-block; is that the siblings having this property are always separated by a single white-space but only if there are any white-spaces between their opening and closing tags.
If the parent container has fixed width equal to the sum of the widths of these two divs, then they won't fit because this tiny white-space pushes the second div to the next line. You have to remove the white-space between the tags.
So, instead of that:
<div class="portrait">
...
</div>
<div class="portraitDetails">
...
</div>
you have to do that:
<div class="portrait">
...
</div><div class="portraitDetails"> <!-- NO SPACE between those two -->
...
</div>