I have got issue with sub navigation list hiding behind the main div. I have used z-index. I know the problem is because of following block, tried different things but couldn't resolve it.. I am creating dynamic web design and what I want is the width of .contact_No_01 fill rest of right space, that is why I am using contact_No_01.
To refer code: jsFiddle
#header_block2 {
margin:0 auto;
width:90%;
position:relative;
overflow:hidden;
background-color:aqua;
}
#contact_strip {
position:absolute;
width:5%;
right:0;
height:62px;
top:50px;
z-index: 1;
overflow: hidden;
background-color:green;
}
you need to remove overflow:hidden; from this CSS and set it to visible:
jsFiddle (hover service menu)
#header_block2 {
margin: 0 auto;
width: 90%;
position: relative;
overflow: visible; /* change is here */
background-color: aqua;
}
Related
I am building a website with different sections with absolute positioning, one of the sections has a height: auto, I was trying to align them by setting up a top: x vh; but it didn't work since there is a height:auto value.
These are the sections:
#navbar{
position:fixed;
width:100%;
height:10vh;
top:0;
left:0;
}
#greeting{
position: absolute;
width:100%;
height:90vh;
top:10vh;
left:0;
}
#projects{
width:100%;
min-height:90vh;
height:auto;
position:absolute;
top:100vh;
left:0;
right:0;
}
I want to add a new section after projects but I couldn't set the top value.
https://codepen.io/Kairkan/pen/LYyoVRX?editors=1100
this is my full code on codepen
HTML
<section id="contact">
<h1 id="contact-h1">Let's work together</h1>
<h3 id="contact-h3">How do you take your coffee?</h3>
</section>
/////
CSS
#contact{
height:100vh;
width:100%;
position: absolute;
left:0;
right:0;
background-color: #393A42;
}
This is the subsequent section. But it stacks on the top of the page because I couldn't set the top: value
You have to reset the margin property in the body section as follows:
body {
margin: 0;
}
then you can remove position: absolute, top, and left.Then just position your sections one by one as follows:
#greeting {
margin-top: 10vh;
height:90vh;
// ... other styles
}
#projects{
min-height:90vh;
// ... other styles
}
#contact {
min-height: 90vh;
background: lightblue;
// ... other styles
}
ps. 1 You don't have to use width: 100% on div and other block elements because that makes no sense. see
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
ps. 2 Avoid styling with IDs. Use classes instead. see
I need a horizontal scrollbar to show on my website when I make the browser window smaller. When I put {overflow-x:auto;} I get a scrollbar instantly even when browser is maximized, and I get like 100 pixels of blank space of my body on the right side.
body {
padding: 0;
margin: 0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y: scroll;
overflow-x: hidden;
}
Try to use this
body {
padding:0;
margin:0;
}
.container {
font-size: 0;
height: 100%;
width: 100%;
position: fixed;
top: 0px;
bottom: 0;
overflow-y:scroll;
margin-right: -10px;
overflow-x:hidden;
} `
If you still face any issue. Can you please share fiddle link where I can check and provide you more accurate solution.
If you want to show the scrollbars only when needed, then you need to use overflow:auto, for more reference please have look here.
The structure of the page is quite messy so I won't go into fixing the structure, but will provide the answer how I got the horizontal bar to show.
The problem is in the div#navbar child elements. And the way you are using margin and padding properties. For some information how to use them have look here.
The div#ctu element has the margin-left property active which expands the element outside its inherited sizes.
#ctu{
margin-left:20px --> padding-left:20px;
}
#ft{
position:absolute; ---> position:relative;
padding-left:10px --> padding-left:0px;
}
.container{
overflow-y: scroll; ---> overflow-y:auto;
overflow-x: hidden !important; overflow-y:auto;
//OR
overflow:auto;
}
I'm creating a website with a videoheader.
Everything goes fine with the implementation.
Though one thing isn't going good.
Actually I should be able to reposition the video within a div in orde to see another piece of the content. (see screenshot)
What I want is that the video will go up, so that I can see the lower part of the video.
Now there is an overflow after 505px of height.
Can someone help me with this?
The css I used:
#cover
{
width: auto;
height: 505px;
}
.header-unit1
{
height: 505px;
border-right:none;
border-left: none;
position: relative;
padding: 20px;
}
#video-container1
{
position: absolute;
z-index:-10;
}
#video-container1
{
top:0%;
left:0%;
height:505px;
width:100%;
overflow: hidden;
}
#testvid video
{
position:absolute;
}
#testvid video.fillWidth1
{
width: 100%;
}
Any tips would be nice!
Here's the general idea of what (I think) you're trying to accomplish:
HTML:
<div class="container">
<video ...></video>
</div>
CSS:
.container {
width:100%;
height: 505px;
position:relative;
overflow:hidden;
}
video{
max-width:100%;
position:absolute;
top:0px;
}
Then animate the video top position. You can do this with Javascript or add another class like video.animated { top: 50px; }
Thanks for the reactions.
I applied margin-top: -250px; to the video element which gave me another frame of the video, exactly what I needed.
For example, I now see the people walking in stead of the blue sky.
I've searched around the forums but can't get an exact answer to the question. I want to tweak my blog layout at http://techtites.com/ to make the content area flexible width that adjusts when the browser changes width without pushing the sidebar to the bottom.
It is currently a fixed width layout.
Main styles that I've been playing with are:
#wrapper {
width:960px;
margin:0 auto;
}
#content {
padding:25px 0;
}
section {
float:left;
width:660px;
margin-right:20px;
}
aside {
float:left;
width:280px;
}
I want to make the section width to be dynamic, while retaining the aside to sit at the right of the window.
use positioning. set your #wrapper div to position: relative; this will position all child elements of that div relative to it rather than the browser window.
now position your aside to the top left of your #wrapper div
aside {
width: 280px;
position: absolute;
right: 0;
top: 0;
}
and finally, give enough padding to the section div so that it can still expand and contract, but it leaves enough room for the aside. You want the padding to equal the width of the aside (in this case 280px).
section {
padding-right: 280px;
}
I put up an example of all of this on jsFiddle: jsfiddle.net/2e9HM/6/
BONUS: if you really want to get fancy, you can set the max-width of your #wrapper div so that the page is flexible within that size. If you do this, make sure you set a min-width as well (equal to the size of your aside) so that the aside doesn't fall outside of the #wrapper when the window is shrunk down all the way.
Morphius solution is the best so far - for an example, see
http://codepen.io/anon/pen/wBBdgg
.blbx {
background:blue;
width: calc(100% - 100px);
height:50px;
display:inline-block;
vertical-align:top;
text-align:center;
}
.rdbx {
background:red;
display:inline-block;
height:50px;
width: 100px;
vertical-align:top;
}
.surround {
width: 100%;
height:50px;
}
.myimg { max-width:100%;
max-height:100%;
}
<div class='surround'>
<div class="blbx" ><img class='myimg' src="http://assets.cdpn.io/assets/logos/codepen-logo.svg">
</div><div class="rdbx"></div></div>
Change your styles to this
section {
float:left;
width:100%;
margin-right: -280px;
}
aside {
float:left;
width:280px;
}
Live example
Maybe this would do:
section {
float:left;
width:100%;
padding-right:250px;
height:100px;
}
aside {
float: left;
width: 250px;
min-height: 100%;
}
section {
float:left;
width:660px;
margin-right:20px;
height:100px;
}
aside {
height:100px;
margin-left: 670px;
}
live demo
I have a responsive site I'm working on and when you go below 800px wide the menu becomes fixed at the top with a toggle drop down menu.
What's happening is that the div is extending outside of the HTML and Body area and making add a sideways scrollbar. I'm not sure how to get around this.
Any help would be greatly appreciated!
Here is my code
HTML:
<div class="navMobile">
<div class="menuBox">
<div class="navMobileBtn"><img src="<?php echo get_template_directory_uri(); ?>/img/menuBtn.png" /></div>
<ul class="navMobileBox">
<li><a class="location" href="#">Location</a></li>
<li><a class="building" href="#">Building</a></li>
<li><a class="space" href="#">Space</a></li>
<li><a class="links" href="#">Links</a></li>
<li><a class="contact" href="#">Contact</a></li>
</ul>
</div>
</div>
CSS:
.navMobile {display:block;}
.navMobile {
height:auto;
}
.navMobile .menuBox {
height:auto;
min-height:40px;
width:100%;
display:inline-block;
position:fixed;
top:0;
left:0;
right:0;
background:#fff;
z-index:99999;
}
.navMobile .menuBox ul {
display:block;
clear:both;
height:auto;
width:100%;
padding:0;
margin:0;
border-top:1px solid #eee;
font-family: "proxima-nova";
}
.navMobile .menuBox ul>li {
display:block;
clear:both;
padding:10px 0;
text-align:center;
border-bottom:1px solid #eee;
}
.navMobile .menuBox ul>li a {
padding:0;
margin:0;
text-transform: uppercase;
letter-spacing: 0.2em;
color:#ccc;
font-size: 0.9em;
font-weight:500;
opacity: 1;
}
.navMobile .menuBox ul>li a:hover,.mainnav ul>li a:focus {
text-decoration: none;
}
.navMobile .menuBox ul>li:last-child a {
margin-right: 0;
padding-right: 0;
}
.navMobileBtn {
clear:both;
height:40px;
width:40px;
}
For anyone looking for a solution like I was, here you go:
This issue is caused by the fact that if the main containing element, either body or html depending on the browser*, is not set to a specific width and height its content can grow beyond the bounds of the window causing the base of the document to be larger than the window.
Normally this causes scrollbars, which is expected behavior. However, in the case of fixed elements, it also changes the starting positions for fixed elements by moving the right and bottom values to the position of the main element rather than the edges of the window. This makes the fixed elements scrollable within the window, which is the very opposite of how fixed elements are supposed to behave.
As a side note some browsers use the body element to scroll the content, while others use the html element to scroll the content by default. This needs to be reset to the body for consistent results.
Solution, set the width and height of the html and body element to 100% so that it remains the size of the window. You also need to set standard resets for the margin specifically and for good measure padding and border. Finally setting the overflows to their proper elements guarantees that the browser is using the correct element to scroll the document.
html, body {
position: relative;
margin: 0;
border: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
body {
overflow: auto;
}
Adding this to your reset css should solve the problem in the future.
This is what did it for me anyway. Hope it helps someone else.
try add these into your .css
html {
width: 100%;
height: 100%;
position: relative;
}
body {
width: 100%;
height: 100%;
position: relative;
}
acctually just one of them would probably solve your problem, but i'm not sure wich.. probably body