In its current form, the CSS below doesn't allow my page to scroll. However, if I disable the CSS code below, the page allows for scrolling. I have tried setting the overflow attribute over and over, and using height: 130% allows me to see a scroll bar, but the page still doesn't actually scroll.
Here is a JSFiddle showing my problem.
h1{
color: #FFF;
}
h3{
font-size: 25px;
color: #990000;
text-decoration: none;
font-family: 'Chivo';
}
h5 {
color: #bb0000;
text-decoration: none;
font-family: 'Chivo';
font-size: 40px;
line-height: 1em;
font-weight: bold;
}
h5:focus {
outline: thin dotted rgb(51, 51, 51);
outline-width: thin;
outline-style: dotted;
outline-color: rgb(51, 51, 51);
outline-offset: -2px;
}
h5:hover, a:active {
text-decoration: underline;
color: #990000;
outline: 0;
outline-color: initial;
outline-style: initial;
outline-width: 0px;
}
/*box!*/
#boxdrop{
box-shadow: 0px 0px 10px grey;
position:fixed;
background-attachment:scroll;
left:10px;
}
#boxdrop2{box-shadow: 0px 0px 10px grey;}
.boxbg { background-color:#ccc;background-attachment:scroll; }
.boxbg2 { background-color:#ddd; background-attachment:scroll;}
.boxbg3 { background-color:#eee;background-attachment:scroll;}
.all-round {
border-radius:1em;
-moz-border-radius:1em;
-webkit-border-radius:1em;
}
If you're looking to get the scroll back, remove the position:fixed from your boxdrop div.
#boxdrop{
box-shadow: 0px 0px 10px grey;
background-attachment:scroll;
left:10px;
}
jsFiddle example
I think the issue is your HTML. You have two divs with the id boxdrop2. Also, your div with id boxdrop has a position:fixed attribute, so the div is not able to scroll in any way. Whenever you use fixed, you eliminate any chance of scrolling as the fixed elements leave the flow of elements in the page.
Related
I think this is a css question.
I have a fixed bar on the top of the page and I want to put there, aligned to the right, a p:commandButton. But the p:commandButton is rendered outside the div, to the left.
I've checked that it's probably a matter of attribute display, because the h:form (which must encapsulates the p:commandButton) has it defined as display:block. If I put the button outside the form, it's rendered like a charm where I want - but, of course, it doesn't work.. When i use the h:form, the button position is changed.
The css i'm using:
/*** Navigation bar ***/
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 55px;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.9);
color: rgba(1, 1, 1, 0.9);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation img {
padding-left: 250px;
}
I'm not a web developer by any stretch of the imagination, I get things to the way I want them basically thru trial and lots of error. I can't seem to figure this one out.
I want to change the style of my dropdown selector from using the default OS styling to a suitable style I found but I can't figure out what goes where.
Here is my existing dropdown selector css:
/* select
==========================================================*/
.selector, .selector * {
/* margin: 0;
padding: 0; */
}
.selector select:focus { outline: 0; }
div.selector {
/* background-position: -490px -24px;
display: inline-block;
overflow: hidden;
padding-left: 2px;
position: relative;
vertical-align: middle;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2);
box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.2); */
}
div.selector span {
/* background-position: 100% 0;
color: #fff;
font-size: 11px;
font-weight: bold;
overflow: hidden;
padding: 0px 27px 0px 7px;
text-overflow: ellipsis;
text-shadow: 1px 1px 0 #000;
white-space: nowrap; */
}
div.selector select {
/*background: #fff;
color: #000;
border: none;
left: 0;
opacity: 0;
position: absolute;
top: 0;
width: 100%;
text-transform:none;*/
font-size:12px;
opacity: 1 !important;
}
div.selector, div.selector span {
/*background-repeat: no-repeat;
line-height: 24px;
text-transform: uppercase;
background-image: url("sprite.png");
background-repeat: no-repeat;
line-height: 24px;*/
}
div.selector, div.selector span, div.selector select { /*height: 24px;*/ }
/* #sort {
margin: 10px 0;
float:right;
width:257px;
}
#sort span {display:none;}
#sort SELECT {
background: none repeat scroll 0 0 #fff;
color: #000;
vertical-align: bottom;
opacity:1 !important;
float:left;
} */
button, textarea, input[type=text], input[type=password] {
border: 0;
margin: 0;
padding: 0;
}
textarea, input[type=text], input[type=password], select, .selector span {
color: #888;
font: 12px 'Helvetica Neue', Arial, sans-serif;
}
input[type=submit] { font: 12px 'Helvetica Neue', Arial, sans-serif; }
textarea, input[type=text], input[type=password] {
border: 1px solid #a9a9a9;
padding: 4px 8px;
}
button {
background: transparent;
color: #1b1e00;
font-size: 28px;
text-transform: lowercase;
}
button, label, input[type=submit] { cursor: pointer; }
.selector span { display: block; }
.selector, .selector span, .selector select { cursor: pointer; }
And here is the css for what I would like it to look like:
/* all form DIVs have position property set to relative so we can easily position newly created SPAN */
form div{position:relative;}
/* setting the width and height of the SELECT element to match the replacing graphics */
select.select{
position:relative;
z-index:10;
width:166px !important;
height:26px !important;
line-height:26px;
}
/* dynamically created SPAN, placed below the SELECT */
span.select{
position:absolute;
bottom:0;
float:left;
left:0;
width:166px;
height:26px;
line-height:26px;
text-indent:10px;
background:url(images/bg_select.gif) no-repeat 0 0;
cursor:default;
z-index:1;
}
Basically I don't know where anything goes. Any help would be very much appreciated.
Thank you!
Right now the only browsers to fully support styling of dropdown menus is chrome. See this post:
How to style a <select> dropdown with CSS only without JavaScript?
If you need your drop downs to match cross browsers there are a couple options.
1) http://harvesthq.github.com/chosen/ or others like it (my usual pick),
2) Compeletly redesign a drop down from scratch. This is not recommended as is is very complicated and easy to create errors. see http://www.jankoatwarpspeed.com/post/2009/07/28/reinventing-drop-down-with-css-jquery.aspx or http://css-tricks.com/dropdown-default-styling/
Hope this helps!
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.
I want to underline my navigation menu but the problem is that I need it to be thicker so I am using bottom border instead so that I can set the width to 6px.
I can seem to figure out how to get the border to appear closer to the text. There seems to about a 10px gap between the text and the bottom-border at the moment and I don't want to have any.
I have tried to position another div and position it relative to each {li} with {bottom: 10px} but I can't seem to get it to work.
Here's what I have so
CODE
<div id="menu">
<ul>
<li>home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
position: fixed;
left: 25%;
clear: both;
float: left;
font-size: 80px;
z-index: 500;
filter: alpha(opacity=75);
opacity: .75;
}
#menu ul{
text-decoration: none;
list-style-type: none;
margin: 0;
padding: 0;
line-height: 90px;
}
#menu ul li{
text-decoration: none;
list-style-type: none;
margin: 0;
}
#menu ul li a{
border-bottom: 6px solid #000;
text-decoration: none;
list-style-type: none;
color: #000;
}
#menu ul li a:hover{
}
You can use a mixture of line-height and margin to garner such an effect, like so:
#menu ul li a {
border-bottom: 6px solid #000000;
color: #000000;
display: block;
line-height: 50px;
list-style-type: none;
margin: 20px 0;
text-decoration: none;
}
Using display: inline-block; in combination with border-bottom could cause some weird behavior line breaks if longer links contain a line-break, see http://jsfiddle.net/PQZ9H/. Alternatively, you could use a combination of background-image and background-position which has the advantage of not touching the display value.
a {
text-decoration: none;
position: relative;
background-repeat: repeat-x;
background-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==);
background-position: left 15px;
}
a:hover { background: none; }
A disadvantage is that you might have to define a background-position for every font-size you use.
Using this technique you could also remove the border from descenders like g or y adding
a span.descender { text-shadow: -1px 0px 0px white, 1px 0px 0px white, -2px 0px 0px white, 2px 0px 0px white, -3px 0px 0px white, 3px 0px 0px white; }
and
<span class="descender">A link with descenders like g or y</span>
See http://jsfiddle.net/25XNY/1
Try to this (origin russian http://artgorbunov.ru/bb/soviet/20120510/) article methods (background gradient and http://jsfiddle.net/d3WG6/)
<p>Зигварт считал <a><span>критерием истинности необходимость и общезначимость, для которых нет никакой опоры</span></a> в объективном мире.</p>
a { font-size: 50%; border-bottom: 1px dashed red; }
a > span { font-size: 200%; line-height: normal; }
Margin property can't change the border-bottom position, so
The height of the <a> element will define the position of the your border-bottom.
#menu > ul > li > a {
height: ;
}
This css is causing the text to shift upwards in Firefox when rolled over but not in other browsers
#element{
height:40px;
}
#element a,img{
vertical-align:middle;
}
#element a{
font-size:16px;
color:#d1d1d1;
text-decoration:none;
}
#element:hover a{
border-bottom: #fff 1px dotted;
}
Makes sense to me. You are adding a border of 1px width. This will change the dimensions of the element. A simple solution is to have a permanent border and just change its color:
#element a {
font-size: 16px;
color: #d1d1d1;
text-decoration: none;
border-bottom-style: dotted;
border-bottom-width: 1px;
border-bottom-color: transparent;
}
#element:hover a {
border-bottom-color: #fff;
}
Add display: inline-block; and margin-bottom: -1px; to compensate for the extra pixel on the bottom on hover.
#element:hover a{
border-bottom: #fff 1px dotted;
margin-bottom: -1px;
display: inline-block;
}