summer-band.com
I know this can be removed using line-height:0; on my #navigation , but that throws the entire nav out of whack. Trying to find other solutions to remove hits 5px margin (only on Firefox/ mobile... doesn't show up in Chrome/ Safari.)
It's actually the navigation/sidebar that is causing this. I suggest you set the navigation to position: absolute. Then you'll just need to move the header image to the left. Preferably, include the header and navigation inside the container.
EDIT: Next thing to do is this:
#container {
width: 560px;
padding: 0 130px;
margin: 0 auto;
float: none;
z-index: 5;
height: auto;
min-height: 600px;
background-color: rgba(0, 0, 0, 0);
filter: alpha(opacity=100);
opacity: 1.0;
position: relative;
}
I've added margin: 0 auto, float: none (but instead of that, just remove the float), padding and position: relative. The last step is to move the navigation and header inside the container, so that the navigation is positioned relative to the container.
Finally, add this to the navigation styles:
left: 0;
Related
Hi I recently made my site navigation "sticky" for : https://shiftins.com. The only problem is the height of the navigation has been removed from the page and looks like it became a separate layer that "floats" over the page. It ends up hiding some of the top parts of my page content. I tried adding margins and padding to various containers but there are too many different ones sitewide. Is there a solution that will make my site honor the height of the sticky navigation site wide?
Here is the code I used:
.site-header {
position: relative;
z-index: 999;
background: #0074E5;
background: #0c5798;
height: 60px;
box-shadow:inset 0 1px 7px rgba(0, 0, 0, 0.2);
}
.site-header .wrap {
padding: 0;
}
.site-header {
position: fixed;
width:100%;
height: 60px;
}
You need top:0; on your fixed header. Then add the margin to a global div like site-container like this this:
.site-container{
margin-top: 60px;
}
.site-header {
position: fixed;
width:100%;
height: 60px;
top:0;
}
float element always remove the parent height so you have to use overflow:hidden: on parent element or apply clearfix hack/class
see this Css trick
Here is 8 floating blocks with equal content with some problems:
if I use padding:10px for sideblock .inner to create "border" it does not work good (padding-bottom it's look like disapeared)
if I put a cursor on block - it can't be appeared at the top, and do not move othes block
How makes block working well?
HTML:
<div class="sideblock"><div class="style-menu"><div class="inner">
Everything around you that you call life was made up by people that were no smarter than you, and you can change it, you can influence it, you can build your own things that other people can use.</div></div></div>
CSS:
.sideblock {
width: 220px;
height: 80px;
overflow: hidden;
margin: 10px;
float: left;
}
.sideblock .inner {
background: #ffffff;
padding: 10px;}
.sideblock .style-menu {
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);}
.sideblock:hover {
box-shadow: 0px 0px 5px #000;
overflow: visible;
height: auto;}
Here is my code - http://jsfiddle.net/2HqZV/1/
Thx for support
Well i assume you want the have the same look as when the div is hovered but then smaller? You shouldn't have to use any overflow on the div it self atfirst, it should response to your given height.
When you inspect your element you can easially see the heights of your elements.
You'll see that your .style-menu div hasn't the same height as .sideblock, to fix that you can add a inherit height to your style-menu:
.sideblock .style-menu {
height: inherit;
padding: 3px;
background: #157ba1;
background: linear-gradient(to right, #157ba1 0%,#5fa31c 100%);
}
Now when you look further you see that your padding at the .inner div element expends the actual given height. What you want is the padding to be inline. You can easially do this with box-sizing. And finally you can 'cut' the text by adding a overflow:
.sideblock .inner {
background: #ffffff;
padding: 10px;
height: inherit;
box-sizing: border-box;
overflow: hidden;
}
jsFiddle
I hope this is what you meant.
btw, i find your way of adding a border very unique ^^
Update
So to let every element that expends ignore every other element, you should take it out of the document flow. You can do this with position: absolute;. However what absolute position does is indeed ignoring all the other elements, but you want to have the same position. Because the element has no offset positioning (top, right, bottom, left) it will be placed at the left corner of your screen(acts like it is the only element in the DOM). To keep the elements position we are not changing the .sideblock but the content of that; .style-menu:
.sideblock:hover .style-menu
{
box-shadow: 0px 0px 5px #000;
position: absolute;
}
Because this element goes on top of the other, you want to add the shadow here.
Now the .sideblock element has no content because the content has become absolute and so out of the document flow. To fix this you can give this element a min-height:
.sideblock:hover
{
min-height: 80px;
height: auto;
}
jsFiddle
I've got a set up similar to this: http://codepen.io/anon/pen/iAJnx where the main content is rather long. What I want to do is to put a border round the visible part of the screen as in this screenshot: http://i.imgur.com/ENtLau4.png
What I want to do is to create 4 divs that are positioned at the edges of the screen, but I'm struggling both with the positioning and giving the divs height and width without content. Does anyone have an idea about this?
Note: I've already tried using an overlay, but it makes the content non-clickable.
Try this:
HTML:
<div class="border-box"></div>
CSS:
body { position: relative; }
.border-box {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
How it works:
I absolutely positioned an overlay with borders, that will stick the edges of the screen by using top, bottom, left, right definitions. To make the content below selectable, you set pointer-events: none; on the overlay.
Example: http://codepen.io/anon/pen/BxJbh
If you want to achieve the same results without adding additional HTML markup, you can use the :before sudo selector to prepend a block to the body. Simply add this CSS and it will produce the same results:
body:before {
border: 5px solid blue;
box-shadow: 0 0 100px 100px #fff;
display: block;
content: '';
position: fixed;
pointer-events: none;
bottom: 10px;
left: 10px;
right: 10px;
top: 10px;
}
Example: http://codepen.io/anon/pen/BDhql
you have to set in your content id (#content)
border:4px solid blue;
min-width:700px; //change accordingly.
min-height:1600px //change accordingly
The above code will fix the problem of border as well as the height & width you want to set without having any content.
I've been trying to figure out how to get my links working in layered divs
I have a big div containing two other divs:
main div with content and
a navigation div for my menu
The problem is that the main div is overlapping the navigation div wherein i want my links to be (ribbons) so that it looks like they are being pulled out when hovered. But they arent active links at all? my css is as follow:
.navigate {
width: 1020px;
height: 300px;
position: absolute;
right: 0;
left: 0;
margin-left: auto;
margin-right: auto;
top: 190px;
z-index: -1;
border: 1px solid red;}
and
.main {
background: url("../images/papir.png") no-repeat center; /* papir.png bredde=1020px */
margin-left: auto;
margin-right: auto;
margin-top: 150px;
margin-bottom: 7em;
width: 1020px; /* 1020px */
height: 752px; /* 752px */
z-index: 0;
border: 1px solid green; }
it's like the navigation div is behind something :$
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
I've tried to fix it with
body {
position: relative;
z-index: 0; }
read somewhere that it should fix the problem - but not for me
Any ideas how to fix it?
Thanks in advance
Currently, you have the .navigate div z-index set to -1 so it is behind the .main div. Make it greater than the other divs so it's on top. E.g. z-index: 101;
Got it working!
Just added:
position: relative;
to the .main-div
When i change the z-index to 0 in the navigation div it works just fine except that the div is not behind the main div..
If I understand this correctly , there is no way to get a link to work if there is another div overlapping on top of the link , ex. If The nav div is under the main div the links on Nav div will not work
but..
if you want the div with the links on top - poistion them relative or absolute or fixed , and set the z-index to any number higher then the div you want behind
use negative margin for the div you want to over lay for example
.overlay-div{margin-top:-20px;}
I'm trying to make a part of my webpage that fit the width of the browser, for this I'm using width: 100%, the problem is that it shows scrollbars and I can't use overflow-x: hidden; because it will make some of the content hidden, so how I can fix this?
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px;
margin-left: 10px;
padding: 0;
-webkit-user-select: text;
}
Because you're using position: absolute, instead of using:
width: 100%; margin-right: 10px; margin-left: 10px
you should use:
left: 10px; right: 10px
That will make your element take the full width available, with 10px space on the left and right.
You have to remove the margins on the #news item
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin-right: 10px; /*REMOVE THIS*/
margin-left: 10px; /*REMOVE THIS*/
padding: 0;
-webkit-user-select: text;
}
If this doesn't work, you might have margin and padding set on the element itself. Your div - if that is what you are using - might have styles applied to it, either in your stylesheet or base browser styles. To remove those, set the margins specifically to 0 and add !important as well.
#news {
list-style-type: none;
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
margin: 0 !important;
padding: 0 !important;
-webkit-user-select: text;
}
It seems that you have set the width to 100%, but there are also margins that force the width to expand beyond that.
Try googling for "css flexible ( two/three-collumn) layouts".
Here's an example,
<div id="cont">
<div id="menu"></div>
<div id="main"></div>
<div class="clear"></div>
</div>
and the css
#menu{
float:left;
height:100%;
width:200px;
}
#main{
padding-left:200px;
}
.clear{clear:both;}
The #menu div, will be aligned to the left and have a static width of 200px.
The #main div, will "begin" below #main, but because of it's 200px padding (can also be margin) its content and child elements will start - where #menu ends.
We must not set #main to a percent width, (for example 100%) because the 200 pixels of left padding will be added to that, and break the layout by adding scrollbars to the X axis.
I had a similar issue with a absolute positioned element, and I wanted to use width 100%. This is the approach I used and it solved my problem:
box-sizing=border-box
Otherwise I always had a little content and padding pushing past the scroll bar.
The answer is that you have margins set that will make the div wider than the 100%; hence the scrollbars.
If you can rid yourself of margins do it! However, often you'll want the margins. In this case, wrap the whole thing in a container div and set margins to 0 with width at 100%.