Ive tried doing this but its not working, What im trying to say is basically, I made a a box that you can scroll in, Kind of like the server bar from discord, It has a hr so i also added it but it follows but i want it to stay under the T logo the scrolling.
https://gyazo.com/91f62e8b813380d0f80a5e3713a371d3
div.sidescroll {
background-color: #202225;
height: 96%;
width: 4%;
position: absolute;
overflow-y: auto;
}
<hr width="50px" style="border-radius: 50px; height: 3px; left: 1.0%; top: 60px; position: fixed;">
You can achieve this by removing position: fixed;left: 1.0%;top: 60px; from <hr> style
But a easier option will be applying border-bottom to the element which is containing T logo and adding border-radius/padding according to need
The issue is that you applied a top and left property as well as the fixed position. Try to remove all positional properties and it should stay as intended.
Related
Platform: Wordpress (self-hosted)
Template: TwentyTen
I've been able to work out most things by Googling or tinkering around with familiar parts of the stylesheet, but I'm stuck now and am hoping someone can help me out. Basically, I’d like to create a header that is similar to this in design (http://albertaspeechie.blogspot.com) in that part of the header background will be transparent.
If I create an image with a transparent section, it shows as white because it's still within the header/wrapper with its white background.
I'm thinking that, possibly, setting the header background as transparent (though I can't figure out how to just make the header transparent, without affecting the rest of the wrapper) and boosting the padding above the wrapper. and increasing the height of the header. I used to know how to increase the height of the header, but I can't seem to find it anywhere anymore.
Any advice as to how I could do this? I'm only bumbling around with a test blog at the moment, so there's no published site to show. It's just a straight twentyten at the moment, without any adjustments until I can figure out how to do a partly transparent header.
Thanks in advance.
Edit: I'm not sure why people are downvoting this. I've followed the rules and instructions.
You can use positioning to move the image outside the header.
Add the image you want to use to inside your header. Make sure the image has a transparent background - use a png file for example.
Add position: relative to the header
Add position: absolute to the image, and then provide coordinates for the image.
To position it outside the header, provide a negative value for top. To center the image add 0 to left and right, and then use margin: auto.
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
body, html {
height: 100%;
padding: 0;
margin: 0;
background: lightblue;
}
.wrapper {
margin: 0 auto;
width: 50%;
height: 100%;
background-color: lightyellow;
margin-top: 150px;
}
.header {
background-color: white;
width: 100%;
height: 200px;
position: relative;
}
.header img {
position: absolute;
top: -100px;
left: 0;
right: 0;
margin: auto;
}
<div class="wrapper">
<div class="header">
<img src="http://placehold.it/250x250" alt="" />
</div>
</div>
Codepen Demo
Read more about positioning here.
I apologize if this has been answered time and time again. I remember searching thoroughly for an answer a couple years ago when I first wrote up my website script, but I couldn't ever find one. The same for now.
Recently I reworked my website's script so I can host it onto Weebly. Here is one of the four pages of my site that I need help with. As you can see, the images that pop up when the thumbnail is hovered over are absolutely positioned. For most computer resolutions and/or browsers, this will have the image appear out of the designated box.
How could I position them to the inner top left corner of the div? Or better yet, horizontally and vertically centered within it?
<section id="Sizes" style="float: left">
<a href="#Space">
<img class="Small" src="/files/theme/SampleD_Fun_Icon.png" width="150" height="150" alt="Sample 1: Day of Fun" />
<img class="Large" src="/files/theme/SampleD_Fun.png" width="150" height="150" alt="Sample 1: Day of Fun" />
</a>
...
</section>
<a id="Space"></a>
<span class="Popup">Hover over thumbnail to display sample artwork.</span>
<br style="clear: left" />
a:hover img.Small
{
border: 5px solid #21568b;
margin: 10px;
text-decoration: none;
}
section#Sizes a img.Large
{
border-width: 0;
height: 0;
left: 438px;
position: absolute;
top: 326px;
width: 0;
}
section#Sizes a:hover img.Large
{
height: 526px;
left: 438px;
position: absolute;
top: 326px;
width: 520px;
}
.Popup
{
border: 3px solid;
float: left;
height: 272px;
margin: 8px 20px 0px 0px;
padding-top: 254px;
text-align: center;
width: 520px;
}
Thank you for your time. :)
Your whole design is a bit fragile, and I wouldn't recommend building this this way in the first place, but you're looking for practical answers, so here's the smallest change I can think of that fixes your problem:
1) Add this to your style sheet:
body { position: relative; }
2) On line 40 from your main_style.css, change top: 326px to top: 316px and left: 438px to left: 428px, so that it becomes like this:
section#Sizes a:hover img.Large {position: absolute; top: 316px; left: 428px; width: 520px; height: 526px;}
How does that work?
Your images are place using absolute positioning. By default, that works relative to the viewport (the window). But by turning the body into position relative, it becomes a containing block, and position absolute is relative to the nearest containing block ancestor.
So now, your images are fixed within the body element, instead of being fixed relative to the window. Since the margins of the body element is what's changing size when you resize the window, that makes the various pieces of your content fixed relative to each other. You then just need to remove 10px from the top and left side, since that's the size of the border of your body element, and we're now measuring from inside the border.
TLDR: You can't do this in pure CSS.
You can easily position the image inside the container div if you place the image element inside the div element, and then use absolute positioning like top: 0; left: 0; (or with a number of other methods). But then you'd need JavaScript to correlate the hovered thumbnail with the popup full-size image.
Alternatively, you can have the full-size image be nested in the thumbnail element (like you currently have), but then you'd need JavaScript to position the full-size popup image inside the container div.
Of the two alternatives, I recommend the first: put all the popup images inside the target container, and use JavaScript to show or hide them when a thumbnail is hovered. Correlating the thumbnail and the full size image via JavaScript is going to be easier then writing positioning code.
I see you're using jQuery already so why not do something like this?
$('.Small').on('mouseover', function(){
$('.Popup').empty().html($(yourtarget).attr('img' , 'src'));
});
$('.Small').on('mouseout', function(){
$('.Popup').empty().html('Hover over thumbnail to display sample artwork.');
});
Just because everyone was saying it can't be done with pure css, I wanted to demonstrate that it can, and it is even quite easy. Have a look at the folowing example:
http://jsfiddle.net/aafa2zp5/
<div id='images-wrapper'>
<ul>
<li>
<img class='small' src='http://placehold.it/50/ff0000'/>
<img class='big' src='http://placehold.it/300/ff0000'/>
</li>
<!-- and some more similar thumb / image groups -->
</ul>
<div class='preview-area'></div>
</div>
CSS (or the relevant part at least)
#images-wrapper {
position: relative;
}
.big {
display: block;
position: absolute;
top: 54px;
right: 54px;
opacity: 0;
transition: opacity .5s;
}
.preview-area {
width: 350px;
height: 350px;
border: 4px solid blue;
position: absolute;
top: 21px;
right: 21px;
}
li:hover .big {
opacity: 1;
}
The key is to set a position relative to the wrapper (and keep all of the descendants as their default static). Then you can use this to position the preview area and the big images against by setting them to postion absolute and carefully calculating the correct postion. I even added a cross fade, just because it is so easy, but you could just as well work with display block / none if you prefer.
For smaller screens you may want to alter the dimensions and positioning inside a media query, but it still should be doable (though depending on the hover state is perhaps not the best idea on a touch device)
I hope you get the idea and you can figure out how to apply this technique to your own site. Feel free to ask if you want me to explain further or when you get stuck.
I have the following code:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: 100%; width: 100%; background-color: #FF0000;"></div>
</div>
Screenshot:
Why does the div gets pushed outside of the viewing area and hence showing the scrollbars. If you check toward the top right corner, the black area is the extension when the red div moved.
How can I edit it so the red div has the top and the left position but doesn't extend beyond the page width and height?
To actually answer the "why" of the question:
The reason you're getting scroll bars is that the relative positioned div inside of the absolute is set to 100% width and height, but ALSO is displaced (in this case, by top and left)
It is therefor assuming 100% width/height of the parent container AND displacing it, causing it to be too large.
By adding overflow:hidden, you seemingly solve this issue, but any content past that will be clipped, not actually fitting inside the dimensions you have set.
Another way to do this would be something like...
top: 10%;
left: 10%;
width:90%;
height:90%;
You could just as easily substitute top and left for padding/margin of that direction.
You can use CSS3's calc() function to set the second div's height and width to be the same as the first one's, minus the left and top offsets. This will also allow you to use position: absolute in your text, aligning it to the right:
<div style="position: absolute; width: 100%; height: 100%; background-color: #00FF00">
<div style="position: relative; left: 300px; top: 45px; height: calc(100% - 45px); width: calc(100% - 300px); background-color: #FF0000;">
<span style="position: absolute; right: 0; top: 50%;">TESTING THIS OUT</span>
</div>
</div>
Check the working JSFiddle. I also added a CSS reset to get rid of the body margins that the browser might add. If you want to use this reset in your HTML file, create a <style> tag inside your <head> tag, with the code that is showing in the CSS section in the JSFiddle. If you don't want to use the entire reset, the only actually relevant part is body { margin: 0px; }, so you can also add style="margin: 0px;" to your body tag.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I'm trying to put a lot of content in "Thickbox" (Javascript popup window) and it works almost fine but I can't make max-height: 100%; (relative to parent) and overflow-y: scroll; work.
There are two outcomes:
It is as long as it should be, without vertical scroll and it goes outside the box (far too much).
It is as long as it should be, with vertical scroll and it goes outside the box (a little bit).
I just want to have it inside the box, with vertical scroll and I don't want it to go outside the box. Once you'll take a look at JSFiddle you'll know what I mean: http://jsfiddle.net/m4aKk/ (best viewed on large screen - 1600px+). Any advices would be great!
Why height: 100%; or max-height: 100%; aren't relative to its parent?
A solution is to make the inner box position absolute. Something like this:
#TB_ajaxContent {
width: 440px;
overflow-x: hidden;
position: absolute;
top: 30px;
bottom: 10px;
}
This should make the inner div position the way you like it. Here's the updated fiddle - note I've removed height:auto; height:100% from the inlined style.
This is quite a common trick to get the inner div to 'be as tall as the parent'.
replace this line in your code:
<div id="TB_window" style="width: 470px; height: 100%; margin-left: -335px; top: 48px; margin-top: 0px; visibility: visible;">
just change height: 314px; to height: 100%; !!!