Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I am trying to have my image appear on top of a 300px border, as if the border is a background color for the image. This is my code:
.containerpagecontent { border-left: 300px solid #fff; } img { float:left; }
But it is still not working. What am I doing wrong?
NOTE: I cannot simply use background-color for the image, because the end of the image has to extend off the color.
There is no such thing as:
margin-left: 300px solid #fff;
you probably meant:
border-left: 300px solid #fff;
Also, see if something like this might work for you: http://jsfiddle.net/Lb6Rz/. It's using the padding and background properties on a single element to create a border.
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed last year.
Improve this question
I am wondering how to do this in css :
enter image description here
Basically, I can do everything out of it. But I dont manage to recreate the halo surroundering the borders. Could you please advise ? :)
EDIT :
I am quite stuck at making the border with the fading
This effect can be achieved with box-shadows like so:
.box {
margin: 20px;
padding: 20px;
background: lightgreen;
width: 200px;
}
.halo {
-webkit-box-shadow: 0px 0px 7px 11px rgba(255,165,28,0.59);
box-shadow: 0px 0px 7px 11px rgba(255,165,28,0.59);
}
<div class="box halo">Hello There, I am a box, play with my colours to get different results, use the last two pixel values to play with the size and blur.</div>
In order to learn more about box shadows in CSS, you can find its documentation here: https://www.w3schools.com/cssref/css3_pr_box-shadow.asp
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
So I centered a div totally fine, but after adding border it's no longer centered. It's positioned just like before, but now there is a border, so it's longer and the content is moved to the right by a border width. How to fix this?
Add to your div :
box-sizing: border-box;
So the border is part of the total object's width and height.
Can you send your css code for applying in div?
Please add this code to your div.
.center { margin: auto; width: 50%; border: 3px solid #73AD21 }
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Please how to do this chart in HTML and CSS ??
Where the circles are buttons ..
Use the following:
Your basic circle:
.circle {
width: 100px;
height: 100px;
border-radius: 50px; /*Make it a circle (border-radius = 1/2*width & height)*/
background-color: hotPink;
border: none;
}
<button class="circle">Motion Detection</button>
<!-- Using a button to generate the circle -->
Then use position: absolute; with the left and right properties to position the circles.
Have a `Live positioned in the middle of your page with:
<style>
#text {
font-family: MyFont, sans-serif;
color: white;
}
<style>
For the lines I would use divs, and give them a height of 2px and a width of what ever (350px for example.) For the positioning, again use the position property (learn how to use it here: w3schools.com/css/css_positioning.asp) – joe_young just now edit
Use the above to help you create what you want, but as has already been said,
This is not a code generating service, try yourself and ask questions about the code you're having trouble with.
In other words, have a go, come back to us when you have tried and have a specific problem.
Good luck
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
in my top menu for some reason appeared a height size that shouldn´t appear, the size of my top menu is the same of the hoover link menu (hoover) and it appears some height that i cant find from where it came. Here is the link:
http://codepen.io/anon/pen/JsCGE/
You need to remove the margin on the left and right classes.
#menu ul.right{
float: right;
margin: 0; /* Add this */
}
#menu ul.left{
float: left;
margin: 0; /* Add this */
}
Is this what you're looking for?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
Can't set the border property at the bottom of my html window/viewport...
It's just after the last html element. e.g. div.
Is there a way, so it will be displayed really at the bottom of the window?
Here is my css:
html {
border-bottom:5px solid rgb(17,17,17);
border-top:5px solid rgb(17,17,17);
}
Thanks very much!
In your html add
html {
width:100%;
/*height:99%; Fallback for older browsers*/
height:calc(100% - 10px);
border-bottom:5px solid rgb(17,17,17);
border-top:5px solid rgb(17,17,17);
}
I think this will fix your problem.
Here is the Demo
Try setting your body tags margin and padding to 0px.
You need to specify width and height.
html{
border-bottom:5px;
border-bottom-color:rgb(17, 17, 17);
border-bottom-style:solid;
border-top:5px;
border-top-color:rgb(17, 17, 17);
border-top-style:solid;
width:100%;
height:100%;
}
(here's an imgur album to compare the difference: http://imgur.com/a/Uneo5 notice how in the first image, there's a whitespace under it, which appears to be your issue, whereas with height and width, it reaches the bottom of the document)
Edit: And if you have issues with a scrollbar, try 99%, or 99.5%, etc.