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.
Related
I'm using Vue.js & vuetify to make a SPA.
I have a component that has a background image onto which I'm overlaying a grid. The image adjusts its aspect ratio when I change the width of the page. I want the same behavior on the grid.
I generated the grid using divtable.com/generate. It just gave me a 12x12 table of divs and some css selectors for them. I wanted to have precise control of how I overlay the forms on top of this so decided to go this route.
I'm having trouble adjusting height of the div table cells. The width adjusts just fine and stays aligned, but the height of the cells is constant no matter what. I'm also bit of a css noob. I don't know if vuetify or vue is doing some overriding of the css in the background.
I tried a lot of things. Just setting the height property doesn't work for some reason. I tried to use "scoped" on the style in case something is being overridden. For some reason the height of the cell won't change no matter what. Any help is appreciated. j
A verbatim example of the code can be found here: http://divtable.com/generator/
The only difference is I have the following selectors before the table of divs:
img {
width: 100%;
}
.image-container {
position: relative;
width: 100%;
height: 100%;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Thank you. Wouldn't ask if I wasn't in a bit of a rush to figure this out by tomorrow. Any help is appreciated.
Note: I tried setting a min height. Making it scoped and all sorts of other stuff I found.
I decided for the sake of time just to not use an grid overlay at all and just adjust the components over the image using relative positions. There was no real advantage to using a grid overlay in this case.
From a technical standpoint, I wasn't able to find the exact problem, but it likely wasn't any framework magic, just lack of time in finding the correct CSS selector to adjust.
Thanks for any help. Much appreciated.
img {
width: 100%;
}
.image-container {
position: relative;
width: 95%;
height: 100%;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
margin-left: 10px;
}
.image-container .after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 100px;
}
#loadControlDevices {
position: relative;
margin-top: 10.5%;
margin-left: 1.15%;
}
<div class="image-container" >
<div style="height: 100%;">
<img src="scope.ami.png" />
</div>
<div class="after">
<div id="loadControlDevices">
<v-checkbox id="loadControlCB" name="loadControlCB" label="" filled></v-checkbox>
</div>
... other divs following this ...
</div>
</div>
I'm working on this page and trying to get the slideshow to display correctly at tablet and mobile widths with media queries. However, all of the slider container elements are setting their height to 590px and this is creating a large gap beneath the slider and its content. I don't belive any of the elements have a fixed height set, but I have used some max-height:590px here and there. Any thoughts on how to get rid of that gap and force the containers to resize correctly?
Slider uses Cycle2.
Some HTML code
<div id="slider" class="cycle-slideshow" data-cycle-pager="#adv-custom-pager" data-cycle-slides="> div" data-cycle-timeout="7000">
<div class="singleSlide">
<!-- content goes in here -->
</div>
And some CSS that I think is important:
#homeslider {
height: auto;
}
#homeslider, #slider img {
width: 100%;
height: auto;
}
#homeslider {
width: 1090px;
margin: 0px auto;
max-height: 590px;
}
For reference, this slideshow is the expected behavior.
ETA: Added some of the code that I think is important?
In your .slidercaption you have a top:-200px which is causing the issue. Unlike margin, elements with position:relative won't physically move when you set a top or left style. That means the occupied space for that element will still remain on that position.
So to fix that, remove top: -200px and replace with margin-top: -200px instead.
From this:
.slidercaption {
position: relative;
top: -200px;
}
To this:
.slidercaption {
margin-top: -200px
}
Take note, in your css there's a margin:0 set in that element. Make sure your update will override that existing style.
Update:
A far better solution is to use position:absolute instead, since having a negative margin or position is more likely to get an issue with that huge value.
So...
From:
.slidercaption {
position: relative;
top: -200px;
}
To:
.slidercaption {
position: absolute;
bottom:0;
}
Then what was causing the below elements to go up is because of this:
#sliderNav {
margin-top: -190px;
}
Change that to:
#sliderNav {
position: absolute;
bottom: 168px;
z-index: 99;
width: 100%;
margin: 0;
}
When you came to a point where you are using large negative values, you can use position:absolute instead which is very helpful and less likely to have some issues if used properly.
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 two DIVs and the one that comes last in the source code appears on top on the webpage. I want them to display in their natural order. First DIV on top, second DIV below.
HTML
<div id="intro">
<h2>Gteaay Presents</h2>
<h1 id="header-bigger">Producer World</h1>
<p class="header-smaller">For Producers by producers. A guide for choosing the right music composing software for you!</p>
</div>
<div id="nav">
<ul>
<li>New Products</li>
<li>Inspiration</li>
<li>Coupons</li>
</ul>
</div>
CSS
#intro {
text-align: center;
margin: 2em 0em 1em;
background-image: url('images/gloomy-stripes-blue-lively.jpg');
padding: 0;
border-top: medium #0B9696 solid;
border-bottom: medium #0B9696 solid;
position: fixed;
width: 100%;
}
#nav {
background-color: black;
height: 3em;
position: fixed;
width: 100%;
}
PS This happened AFTER I made them position: fixed; Before that they were fine.
EDIT Actually DIV #2 appears on top of DIV #1 now.
When you use position: absolute or position: fixed, you are removing an element from the document flow. So in this case, the #intro is removed from the flow and the #nav moves into its place (try removing position: fixed from #nav only and see the difference).
Now #nav gets its own position: fixed, which removes that from the flow too, locking it in position. Only thing is, that location is the new, top-aligned one brought on by #intro having been taken out of the flow.
To solve the problem, you should have a single container holding both #intro and #nav, and apply the position: fixed to the container only.
Side-note: You're using <h*> tags wrong. "Gteaay Presents" should, at best, be in a <div> with bigger font-size.
Your DIV #2 now appears on top of DIV #1 because DIV #2 is the last one declared in your HTML. to solve this problem, just add in your CSS (DIV #2): z-index:-1; or to DIV #1: z-index:1;
Hope it helps.
This is a direct solution to solving the problem and it takes the essential part of Niet's answer and incorporates it into my solution here.
The reason this was "not working" was because when you use position: absolute or position: fixed, you are removing an element from the document flow. So in this case, the #intro is removed from the flow and the #nav moves into its place.
Also when you use a position: fixed we can also add a specificposition using attributes like top, leftetc.
So the solution is to give them a specific fixed position according to they're new position in the document flow.
e.g. for #intro top: 10% or top: 10em; or top: 10px; and then of course give #nav another position that doesn't overlap. e.g. top: 20% or top: 20em or top: 20px
PS I don't know if those values actually look right or work but I'm just demostrating the solution.
I was fiddling around with a web site I am developing, attempting to fix some odd IE7 bugs, since this is an internal project and IE7 is the standard browser. I ended up adding "position: relative" to correct a couple IE-specific layout problems, but I seem to have made things worse in FF/Chrome (I consider myself more of a systems programmer, but my current responsibilities involve more of a web focus unfortunately).
The specific problem is that the "position: relative" elements ended up making some of my links, which were floated to the right, unclickable. I've created a simple test page that I hope will explain this better than I can with words: http://jsfiddle.net/gBchZ/.
I will sort through this mess eventually, but I was hoping that someone could explain the reason behind my links getting hidden behind the position: relative elements.
Without having the link of the site is difficult to tell exactly what is wrong. But in any case, a solution could be to use z-index for the parent of a. For example z-index:100. Keep in mind that z-index works only with positioned elements, so you can use position:relative.
Demo based on your example: http://jsfiddle.net/gBchZ/3/
This is because the .content divs are covering the right-box (in your demo). If you add a margin-right to those divs the a becomes 'reachable:'
.content
{
position: relative;
margin-right: 20%;
}
JS Fiddle demo
You could also use position: absolute; to make the a element appear 'higher' in the z-index, though this becomes rather complex:
#rightBox
{
background-color: green;
width: 25px;
height: 25px;
position: absolute;
right: 0;
top: 50%;
margin: -20px .5em .5em .5em;
padding: .5em;
}
JS Fiddle demo
#David’s correct in that the position: relative on the .content items is giving them a z-index, meaning they’re “on top” of the link you’ve floated to the right.
I think a better solution though is to add position: relative; to the link you’ve floated right as well, and give it a z-index higher than .content:
#rightBox
{
...
position: relative;
z-index: 2;
}
.content
{
position: relative;
z-index: 1;
}
See http://jsfiddle.net/gBchZ/6/