I am using Bootstrap and am having trouble with the navbar. In my navbar, I have a few divs that I want to be the full height of the navbar, but the navbar constantly seems to be just a bit taller than the divs inside. I figured this was due to some padding on the navbar somewhere, but I can't find it. Check out this jsFiddle:
https://jsfiddle.net/2fax4vme/
Note the three .rhombus divs. They should be the full height of the navbar, but there is 5 pixels of extra space under them. If I make the rhombus divs 5 pixels taller, the navbar just stretches.
I'm sure this is something simple I'm not missing, but I just can't spot it.
I would not try and edit the bootstrap navbar css. In stead, why dont you just counter the padding by adding a negative margin bottom to your rhombus (and add an extra few pixels to the height)
.rhombus{
height:50px; /* + 5px */
width: 35px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
display: inline-block;
margin:0px;
padding:0px;
margin-bottom: -5px; /* counter the padding */
}
and the updated fiddle: https://jsfiddle.net/2fax4vme/2/
What about changing the height of .rhombus to height:50px;. It works for me.
For HTML5, it's also necessary to add margin-bottom:-5px per Pevara.
Tested: https://jsfiddle.net/2fax4vme/3/
.rhombus {
height: 50px;
}
#navbar {
line-height: 0;
}
I found there are few elements set to 50px in Bootstrap, so probably also make yours to the same height is a good plan to avoid editing those default values.
Related
Hi I’m developing a site: HERE
My sidebar background color seems to be not getting in full width ,it has weird margin at right part. I have tried to manage by increase the size and move left by adjusting the padding at the left but the right side seems to be at is even if making the size of the background to 100% or 200%.
`
.sidebar .widgettitle {
margin-left: -50px; !important;
background:#606060;
padding:10px 0px 10px 25px;
text-transform:uppercase !important;
width: 210%;
max-width: 210%;
background-size: 210% auto !important;
height: auto;
}
`
It seems that css class container has a padding on both left and right at the value of 50 pixels. You can overwrite this in your own CSS file.
pic showing .container style in grid.css
The answer by Anmol Nandha is correct - it is caused by the .container element having padding-left and padding-right of 50px.
You could remove the specific styling in your grid.css, or if you don't want to edit framework files, you might consider adding a id attribute on the .container element, and cancel out the effects by setting padding-left and padding-right to 0.
Note that if you do that, then the contents in the left (main) part will stick to the edge. You might want to add padding-left: 50px on the .entry-content-wrapper to compensate for it.
Of course there is the option to tweak the CSS of your sidebar instead, but I have outlined the easiest way (in my opinion) to fix it.
Code: https://jsfiddle.net/gsnfzn35/3/
It's a bit funky to describe, click the toggle drawer button. A pull out drawer on the right shows up. That pull out drawer is one container, but has 2 key components. The first component is all the content at the top. The last component is a "fixed row" on the bottom:
<div class="scroll-fixed-row" style="width:100%;text-align: right">
<p>
FIXED FINAL ROW
</p>
</div>
This row SHOULD be the width of the pull out drawer, whatever that width is; NOT the width of the screen. Currently though, if you inspect element with the width:100%, you see that the width is the width of the screen, not the pull out drawer. Another way to see this is in the fact that when there's width:100%;text-align:right, the text is off screen, pulled to the right of the row that is too wide. Remove the width:100% and you can see the text again.
I'm guessing this is due to the fact that the scroll-fixed-row is fixed, and therefore, its taking width from the screen, not the pull out drawer itself. But this fixed is necessary, because that scroll-fixed-row needs to stay at the bottom even though the rest of the pull out drawer scrolls. Given that constraint, how can I set the width of the scroll-fixed-row to be the width of the pull out drawer, for any screen (full responsiveness) WITHOUT having to provide specific width in pixels based on media queries?
The reason I'm asking this is because I would like to divide the scroll-fixed-row into 2 "sections" using either a table and 2 <td width="50%"> or using Bootstrap grid and 2 <div class="col-xs-6"> in a row. In the current implementation (NOT in the Fiddle), the content in the 2nd grid just gets pushed off page (same issue now) because the table width is inheriting from the screen. I think I can figure that part out if someone can help me answer this question.
The width can be solved by using inherit instead of 100%, this will make a fixed element get the width of its parent, in your case .container.scroll. I noticed that you have padding added to parent, the inherited width will include paddings and so the fixed element will overlay the scrollbars.
Code:
.scroll-fixed-row {
position: fixed;
text-align: right;
background-color: white;
border-top: 1px solid black;
width: inherit; /* get width from parent */
bottom: 0; /* stick to bottom */
right: 0; /* fix offset caused by padding */
}
Another thing I noticed that in your code is that you are using margin-top: 70px on .scroll to offset it from the fixed red nav, this causes the the bottom part that is out of viewport to be invisible, especially the bottom scroll arrow. I've changed it to the following:
.scroll {
position: fixed;
top: 70px; /* offset from top (nav height) */
height: calc(100% - 70px); /* calculate height minus the top offset */
}
If you wanted to prevent the fixed element from overlapping the scrollbars, you could apply pointer-events: none and add another wrapper in the HTML that gets a 15px spacing like the content, for better consistency:
.scroll-fixed-row {
...
pointer-events:none; /* disables mouse functionality to enable scrollbar control */
}
.scroll-fixed-row .inner {
border-top:2px solid red;
background:lightblue;
margin:0 30px 0 15px;
pointer-events:auto; /* allows mouse functionality */
}
jsFiddle demo - scrollbar overlap: https://jsfiddle.net/azizn/guufj4a0/
jsFiddle demo - additional wrapper: https://jsfiddle.net/azizn/d6wwk51b/
I'm trying to create a vertical progress bar by using a CSS transform. I want the progress bar to take up the full height of the screen.
The problem is that, since I use CSS rotate, the progress bar's height is equal to the width of the screen, not its height. I created a fiddle to demonstrate this: the length of the progress bar will change depending on how wide you make the 'Result' section. This is incorrect: it should always take up the entire screen. Here's the code:
HTML:
<progress max="1" value="0.8"></progress>
CSS:
progress {
margin: 0;
height: 5px;
width: 100%;
-webkit-transform: rotate(90deg);
-webkit-transform-origin: bottom left;
-moz-transform: rotate(90deg);
-moz-transform-origin: bottom left;
/* Reset the default appearance */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
As it's a progress bar, its size cannot be larger than the screen height, otherwise the progress indication will be off. I've looked at this solution but this won't work for me because screen dimensions can change at anytime (e.g. switching between portrait and landscape on a tablet), so a JavaScript solution won't do.
Is there a way to force the progress bar to take up the full height of the screen using just CSS? Any other solution to create a vertical progress bar without using rotations, would also be great!
I'm not quite sure what you mean, however try replacing width:100%, with width:100vh;.
As #jaunt just said, using width: 100vh would do the trick, as it takes in consideration the viewport height to assign a width for the progress. Below you can find the list of browsers that support this:
http://caniuse.com/#feat=viewport-units
I want to have a GIF that stays in the centre of the page regardless of where the user scrolls. I want there to be the illusion that the image is 'floating above the page' rather than it being on it.
I believe CSS would be the way to go about doing this? Assuming a have an image called foo.gif, what would the CSS be to do this?
Without more specific guidance on what you want, and why, the best I can offer is:
img {
position: fixed; /* forces the element to stay fixed in relation to the viewport */
top: 50%; /* sets the top of the image 50% of the page height */
left: 50%; /* sets the left side of the image 50% across the page */
margin-left: -100px; /* moves the image half of its own width to the left-side of the page */
margin-top: -93px; /* moves the image half its height 'up' the page */
box-shadow: 0.5em 0.5em 0.7em #333; /* to give the illusion of 'floating'
border-radius: 1em;
}
JS Fiddle demo.
It works with iiz's solution if you change position:absolute to position:fixed.
I created a jsfiddle for you to see.
I also included a drop shadow (from here) to make the image "float".
It's all a bit pasted together, but it will work and you can alter it in any way you wish...
I have a footer table which always has to stay at the bottom. In order to achieve this I have made a div with a class wrapper. wrappers height and width are 100%. The footer is not inside the wrapper so it is always at the bottom. By giving the wrapper a margin bottom of -150px I pull the footer up. However when you re size the page it becomes evident that the the table inside wrapper inherited the margin bottom -150px which is strange. If I do set margin bottom 150px for the table it stops working in safari and chrome.
Here is the site: http://canmill.zxq.net
Help is greatly appreciated
There's a few design choices (specifically your wrapping divs) which have contributed to the problem. The code provided on this page should help you correct it: http://www.cssstickyfooter.com/using-sticky-footer-code.html
try
.wrapper {
padding: 0 0 200px 0;
}
.footer {
margin-top: 0px;
background: url(images/bottombg.jpg) repeat-x;
position: fixed;
bottom: 0px;
}