There is a navigation-bar with that css-definitions:
.nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="nav">...</div>
That means that this navigation is always on to of the page. But now I have to insert a second bar at the top of that naviation-bar.
.top-nav {
position: absolute;
top: 0;
height: 40px;
...
}
<div class="top-nav">...</div>
<div class="nav">...</div>
That "top-nav" will be displayed at several pages (i didn't know now). So I am not able to change the css definitions or the html of the class "nav".
I am looking only for a (css) possibility to move any html-tag with the css-attribut "top: 0" down for a fixed value.
JavaScript is not a solution: There several pages i will include that "top-nav".
Edit:
overlapping:
not overlapping:
I am looking for that not overlapping solution.
Looking to your html if you want that a div reference to his container you have to put it inside the container. try this:
<div class="nav">
<div class="top-nav">...</div>
</div>
So the top-nav refers to the nav container.
EDIT 1:
No chance if you can't change the html. The thing you can do is add a javascript which add text inside top-nav. In this way you can generate code to put another div inside it.
for reference look at jquery text
You could try with:
position: static;
or without position definition (static is the defaul). In static position each box appear in the order they are in the html.
Related
I have a site that I want to add a top bar into, like in the following example: http://demo.codesupply.co/ however I don't want to use an iframe and I cannot amend the current css of the site. I need to be able to create a new div with its own classes that sticks to the top of the site, however my site has got a position:fixed; top:0; navigation bar which is placed on top of the site as well, then they overlap.
How can I place my new top-bar on top of the entire site, without any other element covering up?
*I still cannot see the reason for the downvote, it is a totally legitimate question.
If you don't have access to the CSS then you can use inline CSS and use a 'PUSH' method that does what it means, it pushes the content down the page, so its not overlapping. JsFiddle here: https://jsfiddle.net/SimonHayter/090ar1u0/
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;>
Hello, I am Menu, nice to meet you.
</div>
<div style="height:40px;width:100%;">
Let's push the page down 40px, you can't see me!
</div>
<div>
Existing Content
</div>
Or you could just edit the existing HTML to add margin-top, i.e:
<div style="position: fixed; top: 0; left: 0; width: 100%; height: 40px;>
Hello, I am Menu, nice to meet you.
</div>
<div class="container" style="margin-top: 40px;">
This is where your existing content lives.
</div>
If you dislike inline CSS then you can simply add a <style> after the body in HTML5, like so:
<body>
<style>
.menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 40px;
}
.container {
margin-top: 40px;
}
</style>
<div class="menu">
Hello, I am Menu, nice to meet you.
</div>
<div class="container">
Existing Content
</div>
</body>
If you don't have access to the HTML either then you can use Apache to Modifying static content using a CGI script.
I want to set the <div id="bar">...</div> into the background.
First, here is my page: tekkkz.com
<div id="bar">
<span id="views">50</span>
<a class="icon-small" id="like"></a>
<a class="icon-small" id="dislike"></a>
</div>
This block (on the top right with the like/dislike buttons) should be in the background, so that it wont take any width of my content box.
How to do this?
For better understanding: what i want to reach is similar to set a image anchor to page in libreoffice.
You should use position: absolute on your <div id="bar"> and position: relative on it's parent. Then use right: 0 if you want your element to be at the right corner of the content block.
#bar {
position: absolute;
right: 0;
}
.content {
position: relative;
}
Since already in your stylesheet style.css
#bar{float:right;}
So you could just add in your pre block
<pre style="clear:both">
I tried it. It worked like charm.
Hope it help
Sorry about the specific question - I'm writing up this page for my portfolio http://ashereinhorn.com/portfolio/2014/hex-tile-world-script-page-unfinished/
however the column is so narrow that it results in some undesirable formatting for the dark, code segments.
How can I make these section expand further to the right (and left?) so that there is less line wrapping.
I'm writing it all in HTML so a solution with just that would be perfect. I'm not against solutions where you have to expand them or they open a floating element that displays the content either.
Thank you in advance.
Do you mean like this?
pre {
background-color: #272a2c;
color: #8f969c;
padding: 30px 15px; // reduces the padding for right and left
display: block;
left: 0;
position: absolute;
width: 1200px;
}
.single-project .entry-content {
position: relative;
}
You cannot break out of your website container unless you actually close it. This is a hack to make it work, but it's not ideal for a multitude of reasons. Using absolute positioning is usually not recommended.
In your case, you would have to close the "wrapper modular clearfix" div, and start another div that has a larger width.
<div class="wrapper modular clearfix">
//Article text
</div>
<div class="wrapper code-example">
//Code insert
</div>
This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):
Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!
The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.
You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>
<div id="popupLeft">
<h1 class="popupTittel">Title goes here</h1>
</div>
I want this text go outside the div popupLeft, but only for xx pixles. Is that possible?
Perhaps I did not explain well enough.
There are two "modes" on my website. If the content is supposed to draw a gallery I have the title, intro-text and content-text in a div called 'popupLeft' and a gallery in the 'popupRight'.
But if there is no gallery, is is supposed to be text in both the divs, and I want the title to stretch all the way from the left-div and the right-div. The right and left-div are positioned side by side.
add it position:relative
ie. to get it 10 px above, do this:
.popupTittel {
position: relative;
bottom: 10px;
}
if you want to move it right outside the div, add position:absolute like this
#popupLeft {
position: relative;
}
.popupTittel {
position: absolute;
bottom: 100%;
left: 0;
}
Like in margin-top: -10px; or similar? You should consider reading a CSS guide, since this is very elemental stuff.
Id actually use position:relative; top:-10; as that will keep all elements below that objects margins correct...
Example here :)
http://jsfiddle.net/r2bp9/