I'm making a website for my world history class and I am attempting to make a heading for the website. Unfortunately, the heading overlaps the first paragraph. Is there any way I can fix this without changing the position? I need the position to be fixed. This is the html for the header:
<div id="menu">
About
Donatello
Michelangelo
Martin Luther
Henry VIII
Mary Wollstonecraft
Francis Bacon
Isaac Newton
Galileo Galilei
Marquis de Lafayette
</div>
This is the css:
#menu{
padding:30px;
background:#000;
border:5px solid #000000;
border-radius:0px;
position:fixed;
z-index:1;
right:0px;
left:0px;
top:0px;
text-align:center;
}
Thank you for the help.
If you have to keep the position fixed for some reason you can give the menu a fixed height and add that value as a top margin to the paragraph.
#menu{
...
max-height: 100px;
}
p{
margin-top: 100px;
}
If you don't need position: fixed (because technically you don't if you just want to keep your header up top) you can use position: sticky as s.kuznetsov mentioned in comments or you can just take out position, right, left, and top properties. The header will stay at the top and the paragraph will show.
#menu{
padding:30px;
background:#000;
border:5px solid #000000;
border-radius:0px;
z-index:1;
text-align:center;
}
Related
I have block with gradient from top(black) to bottom(blue) with 400px width and 100% height fixed at right side of the browser. There is a button as well with 50px width and 100px height at the left and vertically middle of this block. I want same block gradient merging this button as well so it will look attached with this block. Any solution using css or js? example given in screenshot.
thanks in advance
Use background-attachement:fixed and apply the same gradient to the button:
.box {
width:400px;
position:fixed;
top:0;
right:0;
bottom:0;
background:linear-gradient(to bottom,red, blue) fixed;
}
.button {
writing-mode:vertical-lr;
font-size:23px;
position:absolute;
top:30%;
left:-30px;
padding:5px;
color:#fff;
background:linear-gradient(to bottom,red, blue) fixed;
}
<div class="box">
<div class="button">a button</div>
</div>
could you please tell me how to make centre align divs vertically and horizontally ? I Have two divs I need to display on centre of page .Secondly there is some margin between the two divs how to remove that margin here is my code
<div style="height:100px;width:100px;border:1px solid red;"class="moreinfo">
</div>
<div style="height:100px;width:100px;border:1px solid red" class="moreinfo">
</div>
https://jsfiddle.net/tbnd90fd/
I do like that
https://jsfiddle.net/tbnd90fd/1/
best way?
.maindiv{
text-align: center;
position: absolute;
left: 45%;
top: 45%;
}
I give top and left ..is it the best way ? and how to remove margins?
From .maindiv remove text-align, set left and right to 50% and, finally, add one more line transform:translate(-50%, -50%);.
By this way, maindiv upper left corner will be placed in the center and transform will "pull" back up and left for half size of itself (and You don't need margin:auto anymore).
There is example :
.moreinfo {
display: inline-block;
margin:0px;
padding:0px;
}
.maindiv
{
position: absolute;
left: 50%;
top: 50%;
margin:0;padding:0;
transform:translate(-50%,-50%);
}
<div class="maindiv">
<div style="height:100px;width:100px;border:1px solid red;"class="moreinfo"></div><div style="height:100px;width:100px;border:1px solid red;" class="moreinfo"></div>
</div>
Update :
The divs are treated as inline-elements. Just as a space or line-break between two spans would create a gap, it does between inline-blocks. You could give them a negative margin... in this example, You could change, in moreinfo, margin:0px to margin:-2px;.
There is fiddle example
Try like this:
<div class="moreinfo">
</div><div class="moreinfo"></div> <!-- Remove the spaces -->
CSS:
.moreinfo {
display:inline-block;
vertical-align: top;
margin:0px;
padding:0px; height:100px;
width:100px;
border:1px solid red;
}
For Reference: Try this Link
I have Two Div, class name .div1 & .div2 with width:20%; each. Inside .div1 I have a another div name .bar
This .bar div is positioned left 100% absolute. I am trying to make the End point of .bar div and End point of .div2 should remain in same point in different screen like this Image below:
You can see that End point of Green Bar(.bar) and Gay Div(.div2) are in Line. But if I increase or decrease the size of the screen they don't remain in line. I have tied many ways but not worked. Is this possible with only CSS ? or Need any jQuery help ? If need any jQuery can anyone help me how to do that ? because I am not good with jQuery.
Here is the HTML:
<div class="div1">
<div class="bar"></div>
</div>
<div class="div2">
</div>
This is CSS that I have used:
.div1{
background:red;
}
.div2{
background:#ccc;
margin-top:25px !important;
}
.div1,.div2{
position:relative;
width:20%;
float:left;
margin:0px 10px;
height:180px;
}
.bar{
background:green;
position:absolute;
height:20px;
left:100%;
top:0px;
width:114%;
z-index:10;
}
Thanks in advance. FIDDLE
I have a simple jsfiddle example in here http://jsfiddle.net/RQ4F2/1/
The blu box-shadow is actually overflowing, covering a little part of the elements , is it possible to make it not ?
So that elements shows a full white background inside of themselfs?
Instead of setting box-shadow for the spans, you should set box-shadow for some pseudo-element of the span (such as the :before). That way you can put the box-shadow to the back by using z-index, the spans will be on top and cover the box-shadow:
span {
width:100px;
padding:20px;
float:left;
border-radius:100%;
height:100px;
background:white;
position:relative;
}
span:before {
content:'';
position:absolute;
width:100%;
height:100%;
border-radius:50%;
left:0; top:0;
background:white;
box-shadow:0px 0px 20px 4px blue;
z-index:-1;
}
Demo.
I'm guessing that adding a margin isn't what you're after and you'd like to have the circles touching but without the fade overlapping.
To do this you could have another inner span, positioned absolute with the box shadow overridden:
<span><span class="in"> </span></span>
span.in{
position:absolute;
box-shadow:inset 0px 0px 0px 0px;
/*compensate for outer span's padding*/
margin-left:-20px; margin-top:-20px;
}
I updated you CSS by adding margin: 10px to the span tag. To get more space between the elements, please raise the margin.
You may find the updated jsfiddle here
FIDDLE
I want to show a div which background is transparent, and the transparency is not affect on the top of the particular div. so i use the following html and css.
<div id="content">
<div id="transparncy"></div>
<div id="contentdata">
<div id="left">
<p></p>
</div>
<div id="right">
<p></p>
</div>
</div>
</div>
Css
#content {
width:100%;
position:relative;
color:#37475e;
}
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}
#contentdata {
position:relative;
width:100%;
}
#left {
width:50%;
float:left;
}
#right {
float:right;
width:35%;
}
My problem is that when i add more data in #contentdata , i can adjust the height of #transparncy proportional to that (cant increase the background transparent div). How can i solve this problem. Please help me
Instead of giving new blank div to transparency, add the same class name to id="contentdata" div and make background: rgba( 255, 0, 0, 0.4); this will not apply transparency to text but only for bg
HTML
<div id="contentdata" class="transparncy">...</div>
CSS
#contentdata .transparncy {
background: rgba( 255, 0, 0, 0.4);
width:100%;
min-height:250px;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
border-radius:5px;
}
DEMO
Correct answer updated Fiddle (http://jsfiddle.net/JyZ67/8/)
The main problem is you use the <div id="transparncy"></div> not properly
<div id="transparncy">
contentdatas....
</div>
This issue can be solved by adding bottom:0 to the #transparncy part of the CSS.
The problem is quite simple and relevant to ask
You have used min-height : 250px;
no matter what the height of inner/child conteht or div is parent div with min-height in your case #content #transparncy will take minimum height of 250px
just remove min-height and i will work as height auto :)
updated code :
#content #transparncy {
opacity:.4;
filter:alpha(opacity=40);
-moz-opacity:0.4;
background-color:Red;
width:100%;
height:auto;
overflow:auto;
position:absolute;
top:0px;
left:0px;
z-index:-1;
}