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%;
}
}
Related
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.
I have a sidebar div that takes up 12% of the total screen width (set as a css property). I also have an <h1> block within this div, with a title. When I switch monitors to a smaller one, the sidebar ends up being skinnier, resulting in the title to extend OUT of the sidebar.
How can I format so that the text will always stay within the line? ("MY TI..." is fine for a result)
If the title text is known, you may be able to using viewport units vw for the font-size either in the original style or in the media queries.
You would also need to set the sidebar width to vw too, or a percentage value to make it all responsive.
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
float: left;
width: 15vw;
}
.sidebar h1 {
font-size: 4vw;
text-align: center;
}
<div class="sidebar">
<h1>MyTitle</h1>
</div>
jsFiddle
Another solution would be using CSS ellipses, replace the overflow text with "...".
html, body {
height: 100%;
margin: 0;
}
.sidebar {
border-right: solid;
height: 100%;
width: 15%;
float: left;
}
.sidebar h1 {
white-space: nowrap;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
<div class="sidebar">
<h1>MyTitle MyTitle MyTitle</h1>
</div>
jsFiddle
There is no 100% sure way when it comes to CSS but the title should normally go onto two lines which would be better than what its doing in your screen shots. Post your code if you want someone to look at that.
What you should do though is use media queries to make the sidebar wider when its on a smaller screen:
.sidebar
{
width:12%;
}
#media screen and (max-width: 600px) {
.sidebar
{
width:30%;
}
}
Here is an example
http://codepen.io/nathanfelix/pen/KzZPGy
Also, here you can read more about media queries:
http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
Please try like this:
<div class="sidebar">
<h1>
MY TITLE
</h1>
</div>
.sidebar {
border-right: 1px solid black;
height: 600px;
width: 186px;
}
I feel this question has been answered but I searched and searched and no answer seems to deal with dynamic main content width.
I simply want this scenario:
|-|nav|-|main content|-|
Where nav is a DIV and main content is a DIV and both are placed inside another DIV container which has a width of 100%. - is simpy a spacing between the DIVs, a margin.
nav has a fixed width of 300px and "main content" div should always take the rest of the space available (to fill the 100% of the parent div) - without the use of JavaScript.
Also I want to have some margins left and right of each DIV (nav, main content) so that they have some space between them and the "browser border"/body.
I experimented with table, table-cell but the border-collapsing drove me nuts so I am heading back to god old "float: left" and clearfix. This is what I have so far:
<div id="container" class="cf">
<div id="nav">
Nav stuff
</div>
<div id="main">
Main stuff
</div>
</div>
#container {
padding: 0;
width: 100%;
background-color: orange;
min-height: 50px;
}
#nav {
display: inline;
float: left;
min-width: 300px;
width: 300px;
margin-left: 10px;
margin-right: 10px;
}
#main {
display: inline;
float: left;
background-color: green;
margin-right: 10px;
}
.. /* clearfix stuff omitted (class 'cf') */
So now the problem is, how to make "main content" (#main) fill the rest of the parent (#container). If I use a width of 100% the 100% is of course the full width of the parent and the div will go under the "nav" div. If i use "auto" the same thing happens. It of course works if I pass in a fixed width e.g. in pixels but I don't know the correct pixels in advance and using JS to calculate that seems a bit odd to me.
I've seen a solution where the "nav" was put inside "main" but that leads to problems with the margins. Try to insert a margin to create some space beside a div that is inside another div... I don't think that's anyhow possible in this universe.
Thanks for your help!
Maybe you should create BFC to face this problem.
For example:
#container{
border: 1px solid red;
}
#nav{
float: left;
width: 300px;
border: 1px solid green;
height: 200px;
margin-left: 20px;
margin-right: 20px;
}
#main{
overflow: hidden;
height: 400px;
border: 1px solid blue;
margin-right: 20px;
}
overflow: hidden; is the key to create BFC for #main.
JSFiddle : http://jsfiddle.net/yujiangshui/yMFB6/
More about BFC : https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
For example:
#container {
width: 100%
position: relative;
}
#nav {
position: absolute;
top: 0;
left: 0;
width: 300px;
}
#main {
margin-left: 320px;
}
JSFIDDLE
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/
I have gotten the assignment to code a website from tables to CSS. While this is easy I have one question on how to recreate one of the site's biggest detail.
Site is: www.optimizer.dk.
How can I recreate the labels coming out of the left side, while still having the content in the middle?
Rest of the site is no worries.
Is the solution to:
padding-left: 200000px;
margin-left: -200000px;
To fake the expansion to the left?
I would possibly do it like this:
Live Demo
CSS:
html, body {
margin: 0;
padding: 0;
border: 0;
overflow-x: hidden
}
body {
background: #eee
}
#container {
width: 300px;
margin: 0 auto;
background: #bbb;
}
li, li span {
height: 25px;
}
li {
position: relative;
width: 200px;
background: #777
}
li span {
display: block;
position: absolute;
width: 9999px;
left: -9999px;
top: 0;
background: url(http://dummyimage.com/50x30/f0f/fff)
}
HTML:
<div id="container">
<ul>
<li><span></span>Menu Item</li>
</ul>
<div id="content">
Hi!
</div>
</div>
This answer was based on an older answer I wrote: 'Stretching' a div to the edge of a browser
Ideally here you would want a fluid width. See: http://jsfiddle.net/cbNvn/1/
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
div {
float: left;
}
#left {
width: 25%;
text-align: right;
}
#center {
width: 50%;
}
#right {
width: 25%;
}
Expanding the page would expand the left column and the background image can repeat. The linked images can lay over the background as they do currently. The text-align:right attribute will keep the linked images on the right.
You need 3 divs with float:left to create the 3 columns
i would put it all in a div and set position:absolute;. then put your buttons in there own divs so you can move them.
or
put it all in a div and set the margin to -5%(mite need to play with this into it works). then make the image the background and put you text buttons in there own div's so you can move then to where you want them.
Then use float:left; to line them up