I have a .top div with variable height, and i want to position .nav bellow the .top div so i wanna something like .nav-top = .top-height.
How to do that, can be in jQuery?
.nav {
display:none;
width:100%;
height:100%;
right:0;
top:80px;
position:absolute;
background: #1581C4;
padding-top:10px;
padding-bottom:10px;
z-index:6;
}
.top {
content:url(../images/top480.jpg);
z-index:0;
border-bottom:1px solid #000000;
width:100%;
}
I think javascript is worth a try:
<script type="text/javascript">
window.onload=function{
document.getElementById([yournavdivid]).style.top = document.getElementById([yourtopivid]);
}
</script>
Related
I am trying to put a title in a div toolbar next to some pictures. The problem is that my text is not well placed, it should be at least on top of the toolbar but instead it is at bottom and doesn't move.
I would like it to be in the vertical middle at left near the pictures.
Here is a codepen : http://codepen.io/anon/pen/fDojK
And a picture :
Here is the html part of the title bar:
<div id="bar" >
<div id="picturesmenu">
<img src='images/back.jpg' alt='back' />
<img src='images/home.jpg' alt='home' />
<img src='images/reload.jpg' alt='reload' />
</div>
<div id="titlemenu">Main</div>
</div>
<div id="body">
...
And style :
#bar
{
width:100%;
height:50px;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
vertical-align:top;
}
#picturesmenu
{
margin:0;
padding:0;
display:inline;
}
#bar img
{
border:3px solid white;
width:40px;
margin:2px;
}
#titlemenu
{
margin:0;
padding-left:20px;
height:100%;
display:inline;
font-size:20pt;
font-weight:bold;
color:white;
}
#bar span
{
margin-left:20px;
margin-top:200px;
font-size:20pt;
font-weight:bold;
color:white;
}
I tried vertical align and margin but the "Main" text doesn't move...
Thanks in advance before I change anything into tables ;)
[EDIT]
Thank you all for your answers ! I didn't thought about handling the alignment of the content (#titlemenu) instead of the container (#bar), it's not very logical...
You need to work the vertical align for both #picturesmenu and #titlemenu and remove the padding left for that title if you want it to the left. Then work with inline-block elements. Like this:
EDITED WITH CROSS-BROWSER CODE
html, body {
height:100%;
width:auto;
padding:0;
margin:0;
background-color:black;
}
#bar {
width:100%;
height:auto;
padding-top:3px;
padding-left:10px;
border-bottom:2px solid white;
display:block;
}
#picturesmenu {
margin:0;
padding:0;
}
#bar img {
border:3px solid white;
width:40px;
margin:2px;
display:inline-block;
vertical-align:middle;
width:40px;
height:50px;
}
#titlemenu {
margin:0;
padding-left:0px;
display:inline-block;
vertical-align:middle;
font-size:20pt;
font-weight:bold;
color:white;
}
.item {
float:left;
width:120px;
height:120px;
border:2px solid white;
text-align:center;
margin:20px;
padding:20px;
}
.picitem {
height:70%;
margin-bottom:25px;
border:2px solid white;
}
.textitem {
underline:none;
color:black;
font-size:16pt;
color:white;
}
I have forked your CodePen
However, a way better approach would be to give #bar a display:block property and then add inline-block to everything inside, but if you want it to work as in your description, there you go
Add these lines to the #titlemenu in CSS
padding:10px;
display:inline-block;
vertical-align:top;
By vertical-align:top, the block gets aligned to the top of the parentdiv and you set padding to fit the height of the block to the height of the parent div
Demo
I want the whole div clickable, but it will not show. I want it to change when hovered as well. I believe I have used this same coding before and it has worked, not sure why I am having issues.
<div class="clickable_one">
</div>
div.clickable_one {
float:right;
}
div.clickable_one a {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover {
position:absolute;
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link_2 copy.png");
}
The problem is you are using float:right on your div and position:absolute on your <a> which forced everything to move on right corner of screen. If you use InspectElement you will have clear view. I placed a border around your div as example to check location of div
I'v updated your CSS a bit and content is showing.
div.clickable_one
{
border: 2px solid blue;
}
div.clickable_one a {
width:120px;
height:30px;
text-decoration:none;
background-image:url("images/forums_link copy.png");
}
div.clickable_one a:hover
{
width:120px;
height:30px;
text-decoration:underline;
background-image:url("images/forums_link copy.png");
}
DEMO
So I made a ribbon effect on my navigation no problem, but when I tried to do the same thing with the footer, I ran into issues with the right fold not appearing. This is the css I wrote for the footer ribbon.
.ribbon {
background:#8346ab;
padding:1em;
margin-left:-40px;
padding-left:40px;
padding-right:40px;
position:relative;
width:100%;
}
.ribbon:after, .ribbon:before{
content:"";
display:block;
position:absolute;
top:-10px;
border:10px solid #1f364c;
border-top-width:0;
}
.ribbon:after{
right:0;
border-right-color:transparent;
border-top-width:0;
border-left-width:0;
border-right-width:40px;
}
.ribbon:before {
left:0;
border-left-color:transparent;
border-top-width:0;
border-right-width:0;
border-left-width:40px;
}
This should have worked but not sure why the right fold isn't showing up. Any suggestions?
I learn and use css and css3 around 2 years but i dont know 1 thing and i cant find a really good answer or fix for this.
So here is an example :
I created a div and inside this div we have a link (its a button).
When i hover my mouse on the div this div will change the bg-color but the link not because im above the div... So when im above the div this div and the link too will change the color or background this is what i need... But how to do it ? I never used this but now i think i'll need this for my next work :))
Thank you very much!
It's very easy to achieve using css: (working jsFiddle)
HTML:
<div class="container">
<a class="button">some text</a>
</div>
CSS:
.container:hover{
background-color:red;
}
.container:hover .button{ // selector for .button which is in a hovered .container
background-color:blue;
}
Try this:
<div id="test">
A link
</div>
CSS :
div#test:hover {
background-color: red;
}
div#test:hover a {
background-color: red;
}
What you're asking is the following CSS selector:
div:hover a{
/* your styles here */
}
Demo here
Hope this demo link will work for you.
*{
padding:0;
margin:0;
}
body {
font:normal 12px/18px Arial, Helvetica, sans-serif;
color:#000;
padding:20px;
background-color:#F2F2F2;
}
ul, li, ol {
list-style-type:none;
}
.wrapper {
width:95%;
padding:10px;
overflow:hidden;
height:100%;
margin:0 auto;
border:1px solid green;
}
.spacer {
clear:both;
font-size:0;
line-height:0;
height:0;
}
.wrapper:hover {
background-color:#999999;
cursor:pointer;
}
.btmoOne {
width:170px;
margin:0 auto;
height:20px;
background-color:#FF0000;
padding:10px;
}
.wrapper:hover .btmoOne {
background-color:#006600;
}
CSS stylesheet
div.Header
{
background-color:#999999;
text-transform:capitalize;
text-align:center;
}
div.leftdiv
{
float:left;
height:200px;
width:15%;
position:fixed;
background-color:#FFFF66;
text-transform:uppercase;
text-align:justify;
}
div.rightdiv
{ margin-left:15px;
margin-top:25px;
float:left;
position:fixed;
background-color:#FFFF99;
width:50%
height:200px;
left: 438px;
top: 39px;
}
div.footer
{
clear:both;
margin-left:20px;
margin-top:20px;
margin-right:20px;
margin-right:20px;
padding-bottom:10px;
padding-left:10px;
padding-right:10px;
padding-right:10px;
border-color:#000066
border:thick;
text-align:center;
background-color:#FFCCFF;
}
Upon further review, it looks like you have some fixed position attributes that are tripping you up. If you remove them, everything displays fine:
http://jsbin.com/emona3/3/edit
put float:left for footer its essential to move footer after all other div .