I'm creating a menu bar on my website. My issue is that there is a small margin at the side of one of my menu items. (I have highlighted this by adding background-color: black; to the container.) I am using safari.
The CSS:
.testMenuOption{
width: calc(100% /3);
height: 100%;
float: left;
margin:auto;
background-color: white;
display: table;
}
Can somebody tell me what my issue is? I have tried removing the text and it is not the issue.
Since you calculate the width by using 100/3, there will be rounding errors, where as a result the widths wont add up 100% again. What you can do to fix it is to set the width of two of the .menuOptionsWraps to 33% and one to 34%.
For example by doing so:
.menuOptionSelectedWrap {
float: left;
width: 33%;
height: 100%;
margin: auto;
margin-right: -4px;
background-color: #d6eef2;
display: table;
}
.menuOptionSelectedWrap:last-of-type {
width: 34%;
}
I'm not sure what you say,that black line change when window resize.check your css, width: calc(100% /3);
change the value 3,you will get idea.
Related
I have been developing a Kanban board for a generic system we maintain in work. I have the core functionality all working but am getting a little stuck on the styling. The following screenshot shows what I currently have:
There is a main DIV that contains all the 'columns/containers' and this is styled:
.kanban-board {
height: calc(100% - 60px);
width: calc(100% + 20px);
display: normal;
padding-bottom: 0px;
overflow-y: scroll;
}
This div contains a series of 'containers' - each grey column which is another DIV styled:
.kanban-container {
float: left;
clear: right;
margin: 20px 10px 0px 10px;
border-radius: 5px;
background-color: #eaebed;
width: 300px;
padding-bottom: 0px;
padding-left: 6px;
min-height: calc(50% - 20px);
display: table;
}
and to note - there could be any number of these 'containers' so they currently wrap to the next line as per the above screen shot. Each 'container' DIV contains an UnOrdered sortable List (UL) and this is styled:
.kanban-sortable {
list-style-type: none;
margin: 0;
padding: 2px;
min-height: 30px;
border-radius: 5px;
height: 100%;
width: 285px;
display: table-row;
}
If you look back to the screenshot, the last 'container' of the first row extends beyond the (min) height of the other containers... Seems okay until the longest is NOT the last in the row:
Now it just looks rubbish... And I have not a clue on how to get this sorted. I have checked some other Kanban examples and my other option is to just flow off page to the right with an X-Scroll bar - but my current spec requires me to fix this issue.
I hope I have supplied enough info for a quick fix.
BTW - im happy to address any other rookie mistakes I may have made from my example.
UPDATE
I have had tried the advice given to use display: inline-block;(in the .kanban-container) instead of:
float: left;
display: table;
And its difficult to see if it has fixed my issue as the auto-resize of the 'containers' height is no longer working
Since you are using floats, you'll need a container for each row that clears the previous one. Another way would be to remove the float, and set the .kanban-container to display: inline-block. If you need table properties in that, you'll have to add an inner container, but frankly I'm a little confused by all the styles used here and the !importants that go with them.
<div class="kanban-row">
<div class="kanban-container">
<div class="kanban-container">
...
</div>
<div class="kanban-row">
...
css:
.kanban-row {
clear: left;
overflow: hidden; // may not be necessary
}
.kanban-container {
float: left;
}
or (without rows):
.kanban-container {
display: inline-block;
}
I'm trying to work on a images section, in which they are being rendered from the servers. There are some images which are having different heights. Because of this, I'm unable to align the images in a manner.
NOTE - I have aligned the images, using display:inline but currently not able to solve height problem.
Current condition :
What I'm trying to follow is similar to Google :
img.res-img {
max-width: 350px;
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}
<div class="image-result" *ngIf="Display('images')">
<div *ngFor="let item of items$|async">
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</div>
</div>
It would be great, if someone can help me out with this. Thanks!
UDPATE 1 - What I did from suggestions is this -
img.res-image {
float: left;
position: relative;
width: 20%;
}
This is how it looks now, still height problem is not being able to solve!
UPDATE 2 - After going through answer, this solution seems to be working. But, the resolution of the images has been decreased and aspect ratio is not proper.
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
I have removed max-width and max-height and used width and height
This is how it looks now :
Remove max-width & max-height property and add just width & height property in your css
img.res-img {
width: 350px;
height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
.image-result {
padding-left: 80px;
display: inline;
}
You need to set one thing alone, i.e. either the height or the width to keep its aspect ratio same.
In your case you need height to be same on all images so you just need to remove the max-width property like this:
img.res-img {
/*max-width: 350px;*/
max-height: 300px;
padding-top: 20px;
padding: 0.6%;
float: left;
}
You can also refer to thee fiddle I just created: https://jsfiddle.net/387bnaer/
I have a header, it has two parts, left - the big breadcrumb, right - control buttons. Problem - when breadcrumb gets too long, right part drops down, but i want to hide breadcrumbs, not all, but the part that covers buttons. Below is image with short breadcrumb
Currently parent div is
width: auto;
text-align: left;
margin-left: 61px;
Breadcrumb is
display: inline-block;
text-align: left;
width: auto;
max-width: 60%;
overflow: hidden;
white-space: nowrap;
And the right button part is
z-index: 99999;
float: right;
display: inline-block;
I don't know why right part gets pulled down, i want just hide breadcrumb, cannot resolve it in chrome dev tool either.
This is what i want,
Maybe there is a little trick out there, noticed many variations of css display, any ideas?
Crappy demo: http://jsfiddle.net/a796joeq/
I suggest this for the "right button part":
z-index: 99999;
position: absolute;
right: 0px;
top: 0px;
display: inline-block;
Try to follow the proper concept so that you can deliver quality output.
You can use float concept to achieve this. For a better understanding, you can use widths initially.
For parent div use: 100%; For child divs use: 50% , 50% (total can be max of 100%)
Here is a fiddle (http://jsfiddle.net/kiranvarthi/ybt5tc8b/3/) of the below:
.parent { width: 100%; background: green; overflow: hidden; }
.child1 { width: 30%; float: left; color: #fff; }
.child2 { width: 30%; float: left; color: #fff; }
HTML
<div class="parent">
<div class="child">
Child 1 content comes here.
</div>
<div class="child">
Child 2 content comes here.
</div>
</div>
the problem is you margin-left on the parent div. Change it to a percentage
Give Positions for your div's :
Parant Div :
position:relative;
Breadcrumb :
position:absolute;
Add media queries:
#media screen and (max-width: 800px) {
.breadcrumb {
max-width: 50%;
}
}
#media screen and (max-width: 750px) {
.breadcrumb {
max-width: 40%;
}
}
working on a few design changes for my website on tablets and trying to work on this idea.
So the basic structure is like so:
<div id='container'>
<div id='leftbox'>Content</div>
<div id='rightsidebar'>Sidebar</div>
</div>
What i want, is for the container to be 100% width, but keep a right hand sidebar at 260px but allow the leftbox div to always fill the width left.
I have made a fiddle to show. But heres the CSS from that fiddle first:
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
}
#leftbox {
width: 50%;
height: 500px;
background-color: #666;
float: left;
}
#rightsidebar {
width: 260px;
height: 500px;
background-color: #333;
float: right;
}
Heres the fiddle: http://jsfiddle.net/X2w3D/
In that example I have just set the width of the left div to 50% to give it a width. The aim is that if the user was to be on a web browser, and resize then there would be no gap between the leftdiv and the rightsidebar. So the rightsidebar is always the same width, but the leftdiv will always fill the rest of the div up in width.
Thanks, Craig.
You might be interested on calc
width: calc(100% - 260px);
Demo
Referrence
Have you considered using the flexbox model? It was designed to answer this kind of problem.
I updated your fiddle and added an example solution: http://jsfiddle.net/X2w3D/4/
I used display:flex; on the container, then added flex-grow:1; to the #leftbox
#container {
width: 100%;
height: 500px;
background-color: #999;
color: white;
text-align: center;
display:flex; // ADDED THIS
}
#leftbox {
flex-grow:1; // ADDED THIS
height: 500px;
background-color: #666;
float: left;
}
Edit: If you need retro-compatibility for the flexbox model, I cannot recommend the amazing flexbox.less enough. It has saved my life quite a few times.
http://jsfiddle.net/Rncu6/
The green div has a max-width attribute, and it should shrink when the screen shrinks.
Instead, what happens is that the green div falls off to another line. If I try to remove the float:left on the green div, it suddenly overlaps with the yellow div, which is not what I want.
How do I fix this?
This seems like a really frustrating issue. The best way I can think to solve it is to remove float:left from p and replace it with display: table-cell.
p {
display: table-cell; /* replaces float:left */
max-width: 300px;
background-color: lightgreen;
height: 200px;
}
The only problem with this approach is that it will render all the margin attributes useless. To work around that, you can just add the inverse of those margin attributes to #img1. For example:
p { margin-left: 10px; }
Would be replaced with:
#img1 { margin-right: 10px; }
JS Fiddle Example
Caveat: I don't know how small you want your minimum width to become, but you'll notice that at a certain point the p will still move onto the next line. This is because it is becoming too small for individual words (e.g. longer words like "paragraph") to fit on one line. To work around that, you can use the word-break:break-all; attribute.
p { word-break: break-all }
That way, the width of p will continue to shrink until the width can no longer fit individual characters on one line.
JS Fiddle Example
Give width in percentages
#img1 {
background-color: yellow;
width: 20%;
height: 100px;
float: left;
}
p {
float:left;
margin-top: 0;
max-width: 50%;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
http://jsfiddle.net/Rncu6/11/
The overlapping occurs because the size of the DOM is becomes larger than the browser so it gets pushed below the img div. As already mentioned you can use % to compensate for that. Although, if you want to absolutely define the divs in pixels until the browser can't display them any more.
To expand upon the current answer you could use Media queries...
#img1 {
background-color: yellow;
width: 100px;
height: 100px;
float: left;
}
p {
margin-top: 0;
float: left;
max-width: 300px;
background-color: lightgreen;
margin-left: 10px;
height: 200px;
}
p:after {
content: " ";
display: block;
height: 0;
clear: both;
}
#media screen and (max-width: 450px) {
#img1 {
width: 20%;
}
p {
max-width: 50%;
}
}
And here's the jsfiddle - http://jsfiddle.net/SxLCJ/