As you can see, when the div expands I have no option to scroll down and I'm wondering how I would go about fixing this. Here is my css
<style>
#cust_info {
width: 300px;
min-height:350px;
margin: 0 auto;
padding: 1em;
background-color: #fff;
border-radius: 25px;
border: 2px solid #66CCFF;
padding: 20px;
position: fixed;
top: 100px;
left: 40px;
font-family: arial;
}
.more {
display: none;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff; }
a.showLink, a.hideLink {
text-decoration: none;
color: #36f;
padding-left: 8px;
background: transparent url(down.gif) no-repeat left; }
a.hideLink {
background: transparent url(up.gif) no-repeat left; }
a.showLink:hover, a.hideLink:hover {
border-bottom: 1px dotted #36f; }
</style>
I gave the div a min height so it would expand without text leaving the area, but when the div expands past the screen I lose most of the div.
Please remove position:fixed from #cust_info id.
Removing that will automatically give a scroll in your page.
For keeping it left align, just give float:left to #cust_info.
Related
As the title says, I'd like the "background" element to fit the side of the screen (you can see it doesn't go all the way to the right), as well as to go all the way to the bottom of the screen. Can anyone help?
The code can be seen here: codepen
(specifically these elements)
```
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border: 3px solid black;
margin: 0 auto;
}
.text {
margin: 0 30px 0 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
height: auto;
}
.text p {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
```
Setting margin: -20px; on the <header> pulls it out of the page, and with that creating the horizontal scroll bar, by removing the margin: -20px; the header will be placed fully in the document and the scrollbar will disappear.
codepen
Setting margin and padding to 0, then setting background width to 100% seemed to do the trick. Is this the desired result?
* {
margin: 0px;
padding: 0px;
}
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border: 3px solid black;
margin: 0 auto;
width: 100%;
}
.text {
margin: 0 30px 0 30px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
height: auto;
}
.text p {
margin: 5%;
font-weight: bold;
color: #000000;
opacity: 1;
}
It's happening because you gave border: 3px solid black; in your background class that's why it is not showing correctly.
If you want to use border at top and bottom then you can do like this
.background {
background: url("https://static.kent.ac.uk/nexus/ems/50.jpg");
border-top: 3px solid black;
border-bottom: 3px solid black;
margin: 0 auto;
width: 100%;
}
So the conclusion is you have to remove the border from left and right after then you can get the result you want.
Here you can see difference Codepan
Hope this will helps you
I want to make a menu to the left and to the right of a list. The menu's have to be fixed, and I want them to always be 10 px of the list, even when I am resizing.
I made the list 'position: relative' and I would like the menu's to be placed relative to the list.
As you can see, I would like it so the orange buttons are the same distance from the list as the blue buttons, even when I resize it.
I tried to use margins, left, right, padding... but nothing seems to work.
Here is some css I used:
With this css, it looks like this:
.navblue {
float: left;
position: fixed;
}
.navorange {
float: right;
position: fixed;
}
.navblue ul {
list-style: none;
padding-left: 0;
}
.navorange ul {
list-style: none;
padding-left: 0;
}
#biglist {
background-color: #e3e3e3;
width: 80%;
padding: 20px;
border-radius: 5px;
color: #000;
border-color: transparent;
margin-left: auto;
margin-right: auto;
}
Thank you very much if you can help.
Maybe this is what you're looking for?
http://jsfiddle.net/myjruLvr/9/
I added an extra parent <div> outside the icons and the main content, and then gave it padding equal to the width of the icons + 10px margin. And instead of position: fixed;, I've used position: absolute;.
Alternatively, you can also use the float property for the icons.
http://jsfiddle.net/myjruLvr/11/
That's a rough example. The icons are floated on their respective sides and the centered <div> will have margins on either sides equal to the width of the icons + 10px.
EDIT:
It seems you're asking for something like a sticky menu, but made purely out of CSS. Sadly position:fixed positions an element relative to the browser viewport, regardless of how it's parent is positioned, and I guess that's pretty much the reason why we have several jquery alternatives for this.
You have to add the fixed position units. Update your CSS like below.
.navblue {
position: fixed;
left:0;
top:0;
}
.navorange {
position: fixed;
top:0;
right:0;
}
EDIT
Based on your comments below, Here is updated CSS.
#container {
width: 100%;
padding-left:70px;
padding-right:70px;
box-sizing:border-box;
}
.navblue {
position: fixed;
left:0px;
top:0;
}
.navorange {
position: fixed;
top:0;
right:0px;
}
.navblue ul {
list-style: none;
padding-left: 0;
}
.navblue a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background:#017da1;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius: 50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #017da1;
-webkit-transition: all ease-in-out .3s;
-webkit-background-clip: padding-box;
}
.navorange a {
display: block;
font-family: Pictoss;
font-size: 20px;
padding: 2px 20px 38px 20px;
background: #e9500c;
width: 20px;
text-decoration: none;
overflow: hidden;
text-shadow: 0 -1px 1px black;
border-radius:50px;
color: white;
height: 20px;
margin-bottom: 10px;
border: 5px solid #e9500c;
}
.navorange ul {
list-style: none;
padding-left: 0;
}
#biglist {
height: 500px;
background-color: #e3e3e3;
width:100%;
border-radius: 5px;
color: #000;
border-color: transparent;
box-sizing:border-box;
}
DEMO
LIVE DEMO
Consider the following menu example: (note the red border)
<div class="menu-wrapper">
<div class="menu-item">Hello</div>
<div class="menu-item">Stack</div>
<div class="menu-item">Overflow</div>
</div>
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
border-left: 5px solid #bbb;
height: 300px;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
margin-left: -5px;
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
Now, imagine that the height of menu-wrapper is small, and we want the vertical scroll bar to appear. For example, we could replace:
height: 300px;
with:
height: 100px;
overflow-y: auto;
But, the red border disappears then:
Why is that? How would you fix that?
PLAYGROUND HERE
Since overflow hides what overflows, you may instead draw the border on the background or with an inset shadow , so it is drawn on the whole height of cntainer : DEMO
.menu-wrapper {
display: flex;
flex-direction: column;
width: 200px;
background-color: #ccc;
box-shadow: inset 5px 0 #bbb;/* here draws an inside left border via shadow */
height: 300px;
height: 100px;
overflow:auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
}
.menu-item:hover {
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
I think this works:
The problem is that the red border of menu-item is hiding behind the grey border of the menu-wrapper. So, I removed the border from the wrapper and put it in the item, like this:
.menu-wrapper {
...
/* border-left: 5px solid #bbb; No longer needed */
height: 100px;
overflow-y: auto;
}
.menu-item {
padding: 20px;
cursor: pointer;
border-left: 5px solid #bbb; /* Add border to menu-item rather than the wrapper */
}
.menu-item:hover {
/* margin-left: -5px; No longer needed*/
background-color: #444;
color: #fff;
border-left: 5px solid red;
}
Note: The grey border of the menu-wrapper doesn't take the full height anymore. You could use box-shadow on the wrapper (as answered by GCyrillus) to fix this.
You could integrate both the solutions, so the design won't look too bad in older browsers where box-shadow isn't supported.
.menu-wrapper {
...
box-shadow: inset 5px 0 #bbb;
}
I want div 2 to stay fixed to the top of the screen when the browser scroll reaches the navigation bar. How would i do this ?
My current styles probably suck as im still learning from google but here they are:
/*main wrapper*/
#main {
width: 90%;
height: auto;
margin-left:auto;
margin-right:auto;
}
/*logo start*/
#logo {
background-color: #e6e6e6;
position: relative;
padding: 2px;
margin: 0px;
border: 3px solid #000000;
border-radius: 25px 25px 0px 0px;
height: 174px;
width: 100%;
}
/*navigation bar start*/
#nav-outer {
position: relative;
width: 100%;
margin-bottom: 40px;
}
#nav-box {
width: auto;
display: inline-block;
position: absolute;
top: -3px;
padding-left: 15px;
background-color: #e6e6e6;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
border-radius: 0px 0px 15px 15px;
text-align: left;
}
For an easy solution, there is this jQuery plugin:
http://stickyjs.com
And a tutorial for it:
http://www.websitecodetutorials.com/code/jquery-plugins/sticky-js-position-fixed-at-certain-point-in-page.php
Because this is such a common issue, there is also a new CSS position value called sticky which will do exactly what you want. If you're interested in that then there's a great article about it here:
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
Ok, set the position then to:
#nav-box {
position: fixed;
..
..
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}