I am trying to duplicate this style of a sidebar menu with the background image, but when I use the same stylesheet code and image, it doesnt span the entire height of the sidebar.
The example: http://demo.ponjoh.com/Simpla-Admin/index.html
The css used (on example site and mine):
#sidebar {
background: url("../images/bg-sidebar.gif") no-repeat scroll left top transparent;
color: #888888;
font-size: 11px;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 230px;
}
On my site, the image only displays in its actual dimensions (230x197) and doesnt fill the sidebar. What am I missing?
The person who coded that CSS implemented the background image of the sidebar twice. Once in the body and once inside the sidebar.
body {
font-family: Arial, Helvetica, sans-serif;
color: #555;
background: #F0F0F0 url('../images/bg-body.gif') top left repeat-y;
/* sets bg image of sidebar, and #F0F0F0 for the rest */
font-size: 12px;
}
Here's what you're missing though:
background: url("../images/bg-sidebar.gif") repeat-y top left;
If the background image is a repeatable image... change no-repeat to repeat or vertically repeat-y
You would have to add a bottom: 0; as well as position: relative; to the #body-wrapper and activating the background-repeat. But be warned! This is a very dirty CSS coding method and will probably lead to misunderstandings and failures - still it works.
#body-wrapper {
/* Your code stuff ... */
position: relative; /* absolute positionings are 'relative' to their first 'position: relative;' parent */
}
#sidebar {
width: 230px;
position: absolute;
left: 0;
top: 0;
bottom: 0;
background: url("../images/bg-sidebar.gif") repeat-y scroll left top transparent;
color: #888888;
font-size: 11px;
}
Related
I am a novice as best please pardon me, but I'm learning.
I can illustrate what I need with an image.
Vertical Navigation 'White Curved Tab as Selector':
This is my CSS now, it's vertical and I can rotate the text, the way it should be, I'm not too concerned now about the visual appearance, I just need to have the functionality..
I would like the title of the pages in the navigation bar, to have an overlay icon, SVG or png, to hover over it when the mouse moves over and to continue following the mouse cursor within in the bounds of the nav bar, not like an ordinary overlay image, and if page is selected to leave that image or icon there as the highlight, so the final result will look something like the image above.
Here is my CSS thus far:
`.body{}
`.mobile-menu-nav.moved {
max-width: 75px;
width: 75px`
}
#head{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
#main-wrapper{
min-width: 100%;
padding:0px;
margin-left: -200px;
margin-right: -200px;
position:cover
}
.menu {
width: 60px;
height: 100%;
position: left;
border-radius: 15px;
border: 1px solid #00F;
}
.mobile-menu-nav li a {
font-family: Arial, sans-serif;
font-size: 12px;
color: #FFF;
background-color: transparent;
width: 100px;
height: 22%;
border: 1px solid transparent;
margin: auto;
margin-top: 50%;
margin-bottom: 50%;
margin-left: -15px;
position: center;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
}
-o-transform: rotate(-90deg);
`
https://sproutsa.co.za
Thanks much.
I think it would be the best to use ::after or ::before
.mobile-menu-nav li a:after {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background: transparent url('../images/your_image.svg') no-repeat;
background-size: contain;
background-position: center;
}
I have added background size and position, but ofcourse style it as you need it. Using this solution you can manipulate images using background properties.
Second similar solution is:
.mobile-menu-nav li a {
display: flex;
}
.mobile-menu-nav li a::after{
content: url('../images/your_image.svg');
width: 20px;
padding-left: 8px;
}
SVG should contain itself inside after element, like background-size: contain; so it works fine, but it won't work for images (.png, .jpg) and you can't change those. You can only prepare .png image to be final size.
Use ::after or ::before depending on position you want icons to be, right or left.
I have a background image for the first section of my site that I need to touch the nav bar. The arm is the background image. It needs to touch the nav bar for the design.
background image
The first section starts with a header (h3) which has padding-top on it:
h3 {
font-size: 1.5em;
margin-top: 3em;
margin-bottom: 0.7em;
text-transform: uppercase; }
I need the background to "ignore" the padding so theres no gap between it and the navbar.
the CSS for the background image
.start {
background-image: url(../images/goldenarmamend.png);
background-position: top right;
height: 100%;
width: 100%;
Hope this makes sense!
remove background position...
.start {
background-image: url(../images/goldenarmamend.png);
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 100%;
}
set right value as per your need in pixel or em.
I am working on this site - http://agencymaiclientpages.com/phononic/cms/
One of the requirements is that footer goes to the bottom of the page. I know there are height:100% values on body and html required, but whichever combination I tried (there are several element within content area) - it just doesn't work. I tried putting all the main content into 100%, nothing, tried several elements within stack, still nothing. What am I doing wrong? Or perhaps, what am I missing?
I even tried to remove some of the elements (#primary) so the stacking isn't so "high", but the footer either goes below the screen (so scrolling is required) or stays just below the main content area.
You need fixed positioning. This will ensure your footer is at the bottom of the page:
.site-footer {
position:fixed;
bottom:0;
width:100%;
max-width:100%;
}
But be careful, if the window height is 'small', it will cut of the main content. So depending on your main content, you could only apply the fixed positioning after a certain vertical height, for example something like this:
#media (min-height:600px) {
/*fixed positioning here*/
}
Something like:
.site-footer {
color: #ddd;
font-size: 14px;
font-size: 1.4rem;
text-align: center;
position: fixed;
bottom: 0px;
left: 50%;
margin-left: -120px;
}
?
Your question needs more info...
The footer comes to the bottom.
CSS :
.site-footer {
bottom: 0;
position: absolute;
width: 100%;
left: 0;
right: 0;
font-size: 1.4rem;
text-align: center;
color: #ddd;
}
Remove padding and margins from some places so that all the main contents come in one page . for example:
.site-footer {
padding: 1em 0;
}
.menu-main-container {
margin-top: 30px;
}
p {
margin-bottom: 1.5em;
}
Because your footer doesnot have any background color so when main content div is bigger the footer overlaps it and doesn't look good.
Try this code, it will help :
.my_footer {
position : absolute;
bottom : 0px;
color: #0f0;
padding : 0 auto;
font-size: 16px;
font-size: 1.0rem;
text-align: center;
left: 50%;
}
The position: absolute; and bottom : 0px; will make the footer to be placed at the foo of the page.
I have a few css sprites for a rating system: http://i.imgur.com/qeb2b.png
When loading the thumbs
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
}
The only way I can get the thumbs to show up is if I do this:
Was this review helpful? |
If I remove all the then the thumbs disappear. If I leave only one then it shows a partial view of the sprite.
How can I display the sprite without the need of ?
by using float:left:
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
width: 15px;
height: 16px;
float: left; /* OR float:right, depending on what you need */
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
width: 15px;
height: 16px;
float: left;
}
As the links are inline elements, you can't specify the width and height for them. They get their size only from their contents, that's why the spaces gives them size.
I think that the best option for your use is to make the links inline-block elements. That way they are block elements so that they can have a specific width and height, but they are still inline elements in the text flow so that you don't have to change your markup.
.thumb-down {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -13px;
display: inline-block;
width: 15px;
height: 16px;
}
.thumb-up {
background: url('http://i.imgur.com/qeb2b.png') no-repeat -126px -33px;
display: inline-block;
width: 15px;
height: 16px;
}
The image is a background. But for the background to be visible, the element must have some height and width. In your case an empty tag has no height and width. You should make it display:block
Just use display: inline-block; in both of your CSS classes.
I have used html and body attributes to have a gradient background and a flower background for my website.
I have also used a div to have the bottom right hand flower where it is. Works great, but not when scrolling. How do i get the bottom right hand corner image to stick to the bottom of the screen ?
You will want to set position: fixed; instead of position: absolute;.
Here's more info on the Position Property.
.bottomright {
position: fixed;
bottom: 0px;
right: 0px;
}
.demo {
background-color: HotPink;
padding: 20px;
margin: 5px;
}
Hello<br>
<div class="demo bottomright">
I'm a Div!
</div>
there
if you put the flower inside a div and position it absolute bottom and right this will stick it there.
For example, something like this will work
#mystylename{
position:absolute;
bottom:0;
right:0;
}
you may need to tweak it to get it sat where you want and also maybe add a z-index
If you require animation, set you div as absolute before the animation and then after the animation re set it to fixed as the below example.
$('.mydiv').animate({
opacity: 1,
right: "50px",
bottom: "50px",
height: "toggle"
}, 1000, function() {
// Animation complete.
}).css('position','fixed');
css for the above div is below as well.
.mydiv {
text-align: center;
background: #00DD88;
background: -moz-linear-gradient(center top , #00DD88 0%, #00CC00 100%) repeat scroll 0 0 transparent;
border-radius: 30px 30px 30px 30px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
margin: 5px 0 10px 15px;
position: absolute;
right: -980px;
width: 200px;
height: 50px;
display: none;
z-index: 100;
}
I know this is old but it will definitely help someone :)
A css-only trick for this old post is to put a after the div and position the top -1.2em so it overlaps the bottom of the element above it.
html:
<textarea class="no-whitespace-right">This is a test resize it.</textarea>
<span class="float-lower-left">length could go here</span>
css:
.no-whitespace-right {
/* any whitespace to the right and the overlap trick fails */
width: 100%;
}
.float-lower-left {
position: relative;
float: right;
right: 1em;
top: -1.2em;
/* push it up into the element before it. This is a trick for bottom-right */
right: 1em;
z-index: 200;
opacity: 0.5;
font-weight:bolder;
}
https://jsfiddle.net/qwm3pu8d/
You might need to use JavaScript to accomplish this task. Such techniques will accomplish the effect you desire, but they tend not be animate very smoothly. When scrolling, such a "stuck" object will tend to skip and stutter. I found an example here but have not tried it myself. I recommend searching for a few examples and trying out the one that looks cleanest and most modern.
You will want to set position: fixed; instead of position: absolute;