I have a dropdown that will show some content.
<ul class="menus" style="">
<li>hey</li>
</ul>
And this is the css:
.menus {
width: 607px;
background-color: white;
border-bottom: solid 1px #9f9f9f;
border-left: solid 1px #9f9f9f;
border-right: solid 1px #9f9f9f;
bottom: 20px;
margin: 0;
position:relative;
}
.menus li {
list-style: none;
display: block;
padding: 15px;
border-bottom: solid 1px #d6d6d6;
}
.menus li:hover {
background-color: #71bfdb;
color: white;
border-bottom: solid 1px #3fb7d3;
border-top: solid 1px #3fb7d3;
text-decoration: none;
}
.menus li a:hover {
text-decoration: none;
}
Whenever the dropdown opens, All of the content moving to the bottom, depending on how long the list is.
Question
How can I prevent this?
If I put position absolute, the whole dropdown will go crazy, like move positions, not like I wanted.
Use position: absolute to remove it from the flow of the page (relative means it is still in the page flow, which is what causes it to push content after it down).
You can change where an absolutely positioned element shows up by using the top, bottom, left and right css properties (i.e. top: 0px; left: 10px;). These pixel values are relative to the first parent element with position: relative, so if you relatively position the parent element it should be simple to get it displayed in the appropriate place on the page.
That should address your concern of absolute positioning causing it to 'go crazy' as you put it!
Related
Morning,
I have the following code that works in all browsers other than IE. I want a blue border to appear when clicking on input boxes, however did not want to see the elements resizing and positioning. I fixed this by putting a border colour to match the background colour, thus removing the resizing effect. However, on IE, you get ghost borders which seem to be a combination of both the border radius and border colour (background colour). Any ideas of how to fix this without using box shadow?
Screen Shot showing ghost borders:
input,
textarea,
select {
position: relative;
display: block;
border: 3px solid #4f4f4f;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
&:focus {
outline: none;
border: 3px solid #4cc7fa;
}
}
Many thanks!
You can do like this to overcome the ghost/resize/re-positioning effect, where you change border-width on focus and compensate its re-positioning with a negative top
body {
background: gray;
}
input,
textarea,
select {
position: relative;
display: block;
border: 0px solid gray;
border-radius: 10px;
margin: 6px auto 22px auto;
width: 260px;
font-size: 13px;
text-align: center;
}
input:focus {
top: -3px;
outline: none;
border: 3px solid #4cc7fa;
}
<input type="text">
I would use the following javascript:
Your-function() {
document.getElementsByTagName('input','textarea','select').classlist.toggle('show')
}
add display:none to input:focus
add the following css
.show
{
display:block;
}
Note: Add onclick="Yourfunction()" to your markup to load the js.
I need to create this kind of divider (the vertical line before browse and avatar). I don't want to use images, so is there a way to make in css?
I have tried:
.hr_v {
width: 1px;
height: 80px;
border: 0;
border-left: 1px solid;
color: gray;
background-color: gray;
}
The css shall be applied on the floated div, not a hr tag.
hr cannot be applied vertically Is there a vr (vertical rule) in html?.
You need to only set the border-left and add the border color since it was missing in your code, you can also add a left padding for better view :
#floatingAvatarDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
or create a class since you need it for both divs :
.leftBorderDiv
{
border-left: 1px solid gray;
padding-left: 2px;
}
and add it to your menu container and the avatar container divisions
You could use :before
.avatar {
position: relative;
height: 80px;
border-left: 1px solid gray;
}
.avatar:before {
position: absolute;
top: 0;
bottom: 0;
left: 1px;
content: '';
width: 1px;
background-color: #333; /* different gray */
}
In case your "Browse" button's container is bigger, you may get longer borders. In such case, you may simply try a "|" (a pipe) in a span before the "Browse" button and style to however you want. In this case, you wont have to use a lot of css styling.
Here is the jsfiddle for reference: http://jsfiddle.net/4devvjyv/1/
I'm trying to get the "Section" box to go above the gray line so that it looks like the "Section" box is centered around the line. But negative margins are not pushing the box above the line.
.divider {
margin-top: 6px;
border-top: 2px solid gray;
font-size: 10px;
position: relative;
}
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin-top: -200px;
}
The divider is the line, and the divider-text is the "Section" box. I put a margin-top of 6px for the divider just so I wouldn't mess up the spacing between the two content because I would like the "Section" box to be 6px above the line and 8px below the line.
Does anyone know why it's not working? I tried playing around with a negative left margin and the "Section" box behaved as it should.
Updated your jsfiddle
Use top: -20px instead of margin-top:-200px. I've use -20px because -200px will float way high and cannot be seen.
.divider-text {
position: relative;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
top: -20px;
}
another solution would be
.divider-text {
position: absolute;
border: 1px solid black;
background-color: white;
display: inline-block;
padding: 0px 5px;
margin: -20px; // making it center.
}
releasing the element from it's parent element (position: absolute) will make the element float, does following the negative margin.
The element is still under its parent element so any floating styles will not go beyond its parent element unless you free it by, float, position:absolute, or display:block. But display block does not actually release the element from its parent but moves it to the next. -- need anyone's input on this though.
I have this site here http://jamessuske.com/freelance/paoladi/ and I applied a border-top and bottom to my nav so I have two borders inbetween. But for some reason the two borders are at the top... What am I doing wrong?
.navigation{
border-top:1px solid #000;
border-bottom:1px solid #000;
text-transform:uppercase;
}
above this class is a header class and inside the header class is a logo class and socialMedia class, one floats left and the floats right. the header class does not have a float assigned.
Add float: left to the .navigation class
All your li elements are floated left. You need to clear after the list.
Try adding
<div class="clearboth"></div>
after the ul
There are a few ways of doing this.
Option 1.
Try applying display:inline-block and width:100%;
For Instance:
.navigation {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
display: inline-block;
text-transform: uppercase;
width: 100%;
}
WORKING SOLUTION
Option 2.
Using a fixed height in pixels.
For Instance:
.navigation {
border-bottom: 1px solid #000000;
border-top: 1px solid #000000;
height: 65px;
text-transform: uppercase;
}
WORKING SOLUTION
Hope this helps.
I have a rectangular div, like the one above. I want to remove the bottom border (from C to D) in my div. How can I do this?.
Edit: Here is my CSS:
#index-03 {
position: absolute;
border: .1px solid #900;
border-width: .1px;
border-style: solid;
border-color: #900;
left: 0px;
top: 102px;
width: 900px;
height: 27px;
}
<div id="index-03"
style="background-color:limegreen; width:300px; height:75px;">
</div>
Just add in: border-bottom: none;
#index-03 {
position:absolute;
border: .1px solid #900;
border-bottom: none;
left:0px;
top:102px;
width:900px;
height:27px;
}
You can either set
border-bottom: none;
or
border-bottom: 0;
One sets the border-style to none.
One sets the border-width to 0px.
div {
border: 3px solid #900;
background-color: limegreen;
width: 28vw;
height: 10vw;
margin: 1vw;
text-align: center;
float: left;
}
.stylenone {
border-bottom: none;
}
.widthzero {
border-bottom: 0;
}
<div>
(full border)
</div>
<div class="stylenone">
(style)<br><br>
border-bottom: none;
</div>
<div class="widthzero">
(width)<br><br>
border-bottom: 0;
</div>
Side Note:
If you ever have to track down why a border is not showing when you expect it to,
It is also good to know that either of these could be the culprit.
Also verify the border-color is not the same as the background-color.
You seem to misunderstand the box model - in CSS you provide points for the top and left and then width and height - these are all that are needed for a box to be placed with exact measurements.
The width property is what your C-D is, but it is also what A-B is. If you omit it, the div will not have a defined width and the width will be defined by its contents.
Update (following the comments on the question:
Add a border-bottom-style: none; to your CSS to remove this style from the bottom only.
You could just set the width to auto. Then the width of the div will equal 0 if it has no content.
width:auto;