I am cleaning up my web portfolio directory by placing CSS, images etc into respective folders.
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/contact.css">
However, I can't seem to load certain DIV elements from my CSS file if it's inside a directory.
The DIV is below:
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url('img/form-bg.png') no-repeat;
min-height: 768px;
}
Is there a way of solving this? Everything else seems to load except for the div above.
Try this...
#contact-form-wrap {
width: 1024px;
margin: 0 auto;
background: url(../img/form-bg.png) no-repeat;
min-height: 768px;
}
Make sure that you're using the ID and not a class when using #contact-form-wrap. That is the only thing I can really think of.
Example:
Incorrect:
<div class="contact-form-wrap"></div>
Correct:
<div id="contact-form-wrap"></div>
don't forget to add type="text/css" to your css declaration like this :
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/contact.css">
Related
I have seemed to encounter an unknown space below the div pair.
I have used the bootstrap grid concept and made use of rows and columns to have 2 adjacent Divs.
Then I have used CSS to make the div fill the whole space of the screen but I seem to get unaccounted for white space below the divs.
I have already tried including an advanced CSS reset.
Here is the html :
#half_box_1 {
width: 50%;
height: 100vh;
background-color: #FFAEAB;
}
#half_box_2 {
width: 50%;
height: 100vh;
background-color: #FFC0FA;
}
#following_div {
height: 500px;
width: 100%;
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title>Kshitij Dhyani</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="materialize.css">
<link rel="stylesheet" type="text/css" href="my_portfolio.css">
<!-- FONTS -->
</head>
<body>
<div class="row">
<div class="col-lg-6" id="half_box_1">asd</div>
<div class="col-lg-6"
id="half_box_2"></div>
</div>
<div id="following_div"></div>
</body>
</html>
I am unable to comprehend this unaccounted space.
Since you probably have noticed (by the comments), your code seems to work fine.
Your problem seems to be somewhere else in your CSS.
First, try to use the following CSS to see if it works:
* {
padding: 0 !important;
margin: 0 !important;
}
If that worked, you can delete it and you need to start debugging.
Open up Chrome DevTools and go to Sources -> Page and find your CSS file(s). Try to delete each CSS block one after the other. If there is no more space between, you may found out where the problem is.
this is default margin, Please add this code body{margin: 0;padding: 0;} in css
I have the following in the .css file when the application is not running:
#tabsuseradmin .ui-tabs-panel {
height: 500px;
overflow: auto;
margin-right: 10px;
}
But during runtime, in the browser developer, the same styling comes as:
#tabsuseradmin .ui-tabs-panel {
height: 900px;
overflow: auto;
margin-right: 10px;
}
I searched "900px" in my entire Visual Studio project, and did not see it anywhere for a height attribute. I am stuck on this and don't know what is happening to cause this to become 900px. What should I do?
Load order of my CSS files:
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/Content/bootstrap-theme.min.css" rel="stylesheet" />
<link href="/content/themes/base/jquery-ui.css" type="text/css" rel="stylesheet">
<link href="/content/docsupport/style.css" type="text/css" rel="stylesheet">
<link href="/content/uielements.css" type="text/css" rel="stylesheet">
<link href="/content/headerfooter.css" type="text/css" rel="stylesheet">
The uielements.css contains the styling in question, and the headerfooter.css doesn't contain anything that overwrites in the css above it (I tested by removing it entirely).
Thank you.
Load your css files inside of your head tag, after the loading of the files create a style tag with the rules that you want to take precedence immediately after the css file loading. This will allow your rule to overwrite preexisting rules set in the css library files.
I am creating a basic landing page with HTML & CSS where the whole header background is an image.
Here's my CSS code:
body,html {
height: 100%;
background: honeydew;
}
header {
height: 100vh;
background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
background-size: cover;
background-position: center;
}
When I add an h1 or any form of text onto the header my webpage creates a large margin off the top of the browser. I also cannot edit my text at all.
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>myTitle</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link href="main.css" rel="stylesheet" type="text/css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body>
<header>
<h1>Hello!</h1>
<h3>Welcome!</h3>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!-- jQuery (necessary for Use of jQuery Syntax) -->
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</body>
</html>
Here's my webpage prior to any addition of text:
Now here it is after text was added:
What seems to be the issue?
1. This css should take care of the margin/padding that you're seeing when you add an h1 element:
h1 {
padding:0;
margin:0;
}
To eliminate the spacing around your header background image you'll need to ensure that the html, body and header elements have no margin or padding:
html, body, header {
margin:0;
padding:0;
}
You could also use something like this to get rid of the default padding/margin on all elements:
* {
margin:0;
padding:0;
}
Many developers will override browser default styles with a css reset like normalize.css.
2. Your main.css should be loaded after the Bootstrap stylesheet.
You should ensure that you're loading your styles after Bootstrap.css. adjust your html to match this:
<!DOCTYPE html>
<html>
<head>
<title>Student Sanctuary</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="shortcut icon" type="image/x-icon" href="pencil.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<!-- Latest compiled and minified CSS -->
<link href="main.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>Hello!</h1>
<h3>Welcome!</h3>
</header>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
crossorigin="anonymous"></script>
<!-- jQuery (necessary for Use of jQuery Syntax) -->
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
</body>
</html>
If you don't load your custom css styles after Bootstrap, then you'll have to add !important to you styles in order to override the Bootstrap stylesheet.
3. Here's a working solution in a jsfiddle with a cool cat photo
You need to override bootstrap's CSS like this.
header h1 {
margin: 0;
}
If you want to set all h1 with one rule, do like this
h1 {
margin: 0 !important;
}
If you make sure your CSS rules loads after bootstraps you can remove the !important
Snippet
html, body {
margin: 0;
height: 100vh;
background: honeydew;
}
header {
height: 100%;
background-image: url(https://s3-us-west-2.amazonaws.com/myBucket/myBG.jpg);
background-size: cover;
background-position: center;
}
header h1 {
margin: 0;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
<header>
<h1>Hello!</h1>
</header>
This is margin collapsing in effect and the CSS box model's default behaviour. In particular collapsing margins between parent and child elements where H1's margin is applied on the header element.
The common solution to overcome margin collapsing is to declare an overflow rule, a top padding, or a border on header. Since the header has a fixed height overflow: hidden would be the most fitting. See this answer for more details and further possible solutions.
Setting the top-margin to 0 on h1 has the same effect in this particular case but is not very useful if you actually want to apply a top-margin to it later on.
body,html {
height: 100%;
background: honeydew;
}
header {
height: 100vh;
background: #39C;
overflow: hidden; /* overcome margin collapsing */
}
header h1:first-child {
/* apply any margins - will not affect header anymore */
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
crossorigin="anonymous">
</head>
<body>
<header>
<h1>Hello!</h1>
<h3>Welcome!</h3>
</header>
</body>
So this is a weird one, I'm getting a small margin at the very top of my page even though I've applied the standard CSS reset. If I open the inspector in Chrome / Firefox / or even gasp IE, I see that the body is reading my margin:0 reset, but still adding a gap regardless.
Gap:
Chrome Web Inspector that shows margin:0 is being honord:
So, the super duper weird part here is that if throw an important like margin: 0 !important; , the gap goes away. I've used this exact template set up many many times without issue. Hopefully someone sees something that is eluding me right now.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/css/Reset.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap-theme.css" rel="stylesheet"/>
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/Site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-1.9.0.js"></script>
<link href='//fonts.googleapis.com/css?family=Ubuntu:300,400,500' rel='stylesheet' type='text/css'>
<script type="text/javascript">var base_url = 'http://localhost:64789/';</script>
</head>
<body>
<div id="wrap">
<h2>Index</h2>
</div>
</body>
</html>
CSS
Note: Site.css is an empty file at this point, as I just started this project.
html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form {
margin:0;
padding:0;
border:0;
border-collapse:separate;
border-spacing:0;
}
a {
text-decoration: none;
}
* {
font-family: 'Ubuntu', sans-serif;
}
body {
background: #f0f6e8 url(../images/gradbackground.jpg) repeat-x 0 top;
}
#wrap {
width: 100%;
background: transparent url(../images/leaves.jpg) no-repeat center top;
}
The margin is on the <h2>, not the <body>. There must be some other selector for h2 that is adding the additional top margin. In your own Site.css styles, include margin-top: 0 for the h2
Bootstrap is probably overriding it from another element. Check the elements it is nested in for margin being set in main.css.
How can I override the CSS of body using below custom style if the page require linked with the
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<style>
body {
background-color: red;
}
</style>
I tried to save the custom style in custom.css and declare it like
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="custom.css" />
but it doesn't work.
Check to see if it's not loading a more specific rule like body.someclassname, or use the important rule: body{background:red !important;}
Hard to tell without seeing the rest of your page, but have you tried:
body {
background-color: red !important;
}