I'm facing a problem here,
The popup element LINES is getting the size of <div class="right menu"> instead of the <div class="ui top attached menu">. Because of that, my popup is the same size of the right menu, I need the popup to be the same size of the entire navbar
Here is the fiddle: http://jsfiddle.net/qawdfw0y/1/
Thanks in advance
I don't know if this is exactly what you're going for... but it looks pretty good to me:
.ui.popup {
min-width: 98vw;
left: 1vw !important;
}
/* To move the arrow on the box */
.ui.bottom.center.popup:before {
right: 320px;
left: auto;
}
I know the use of !important isn't typically the best, but the style is getting set by semantic.js. The only alternative would be manipulating semantic.js in order for this to do what you want.
Your popup element is inside the .right class element, so it will definitely take it's width.
What you can try is
.right{ width: 100%;}
and also to in your popup block.
<div class="ui fluid popup bottom left transition hidden"
style="top: 554px; left: 1px; bottom: auto; right: auto; width: 100%;">
Related
I am creating a landing page with HTML/CSS and using a little bit of bootstrap. I am having trouble resizing my main page to fit 100% height and width when the page is opened.
I want it to look like google docs' main page: https://www.google.com/docs/about/. If you go there, you'll see:
the nav is in fixed position and follows you everywhere. I got that part down.
The main image automatically resizes depending on your screen size. The icon-arrow-hint (the arrow on mid-bottom of page) can always be seen on the bottom of the image.
Two problems that I have:
Got this weird gap on the right side even though I set right: 0.
After page load, it looks like it fits about 90% of the height and I still need to scroll down. I placed this text on the bottom - theoretically, this should be shown on the bottom of the screen without scrolling, but I have to always scroll slightly down.
This is the JSfiddle: https://jsfiddle.net/iggyfiddle/DTcHh/35435/
I am using position: absolute and I 0-ed all 4 sides.
How can I fit the yellow div 100% height and 100% width like the google page nicely?
If you give an element height: 100%, but there's another element above or below in the same container, you need to adjust for the height of the other element, otherwise there will be an overflow.
Also, adjust for the -15px horizontal margins applied by Bootstrap.
Try this:
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; /* ADJUSTMENT */
background: yellow;
margin: 0; /* NEW */
}
https://jsfiddle.net/DTcHh/35437/
Your .primary-content div has the bootstrap .row class on it which declares negative horizontal margins. A solution would be to remove the .row class from your div or to override the margins in css.
These are the default bootstrap .row styles:
.row {
margin-right: -15px;
margin-left: -15px;
}
Using the class of .row adds a margin of 15px. A quick fix is to remove the class from primary-content div like so.
<div class="primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
or add a class and remove the margins.
The reason that your yellow div is going too far is that you need to set the height to 90%.
To fix the weird padding on the right side, add margin: 0 !important;.
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%; // change this
background: yellow;
margin: 0 !important; // add this
}
See this JSFiddle or run the snippet below
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
.universal-header {
background: red;
border-radius: none;
height: 10%;
width: 100%;
position: fixed;
}
.color-brown {
color: #58482C;
text-decoration: none;
}
.primary-content {
position: absolute;
top: 10%;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 90%;
background: yellow;
margin: 0 !important;
}
.bottom {
position: absolute;
bottom: 0;
right: 0;
}
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<nav class="navbar universal-header navbar-static-top">
<a class="navbar-brand navigation-title color-brown">
</a>
<span class="color-brown navbar-brand navigation-title">HELLO</span>
<span class="navbar-brand navigation-title pull-right color-brown">Login</span>
<span class="navbar-brand navigation-title pull-right color-brown">Features</span>
<span class="navbar-brand navigation-title pull-right color-brown">About</span>
</nav>
<div class="row primary-content">
<div class="col-md-12">
<h1>This is a super awesome product</h1>
<h4>Help me stackoverflow, you are my only hope!</h4>
</div>
<div class="bottom">
You should be able to see me without scrolling
</div>
</div>
Problem 1:
Got this weird gap on the right side
When using bootstrap's row class it will add a margin of -15px to the left and right of your div, see the second answer to this question if you want to understand better why.
Solution: don't use the row class for your primary-content div.
Problem 2:
this should be shown on the bottom of the screen without scrolling,
but I have to always scroll slightly down
you are using absolute positioning, remember that needs a relative positioned parent container, in your case, since you don't have any, everything is relative to the initial containing block, hence your viewport/window.
Quick fix: delete the height: 100%; css from .primary-content
Warning: using absolute positioning the way you are right now will bring you trouble if you want to add more content below your yellow container
I have the following attempt, trying to make a simple sticky footer.
My problem is the footer is not sicking to the bottom, I suspect it might be a css problem.
Would greatly appreciate it if someone can give the following code a scan and provide some advise.
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: absolute;
bottom: 0;
}
<footer class="footer" id="footer">
<div class="footLeft" style="width:75%; float:left;">
</div>
<div class="footerRight" style="width:25%; float:right; padding:25px;">
<button class="btn btn-danger" style="font-size:20px;">Sign Up</button>
</div>
</footer>
The Problem Im having / Output
Add the following rules to body
body {
min-height:100%;/*or 100vh */
position:relative;
}
Explanation:
The min-height property will make sure that the body at least takes 100% of your viewport height. This way even if you have less content your footer will always stick to the bottom of viewport.
Position: relative rule is set so that the footer is positioned absolute relative to the body and not any other wrapper
You can just use this native class to achieve sticky footer in bootstrap--
<div class="footer navbar-fixed-bottom">
Another possibility is using position:fixed, without influencing the body css.
In that case the footer would be always at the bottom of the page event if a scrollbar is present
Example
#footer { /* position must be absolute and bottom must be 0 */
height: 100px;
width: 100%;
background: red;
position: fixed;
bottom: 0;
}
See fiddle
I have this code:
HTML:
<body>
<div id="menu">
menu elements...
</div>
<div id="main">
Main website content...
</div>
</body>
CSS:
body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}
The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!
Yes, you can add to your CSS:
html, body {
height: 100%;
}
and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:
div#main {
position: absolute;
overflow: auto;
bottom: 5px;
top: 50px;
left: 5px;
right: 5px;
}
check margins and paddings.
If you can use javascript, that's may be interesting to use
height: auto;
max-height: 300px; /*calculated value on resize and load*/
I have a HTML5 audio player in a div. I have set its width to 100%. I wanted to fix the player at the top when scrolled so I fixed it's position. The problem is when I do that, the player width overflows the container.
Below is my code.
HTML
<div id="container">
<audio arc="#" controls></audio>
</div>
CSS
#container {
width : 350px;
height: 300px;
background: #BADA55;
}
audio {
width: 100%;
/*position: fixed;*/
}
I created a fiddle to demonstrate the issue. Its currently in the state which I want it to look like. Un-comment the position: fixed; to see the problem.
Can anyone please tell me what I should do to make it stay fixed with the correct width?
Thanks
You can try with
width:inherit;
http://jsfiddle.net/vfQ5K/2/
Need to wrap the audio element and apply the css to the wrapper. I updated your jsfiddle.
<div id="container">
<div class="audioWrap">
<audio arc="#" controls></audio>
</div>
</div>
Then CSS:
#container {
width : 350px;
height: 300px;
background: #BADA55;
position: relative;
}
.audioWrap {
width: 100%;
position: fixed;
}
Note, if you are fixing it's position inside the container, you may want to add 'position: relative' to the container. I went ahead and added that to the jsfiddle.
I'm trying to make a div with a static height and variable width. With multiple horizontal tabs. The active tab should stretch horizontally to fill the container and the inactive tabs should shrink back down to their inactive size (24px in this case).
I can't quite get it to work. The tab stretches, but too much. It bumps the tabs after it to the next line, which shoudn't happen. I can't figure out how to make this work like I want it to.
What I am trying to do can be seen at [link removed]
I'm sure that theres a way to do it, as I've seen it done before, but I can't find an example of it. Know what I'm doing wrong?
Are you looking for a horizontal accordion?
http://www.leigeber.com/2008/05/horizontal-javascript-accordion-menu/
http://jqueryui.com/demos/accordion/#fillspace
There are several examples online. It may be best to rely on Javascript to do the calculating if you want the open tab to take up all the space MINUS the width of the tabs, of the container.
<style>
#navigation
{
border: 1px solid #000000;
height: 400px;
margin: 10px 25px;
padding: 0px;
width: auto;
}
.item
{
display: block;
float: left;
height: 100%;
margin: 0px;
overflow: hidden;
}
.item img { float: left; margin-right: 5px;}
.closed
{
width: 10%;
}
.open
{
width: 80%;
}
</style>
</head>
<body>
<div id="navigation">
<div class="item open">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
<div class="item closed">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
<div class="item closed">
<img src="hometab.png" alt="Home" />
Open Tab Open Tab
</div>
</div>
How committed are you to width:auto on #navigation?
If you set the width of #navigation to something fixed and also set appropriate width values for .open then it looks pretty good.
When I was playing with your example in FireBug I used 400 for #navigation and 350 for .open and it seems to work well.
The extra items are probably being bumped to the next line because the width of your open tab is 100% - try setting it to 80% or 90%, to leave room for the extra "tabs" after it. The "closed" tabs should probably also have a percent width, which should all add together to equal 100% - the full width of their container.
Following approach worked for me:
Let “w” be original width of the div and you want to stretch it by “x” pixels. Adding following CSS on it:
{
width: (w + x) px;
margin-left: -x/2 px
}
e.g. if original width is 300px and you want to stretch it by 50px, additional CSS will be:
{
width: 350px;
margin-left: -25px
}