I tried to implement fixed position header bar. But when I try to resize window to smaller width, right part of header is not shown.. If I changed position to absolute, problem is resolved but I'm losing the fixed effect of header bar..
#header {
position: fixed;
top: 0px;
display: block;
height:56px;
width: 100%;
padding-left: 0px;
background-color: #333333;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
z-index: 99999;
}
here is the html;
<body>
<div id="mask"></div>
<div id="wrapper">
<div id="header">
<div id="center">
<a id="logoWrapper" href="/makale"><div id="logo"></div></a>
<div id="categoryWrapper">
<ul>
<li>...</li>
<li>...</li>
</ul>
</div>
<div id="searchWrapper">
<div id="search">
<input type="text" />
<a id="searchBt" href="#"><img src="/images/site/search.png"></a>
</div>
</div>
</div>
</div>
<div id="content">...</div>
</div>
</body>
Here is the link http://sporapp.com/makale
i had the same problem some time ago. look at my older post up there -> Make Fixed Header Scroll Horizontal
you can use jQuery or Javascript to reposition the div on the top of the page ( causes some laggy effect sometimes )
hie, i have fixed your problem. You must have to add min-width property of css for #header portion while working on resizing window.
CSS:
#wrapper
{
background-color: #F4F4F4;
display: block;
height: auto;
min-height:100%;
min-width:980px;
overflow:auto;
width: 100%;
}
#header
{
backgroung-color: #333333;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
display: block;
height: 56px;
min-width: 1265px; // Here, if you want to adjust your min-width of header as per your need (for that you can use fire bug) else remains same
padding-left:0;
position: absolute;
top: 0;
z-index: 99999;
}
#header #center
{
margin: 0 auto;
width:980px;
}
Hope, it will helps you. Cheers. !!
Mark it as answer if it will helps you so that other can fix their same problem. Thanks. !!
Related
I'm currently working on a landing page for a website. I want the navigation menu to have a shadow blur, just like this (https://ibb.co/9ZkJ8tD).
The problem is, I haven't been able to figure out how to execute that. I tried creating a container div with two separate divs inside (the mask div and the actual div). I then had the two divs mirror each other, in specs and position. This is my CSS so far (I create borders around each element so I can see them in live server):
HTML
<body>
<div class="wrapper">
<div class="main">
<div class="inner">
<div class="header">
<h1>Distinctive Brokers</h1>
</div>
<div class="nav-container">
<ul id = "menu" >
<li>Listings</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="mask">
</div>
</div>
</div>
</div>
</div>
CSS
.mask
{
border: 2px solid gold;
margin: 0;
padding: 10px;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#menu{
border: 2px solid magenta;
list-style-type: none;
display: flex;
margin: 0;
padding: 10px;
align-items: center;
align-content: space-between;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
}
li{
padding-left: 10px;
padding-right: 10px;
margin: auto;
}
This is what it looks like at the moment (https://ibb.co/xf80vFt).
What would be the simplest method to create the navigation bar? I'm relatively new to web development so I would to avoid anything with Javascript.
you can add background-color: rgba(255, 255, 255, 0.1) to have the visibility effect. You can change the a number according to your liking of the visibility. background-color: rgba(255, 255, 255, 1) will go full white while background-color: rgba(255, 255, 255, 0) will go full transparent.
How can I change the position of a div smoothly, responsive?
HTML:
<div class="icon">
<i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>
CSS:
.icon {
position: absolute;
top: 30%;
left: 0;
width: 50px;
height: 50px;
background: #d54042;
}
.sidenav {
position: absolute;
top: 30%;
left: 52px;
height: 50px;
width: 200px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
background: #d54042;
background: -webkit-linear-gradient(left, #D54042 , #D56769);
background: -o-linear-gradient(right, #D54042, #D56769);
background: -moz-linear-gradient(right, #D54042, #D56769);
background: linear-gradient(to right, #D54042 , #D56769);
}
#provider-json {
margin-top: 6px;
padding: 10px 5px;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border:solid 1px #ccc;
-moz-box-shadow: inset 0 0 4px rgba(0,0,0,0.2);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
box-shadow: inner 0 0 4px rgba(0, 0, 0, 0.2);
outline-color: #d54042;
}
.toggle_icon {
font-size: 2.5em;
color: white;
padding: 3px 3px 2px 5px;
}
I would like to change verticaly the position of .icon and .sidenav.
When i make the screen smaller it should go smoothly up to top: 0;
I tried this:
#media screen and (max-width: 480px) {
.icon, .sidenav {
top: 5%;
}
}
But this works only when the screen is 480px wide.
To give that a smooth transition, make use of css transition as below,
#media screen and (max-width: 480px) {
.icon, .sidenav {
top: 0;
transition:0.6s ease; /*Add this*/
}
}
This move icons and search bar to top at screen resolution below 480px;, check this jsFiddle
As per your question "change the place smoothly" I am giving you some idea about relative and absolute positioning.
According to reference "Absolute location is a place's exact spot on a map, while relative location is an estimate of where a place is in relation to other landmarks." What this means relative takes parent div into consideration but absolute is totally absolute.
<div class="container">
<div class="icon">
<i class="fa fa-search toggle_icon"></i>
</div>
<div class="sidenav">
<center>
<input id="provider-json" />
</center>
</div>
</div>
Now, refine your code by keeping container with relative positioning and other with absolute. Relative should always wrap the absolute. Also take some reference from online tutorials like w3schools with better example. You will be cleared with concept.
Is it possible to make a box-shadow CSS call wider than the HTML element to which we are applying it, while keeping the same height as the element to which we are applying it? I can increase the spread, but that will increase the height. As you can see in my snippet, the max width the box-shadow is only as wide as the .box div. Is there a reason why we would not want the box shadow ever wider than the HTML element or why there would be a restriction to this?
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 0px rgba(0, 0, 0, .2);
}
.container-spread {
background-color: gray;
height: 100px;
width: 100px;
}
.box-spread {
background-color: blue;
height: 50px;
width: 50px;
box-shadow: 55px 0px 0px 5px rgba(0, 0, 0, .2);
}
<div class="container">
<div class="box">box</div>
container
</div>
<br>
<br>
<div class="container-spread">
<div class="box-spread">box</div>
container
</div>
You can make use of the pseudo element to enlarge the element and then apply box-shadow. height: 100% will make sure the height of the box-shadow is same as the element. The width value will be the key value to change.
.container {
background-color: gray;
height: 100px;
width: 100px;
}
.box {
background-color: blue;
height: 50px;
width: 50px;
position: relative;
}
.box::after {
box-shadow: 85px 0 0 0 rgba(0, 0, 0, 0.2);
content: " ";
height: 100%;
position: absolute;
left: -50%;
top: 0;
width: 150%;
}
<div class="container">
<div class="box">box</div>
container
</div>
While it's not possible to use the spread-radius value to extend the shadow in just the horizontal or vertical directions you can add multiple drop shadows to a single element, the only downside being that any over lap will produce regions of darker shadow. But with a little bit of math you can line them up easily enough.
box-shadow at MDN
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue;
height:50px;
width:50px;
box-shadow:55px 0px 0px 0px rgba(0,0,0,.2),
105px 0px 0px 0px rgba(0,0,0,.2),
155px 0px 0px 0px rgba(0,0,0,.2) ; }
<div class="container">
<div class="box">box</div>
container
</div>
While box-shadow does have a spread setting, it applies to all sides. As far as I know there is no way of adjusting just the horizontal or vertical size of a box shadow.
You could potentially use two (or more) box shadows to achieve the effect, but it is really only applicable when the spread is set to 0
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px;
box-shadow:
55px 0px 0px 0px rgba(0,0,0,.2),
5px 0px 0px 0px rgba(0,0,0,.2); }
<div class="container">
<div class="box">box</div>
container
</div>
Maybe you need this
.container{ background-color:gray; height:100px; width:100px; }
.box{ background-color:blue; height:50px; width:50px; box-shadow:0px 0px 2px rgba(0,0,0,1); }
<div class="container">
<div class="box">box</div>
container
</div>
I am designing a page which has the following HTML structure.
<div id="event">
<div id="event-image">
<div id="event-image-background">
</div>
<img src="image_url_here">
</div>
<div id="event-title">
EVENT 1
</div>
<div id="event-details-summary">
Event Summary Here
</div>
<div id="event-description">
</div>
</div>
And I am using the following CSS for the structure.
#event{
position: relative;
}
#event-image{
text-align: center;
margin: 0px auto;
border: 1px solid #fff;
box-shadow: 0px 5px 10px -7px #CCC, -5px 10px 10px -7px #CCC;
overflow: hidden;
}
#event-image-background{
background: url('image_url_here') no-repeat;
background-size: cover;
opacity: 0.1;
position: absolute;
height: 100%;
width: 100%;
z-index: 2;
}
#event-image img{
opacity: 1;
z-index: 3;
border: 1px solid rgba(204, 204, 204, 0);
}
The problem I am facing is that the background that I have applied to event-image-background is overflowing into the other divs, namely event-title and others that follow. I am not really good at CSS, and have no clue what's going wrong. Kindly help.
Thanks :)
PS: I dont really want to use the max-height option, as the image that I will be adding via img src will have variable height for each event.
Try adding overflow: hidden; to #event-image-background.
Protip, I'd recommend favoring styling on classes (e.g. .event-image-background and <div class="event-image-background">) rather than ids. See: http://css-tricks.com/the-difference-between-id-and-class/.
I have a problem with z-index and my code. I want to have a popup on every row, positioned relative to that row. So I created this code:
.level1
{
position:relative;
z-index:2;
}
.level2
{
position:relative;
z-index:3;
}
.popup
{
position:absolute;
left:0px;
top:10px;
width:100px;
height:100px;
background:yellow;
z-index:4;
}
<div class="level1">
<div class="level2">
<input type="text" value="test1" />
<div class="popup">test1</div>
</div>
<div class="level2">
<input type="text" value="test2" />
<div class="popup">test2</div>
</div>
</div>
When you set position: relative on an element then you establish a new containing block. All positioning inside that block is with respect to it.
Setting z-index on an element inside that block will only alter its layer with respect to other elements inside the same block.
I'm not aware of any work-arounds.
try adding z-index with negative values to the back divs
You can use z-index with the relative position. You just need to specify position: relative. If you really want it to look like it is popping up, I suggest using box-shadow
.popup {
position:relative;
left: 0px;
top: 10px;
width: 100px;
height: 100px;
background:yellow;
z-index: 4;
-webkit-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
-moz-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
-ms-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
-o-box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
box-shadow: 0px 6px 6px 0px rgba(213,213,213,0.6);
}
Z-Index is a rule order which results will be visible ONLY when two or more elements overlap. This means that if you want to have same z-index behaviour as in absolute position you'll need to make them overlap. Position relative don't make them overlap, so for example in this example, to make this two divs to overlap, I have to set the second one's top to -50px.
<div style="background-color: blue; width: 500px; height: 100px; position: relative">
<div style="background-color: red; width: 50px; height: 50px; position: relative; z-index: 1; top: 0px"></div>
<div style="background-color: yellow; width: 50px; height: 50px; position: relative; z-index: 0; top: -50px"></div>
</div>