I have my width for the status bar set to 100% in CSS, but yet it is still a little bit more. The rest of my page all cuts off at the right spot but you can scroll right and see my status bar sticking off. Please help! All help is appreciated!
Link to my site
CSS Code:
body{
margin: 0px;
background-color: lightgrey;
}
div.navigation{
width: 99%;
padding: 10px;
height: 25px;
background-color: black;
}
a.navigation{
color: #f5f5f5;
text-decoration: none;
font-size: 20px;
font-family: Century Gothic, sans-serif;
display: inline-block;
vertical-align: middle;
}
a.navigation:hover{
color: grey;
}
a.navigation:active{
color: darkred;
}
a.navigation:visited{
color: #f5f5f5;
}
In your CSS, you have some styles set on the navigation which are adding padding. Change the code starting at line 37 to:
div.navigation {
width:100%;
padding: 10px 0; /* Keeps the padding to the top and bottom only */
height:25px;
background-color: black;
}
Your padding is causing the browser to interpret the width of the bar as 100% of it's container width plus 20px of padding (10px left and 10px right).
You can use the CSS box-sizing: border-box; property to force the browser to render the box with the specified width and height, and place the border and padding inside the box.
div.navigation{
width: 100%;
padding: 10px;
height: 45px;
background-color: black;
box-sizing: border-box;
}
Note you will need to increase the height to 45px because the browser will not extend the height of the box for the top and bottom padding.
JS Fiddle fullscreen; code.
Related
I currently have a text-align: center; h1 element. It also has a background-color: #000506;. The current issue is that this background color fills the whole line as shown here:
What I want it to do is to only fill the area where the text is. The only way I've been able to do this is making the left and right margins really large, and even then it's not perfect.
margin-left: 600px;
margin-right: 600px;
you can reset display to use the table-layout model so it will shrink to fit content.
example
h1 {
display: table;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
theoraticly and very soon, display won't be needed, width and margin:auto will do fine when max-content will be widely implemented.
h1 {
width:max-content;
margin: auto;
/* extra style */
border-radius: 1em;
background: #333;
color: #eee;
padding: 0 0.5em;
line-height:1em;
}
<h1>Sheet List</h1>
https://developer.mozilla.org/en-US/docs/Web/CSS/width#fill
max-content
The intrinsic preferred width.
I'm trying to make a horizontal scroll gallery for a portfolio of photography on my website, but I want the images to be responsive to height (to fit varying screen sizes). To try and do this I have used the unit: vh and this is causing me problems.I have a position:fixed header and footer so they always stay on the screen while you scroll through the gallery. With the CCS I have used this means as the screen gets smaller, the images go underneath the header & footer rather than constantly staying inbetween them.
I have seen a website with an ideal horizontal gallery very similar to what I am trying to achieve. You can check out the website here. On the linked website the images always seem to stay equidistant from the header and footer.When inspecting the element it looks like they're using tables, which I understood to be a big no, no. Is this how they are achieving this effect on the gallery?
I've linked a JS Fiddle to a very basic version of my design so you can see what I've done so far.
JS Fiddle: https://jsfiddle.net/pmh9zvta/1/
Basically, in a sentence I'm asking how I can achieve the same effect as the example website in the link.
Robin,
Hmm...so vh can actually achieve a pretty similar effect. Your example images are rather extreme, though (1500x100).
Check out this fiddle I made (using your code as a base):
https://jsfiddle.net/Benihana77/5xw21tvc/
*,
*:before,
*:after {
box-sizing: inherit;
}
html {
height: 100%;
box-sizing: border-box;
position: relative;
}
body {
position: relative;
margin: 0;
padding-bottom: 100px;
min-height: 100%;
}
#header {
width: 100%;
padding: 10px;
margin-right: auto;
margin-left: auto;
position: fixed;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.92);
text-align: center;
z-index: 1;
}
#gallery-wrapper {
position: relative;
padding-top: 60px;
overflow-x: scroll;
}
#gallery-wrapper img {
height: 70vh;
width: auto;
}
#footer {
font-family: Corda-Light;
font-size: 14px;
color: #333;
width: 100%;
padding: 5px;
padding-top: 13px;
padding-bottom: 8px;
padding-left: auto;
padding-right: auto;
position: absolute;
bottom: 0;
background-color: #efefef;
text-align: center;
background-color: #fff;
background: rgb(255, 255, 255);
/* Fall-back for browsers that don't support rgba */
background: rgba(255, 255, 255, 0.9);
z-index: 1;
}
/* Navigation Bar Styling */
.nav {
border-bottom: 1px solid #ccc;
border-width: 1px 0;
list-style: none;
margin: 0;
padding: 0;
padding-top: 5px;
padding-bottom: 5px;
text-align: center;
}
.nav li {
display: inline;
}
.nav a {
display: inline-block;
padding: 10px;
}
/* Horizontal Gallery Styling */
ul.gallery-row {
white-space: nowrap;
}
ul.gallery-row li {
list-style: none;
display: inline;
}
/* Footer Styling */
.footer {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
.footer img:hover {
opacity: 0.6;
filter: alpha(opacity=60);
}
Main changes
Added a wrapper around your content for better management (within JSFiddle and out).
Changed your footer to be positioned absolutely, along with a host of other changes that allow it to stick to the bottom until your Viewport is too short. Then it gets pushed down like a normal footer. This keeps your content from going behind the footer.
Made the "gallery-wrapper" with "overflow-x:scroll". I'm personally not a fan of side-scrolling galleries, but if your heart is set on it, this will keep the side-scrolling contained to this block, and no your entire website (in turn obviating the need for a "fixed" footer).
Chose some more realistic image dimensions to work with, and a shorter vh (70).
Regarding your example, as best as I can tell, they're using Javascript to rewrite the height of the "scrollHolder" container DIV. So their solution is not CSS-only, instead using JS to read the height of the browser and adjust the height accordingly.
I'd also say their approach is flawed, as it doesn't scale properly to browser width. On a thinner screen, you can only see zoomed-in pieces of each image.
So, in addition to the above changes, I'd recommend:
Setting media-queries at an appropriate browser width (say 760) so that your images become scaled by browser width, not height (so vw, not vh).
This might require some special "min-height" settings in order to keep your tall images from becoming toooo tall, and short images from becoming little munchkins.
My goal is to have a box around .toggles ("HTML, CSS, JS, Result"), and according to my instructor, we were supposed to set a border-right that would extend up and meet with the surrounding 1px black border. What is causing the space that's appearing above and below each vertical line?
JSBIN: http://jsbin.com/qipuzubure/1/
(In creating this jsbin a new problem has emerged: why is the inner div collapsing on top of itself when the window is shrunk?)
body {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
}
#menuBar {
width: 100%;
height: 2.5em;
display: table;
background-color: gray;
}
#logo,
#buttonDiv,
.toggles {
display: table-cell;
vertical-align: middle;
width: 33%;
}
.toggles {
width: 20% ;
}
#logo {
font-weight: bold;
font-size: 1em;
font-family: helvetica;
vertical-align: middle;
padding-left: 10px;
}
.toggles {
text-align: center;
border: 1px solid black;
padding-bottom: 1px;
}
.toggles ul {
padding: 0;
}
.toggles li {
list-style: none;
display: inline;
padding: 0 5px;
border-right: 1px solid black;
}
#buttonDiv {
text-align: right;
padding-right: 10px;
}
</style>
<div id="wrapper">
<div id="menuBar">
<div id="logo">CodePlayer</div>
<ul class="toggles">
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>Result</li>
</ul>
<div id="buttonDiv">
<button id="runButton">Run</button>
</div>
</div>
</div>
1) The top and bottom borders are visible because you are displaying the menu using display: table.
display: table and display: table-cell are only necessary when creating tables or in exceptional circumstances.
Since you are creating a menu bar, you can use display: inline-block for some of the inner elements. This will help you correctly style your page.
2) The other issue regarding the widths is not really an error, the page is doing exactly what you're telling it to do. The middle section is keeping a width of 33%, the only way for the current content to fit within this area is to drop down.
Saying this, you can write rules to control what happens to the content in this scenario.
One thing to keep in mind when applying widths to elements is that if you then apply a left or right margin (or padding), it can throw off the width calculation and you may get a different width to what you were expecting.
The most stable way to do this is to wrap the elements in a container and set the width on that container.
Without knowing more about your example I can't give a definitive solution but one way would be to set a min-width: on the #menuBar div.
I've included a JSFiddle to demonstrate.
Your elements are only occupying that space. The 'body' has 8px margin all around so if you remove that your bar will ocupy 100% of the page.
If you want your classe toggles to occupy more than this you need to set a height value to it.
I think this is what you want:
WORKING: DEMO
Just alter the folloewing CSS:
CSS
.toggles li {
margin:0%;
list-style: none;
display: table-cell; /* Or use display:inline-block; but it will destroy vertical alignment of text*/
vertical-align: middle;
height:35px; /*ADDED : You didn't specified the height*/
padding: 0 5px;
border-right: 1px solid black;
}
I've seen this posted everywhere, with no real help, or it being closed for no reason other then moderators feeling it would be 'unhelpful' in the future even though google whips up a nice result summing some 55,000+ relevant results.
So, why won't padding-right work with a parent, and text-align right child?
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
}
The HTML
<div id="rightc">
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
<div class="rightcbar">
<div class="rightctext">Test</div>
</div>
</div>
Smeegs helped explain exactly why things were not working as I was intending below; if you are interested. Here is the revised, and working code.
.rightcbar {
display: block;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 20px #dbd69d;
padding-right: 50px;
height: 152px;
width: 592px;
line-height: 152px;
background: url(rightcbar.png) no-repeat;
background-position: center right;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box;
}
.rightcbar .rightctext {
display: inline-block;
width: 100%;
text-align: right;
font-size: 25px;
color: #f3f1de;
font-size: 25px;
font-family: 'Roboto', sans-serif;
text-shadow: 0px 0px 10px #aaa;
-webkit-font-smoothing: subpixel-antialiased;
cursor: pointer;
}
Live example
I think I understand your confusion.
What (I think) you're asking is why when you add padding to the left, it moves the content, but not when you add it to the right.
The answer is that padding makes the width of the div grow. So when everything is to the left (padding and text-align), the div gets wider and and the content is moved.
But when everything is to the right (padding and text-align) nothing moves...right? Wrong.
The div grows to the right the correct number of pixels adding the padding. And the content stays where it is because the offset is happening AFTER the content, not before like when you left align. It's easy to visualize with a border added.
Here is the code with no padding
http://jsfiddle.net/z5PJx/1/
You can see that the text is right up on the edge.
Here is the same code with padding-right: 50px;
http://jsfiddle.net/z5PJx/2/
Two things happened.
The div grew by 50px;
The content was moved left by 50px;
Those changes offset, and the content doesn't move.
In both situation the div's width grows to the right. But the direction of the padding changes.
Try this, on the container holding your text
.rightctext{ box-sizing: border-box; padding-right:10px;}
The box-sizing property will force the container object to take the padding on the right into account.
Hopefully that's what you're looking to achieve. *Note, adjust the px accordingly.
My own page doesn't have a scroll bar, no matter what I do, minimize or zoom in/out. It just doesn't appear, I've tried FF, Chrome and IE: all no. Other internet pages are fine. Here is the body element and css:
<body>
<div class="container" id="page">
The CSS is like:
html, body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
}
#page
{
margin-top: 5px;
margin-bottom: 5px;
background: white;
border: 1px solid #C9E0ED;
}
PS: I'm using YII framework.
UPDATE:
IT seems YII has some default css settings, in screen.css the div container is mentioned three times as follows:
.container {width:1250px;margin:0 auto;}
.container:after
{content:"\0020";display:block;height:0;clear:both;visibility:hidden;overflow:hidden;}
.container {display:block;}
I changed overflow:hidden to overflow:scrollbut still didn't work.
In order to see a scroll you'll have to define a height and or width in which creates a scroll. Not being able to see if you have content or what your mark-up is like -- declaring at the HTML or body tag will do the trick.
html, body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height: 1000px; // toggle
width: 100% // toggle
}
#Evelyn1986
Force some width and it'll come up.
Try width:805px;
overflow:auto;
Then just have some content, that's 'big'
please add height on body tag..and add content more than what value you are give on height property....
body
{
margin: 0;
padding: 0;
color: #555;
font: normal 10pt Arial,Helvetica,sans-serif;
background: #EFEFEF;
overflow: scroll;
height:100px;
}
Fiddle : http://jsfiddle.net/nikhilvkd/rVd4M/