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 7 years ago.
Improve this question
I am trying to style my page with CSS, and I've set the background color. Except my page keeps displaying a white box around all the content in the body of my page. Literally, all I have to do is set the background color, and I automatically get a white box around all the content in the body of my HTML page. I know it has something to do with bootstrap because when I get rid of the bootstrap link needed to use bootstrap in my index page, the white box goes away, but so do my nav-pills and bootstrap buttons. So, how do I get rid of it?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap
/3.3.5/css/bootstrap.min.css">
html {
background-color: #FFFFCC;
}
Reset the margin and padding of body
html, body {
margin: 0;
padding: 0;
}
Browser set the margin and padding by default. You can override that using above rule. Add this at the start of your CSS.
It's because by default browsers set certain styles on elements by default. I believe html, body has padding: 10px or margin: 10px by default.
A good base to start with to give yourself a clean start is to use something like normalize (https://necolas.github.io/normalize.css/)
I have found the answer. First, the link for bootstrap needed to come before my link for CSS in my index.html, so that CSS would override bootstrap's default styling. Second, I needed to specify background color in the body tag, instead of in the html tag of my style.css file. Problem solved!!
Related
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 7 years ago.
Improve this question
As a novice web developer I've been trying to build myself a personal webpage from scratch. However I've encountered a problem.
Here's my webpage, it looks ok but when you click any of the links on the left side, and turn a # to display:block from display:none you can see the "bleeding" on the bottom.
I have no idea why this happens, so I'm linking my repo which contains the html and the css for the page.
Put a simple CSS in your Canvas Tag
style="position:fixed"
and its Done
If I understood your question you want to remove the green band at the bottom of the page.
It comes from your background-color:
body {
/* background-color: #A7DBD8; */
}
Juste remove it and it's ok ;)
Remy
Changing the style on the canvas element from
display: inline-block;
to
display: block;
fixes this.
Delete the :
<div class="footer">
from the index.html because you're not using it
Your panes are a fixed width and height: 620px, 500px respectively. If you add padding-top: 100px to a pane (as you did with #links div), it will increase your height to 600px and push things down.
The quick fix is to, instead of adding padding-top: 100px to your #links div, add it to the first paragraph in your #links div.
#links p:first-child {
padding-top: 100px;
}
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 7 years ago.
Improve this question
I'm a CSS beginner trying to customise my WordPress blog by using a custom.css file.
I'd like to add a margin to the top of a div in order to create a separation with the header.
I tried to just change the style like this :
But when I do so the top margin background is black. It doesn't recover the grey background of the div which contains this div.
Is there any trick to do that easily ? Can I use a border instead of a margin for instance ?
According to that image, maybe you want to specify the padding-top instead of margin-top.
Following is the div which is causing the issue
.html_stretched #wrap_all {
background-color: #333333;
}
Set maring-top as you are trying and add following in your custom.css file
.html_stretched #wrap_all {
background-color: #e5e4e4 !important;
}
It will overwrite the default css and set the background grey and you will have your content body separated from header.
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 7 years ago.
Improve this question
I can't remove text decoration from my website, precisely on two places: my site title, and on Contact Page.
I tried to do it with classes, I also copied CSS path from Inspect element mode in Opera and transfered it and modified it into wordpress editor.
But nothing happend. Also tried to do it with all <a> tags using a{} in CSS.
Some help would be nice. Thanks in advance guys!
It looks like the text-decoration has been removed, but there is a border-bottom: 1px dotted #333 applied to the site title and the social media icons on the contact page. Are you confusing the two?
If you remove the border-bottom, the dotted line styling goes away.
It is not text decoration what is making your site like this. It is border. Add these lines to your stylesheet (in wordpress editor):
.site-title a {
border: 0;
}
If you also want to remove (under)line from social networks add this:
.drustvenemreze a {
border: 0;
}
You have text-decoration:none set in your CSS for <a> tags, but you also have a border-bottom: 1px dotted #333;
I believe that is what is making it appear that the links you reference still have text-decoration applied. If you get rid of the border-bottom, you should be good.
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 7 years ago.
Improve this question
I've tried messing with vertical-align, line-height, etc.
should show you what I'm trying to do. I put a little red arrow to show where I want the text shifted up to.
You'll need to modify the top margin in css or html, below are three ways of doing so.
edit in css:
h2 {
margin-top: 0px;
}
edit inline style in html:
<h2 style="margin-top="20px;"> remove "margin-top" from inline style
override inline style:
if you don't have access to your html you can override the inline style:
h2[style] {
margin-top: 0px;
}
Update:
Based on your comment on your OP, it looks like you only want to move your text up about 5px. you may want to use something like margin: 15px or margin: 20px to line your text up with the top of the grey box. The examples above still apply.
You are using an h2 tag surrounding the text. You should override the margin for that particular class in this fashion:
h2 {
margin-top:0;
}
If you wish to only target the text in that particular div you should specify that in your css like so:
#this-div h2 {
margin-top:0;
}
EDIT
As you are using inline styles in your html (which I personally tend to avoid) you will have to modify the inline styles of your h2 tag within your html to achieve the results you desire.
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
enter code herehttp://jsfiddle.net/rLP5V/
I have my document listed above, for some reason, even when I set margins to 0 the margin between the header1 and nav bar still shows and leaves an unnessecary blank between the both of them. Please let me know how to get rid of it. P.S. The page I am creating is for a project
Elements like h1 and ul have usually their margin set by the browser's (user agent) own stylesheet unless explicitly overwritten :
h1 {
margin: 0;
height: 50px; // SAME HEIGHT AS PROFILE PHOTO
}
ul {
margin: 0;
}
See Fiddle: http://jsfiddle.net/bonatoc/jhU85/1/
Look for the last lines added to the CSS.
The h1 element has a margin defined by the browser. You will have to override this in your CSS.