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 8 years ago.
Improve this question
I've got the following code for my html section
only the first heading creates a border and the rest are all over the place, below is two photos of what it should look like, and what it does look like...
![enter image description here][1]
![enter image description here][2]
Any ideas? Thanks!
The code is a bit messy. But if this is what you want: http://jsfiddle.net/96z7U/3/
These are the changes:
<h1 class="titleBorder">Module Details</h1>
It had no class.
#moduleDetails {
border-style: solid;
/*border-width: 1px;*/
padding: 5px;
}
I'm not sure if you intended that border.
And:
.titleBorder {
padding-top: 10px;
border-style: solid;
border-width: 1px;
margin:0 auto;
float:left;
width:100%;
}
Add float left and width 100%
The problem seems to be connected with the fact that the content below the heading have the style float:left which causes the issue. Try adding the following code before each heading with class 'titleBorder':
<div style="clear:both"></div>
Related
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 11 months ago.
Improve this question
I am wondering how are you able to create a circle button using HTML and CSS. I feel like it has something to do with border-radius after you set a proper width and height but it didnt work out like I hoped. The image below shows what it should look like.
What the button should look like
For a circle shaped button all you need to do is set your border-radius to 50%. Change the background-color of the button to white and you should be good to go. You can also set your .button height, width, font-size and font-family to mimic your desired look.
<style>
.cont {
width:100%;
height:100%;
background-color:lightgrey
;
}
.button{
width:100px;
height:100px;
border-radius: 50%;
border:none;
background-color:lightgrey;
}
</style>
<div class="cont">
<button class="button">Explore</button>
</div>
if you want a generalized solution then you can try this
HTML
<button>Explore</button>
CSS
button {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: white;
}
You can adjust the width & height according to your requirement
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 1 year ago.
Improve this question
This is the code I wrote. but it doesn't work as I expected. There is space around the background color still and I want to cover the div with that color.
What is the issue here?
#div {
background-color: black;
margin: 0;
}
This might be happening for 2 reasons :
You don't have initial values set to 0 in CSS for the entire DOM
You have some padding on a parent element,or margin on child element that you need to get rid off
Attaching a runnable snippet for your reference
*{
margin:0;
padding:0;
box-sizing:border:box
}
.main{
background:blue;
padding:1rem;
}
.child{
background:red;
padding:1rem;
}
.grandchild{
background:yellow;
padding:1rem;
}
<div class=main>
<div class="child">
<div class="grandchild">
Text
</div>
</div>
</div>
background-color is not applied on margins. Replace margin: 0; with padding: 0;
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 5 years ago.
Improve this question
What I would like to do is make a bordered element with a horizontal line inside which contains an image at the top and text at the bottom. I had no idea how to make a div with a border and a horizontal line separating it.
What you've asked is how to create a horizontal border between two sections of a div, the easiest way I can think of is to just use an <hr /> element. You could also of course do this by stacking two divs vertically, but I think this is simplest.
.split-box {
border: black 1px solid;
border-radius: 20px;
}
.split-box hr {
border-width: 1px 0 0 0;
border-color: black;
margin: 0;
}
.split-text {
padding: 10px;
}
<div class="split-box">
<div class="split-text">
Top part of box
</div>
<hr />
<div class="split-text">
Bottom part of box
</div>
</div>
You can run the code snippet above to see this in action.
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 7 years ago.
Improve this question
I have the following CSS:
#Wrapper {
width: 600px;
background: #FFFFFF;
margin: 0 auto;
padding: 5px;
border-radius: 10px;
}
And the following HTML:
<div id="Wrapper">
...
</div>
But for some reason the wrapper's CSS styling does not extend the full length of the HTML.
I'm missing something obvious I'm sure but can't see the wood for the trees right now and pasting all the code would just make my post look a mess.
Any thoughts...?
Use tables for emails to be consistent across all clients.
Then you should read up on CSS use within emails.
margins, border-radius are not acceptable.
http://www.campaignmonitor.com/css/
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 8 years ago.
Improve this question
I have link that I want a border around but I can't get the border to appear closer to the text. Below is the css for the element;
.signup{
border: 1px solid;
border-radius: 10px;}
which displays the border as;
If I add height: 1.2em it reduces the bottom spacing but not the top;
how do I reduce the spacing above the text?
I'm using the bootstrap flatly theme http://bootswatch.com/flatly/ the element I want the border around is 'WrapBootstrap' in the top right of the navigation bar.
You should give the border style to the <span> itself.
span{
border: 1px solid black;
border-radius: 10px;
padding: 5px 10px;
}
Editing the padding will allow you to move the border from the text.
In your case the position of the <span> and the .margin might be causing the discrepancy. Like #dfsq pointed out, there could be other factors.