I wrap around my header and paragraph with a <div>. I gave it an ID called help. In css, I style the element to give it a border and a background to the header tag. How do remove the white space above the header inside the border? I only know how to use margins and paddings.
HTML:
<div id="help">
<h2>Help</h2>
<p>Here are some text for place holder. This will be some random text. Blah blah. No grammar no nothing. How does this work. haha No idea.Here are some text for place holder. This will be some random text. Blah blah. No grammar no nothing. How does this work. haha No idea.Here are some text for place holder. This will be some random text. Blah blah. No grammar no nothing. How does this work. haha No idea.</p>
</div>
CSS:
#help {
border: 1px solid black;
background-color: white;
width: 20%;
}
You need to remove the default margin on the <h2> element, you also need to target the div properly with #help:
HTML:
<div id="help">
<h2>Help</h2>
<p>Here are some text for place holder. This will be some random text. Blah blah. No grammar no nothing. How does this work. haha No idea.Here are some text for place holder. This will be some random text. Blah blah. No grammar no nothing. How does this work. haha No idea.Here are some text for place holder. This will be some random text. Blah blah. No grammar no nothing. How does this work. haha No idea.</p>
</div>
CSS:
#help {
border: 1px solid black;
background-color: white;
width: 20%;
}
h2{
margin-top: 0px;
}
Related
I have tried to add custom css, but not worked. I need to change the color of text after selecting the input fields.
<div class="input-field form-group">
<input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
<label for="first_name" class="mat-label">First Name</label>
</div>
An easier way, though you should edit the SCSS files.
But if you want in quick then use the following css.
I have used royalblue color here, you can use any hex color.
For bottom border
input:focus {
border-bottom: 1px solid royalblue !important;
box-shadow: 0 1px 0 0 royalblue !important;
}
For label color
label.active {
color: royalblue !important;
}
For the line color, I was able to change the default green to black with the css below.
input:not([type]):focus:not([readonly]), input[type="text"]:not(.browser-default):focus:not([readonly]), input[type="password"]:not(.browser-default):focus:not([readonly]), input[type="email"]:not(.browser-default):focus:not([readonly]), input[type="url"]:not(.browser-default):focus:not([readonly]), input[type="time"]:not(.browser-default):focus:not([readonly]), input[type="date"]:not(.browser-default):focus:not([readonly]), input[type="datetime"]:not(.browser-default):focus:not([readonly]), input[type="datetime-local"]:not(.browser-default):focus:not([readonly]), input[type="tel"]:not(.browser-default):focus:not([readonly]), input[type="number"]:not(.browser-default):focus:not([readonly]), input[type="search"]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
border-bottom: 1px solid black;
-webkit-box-shadow: 0 1px 0 0 black;
box-shadow: 0 1px 0 0 black;
}
This green is actually $secondary-color
So in SASS, here is how it can be changed:
$secondary-color: #FEBD09;
#import "materialize-css/sass/components/variables";
When using Sass, you can change the color scheme of your site
extremely quickly.
To change the style of input/form you will only have to modify the variables under 10. Forms:
https://github.com/Dogfalo/materialize/blob/master/sass/components/_variables.scss
After changing the values, you need to build the new CSS file using SASS command line
Also check out: http://materializecss.com/sass.html, http://sass-lang.com/
You can change the text color easily by changing the code like
<div class="input-field form-group">
<input id="first_name" class="active validate form-control" name="first_name" type="text" value="">
<label for="first_name" class="mat-label">
<span class="black-text">First Name</span>
</label>
</div>
That is append -text to the color class. Check : http://materializecss.com/color.html
This is the CSS, you can change colors of materialize input animated text
input:not([type]):focus:not([readonly])+label,.form-wrap input[type=text]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=password]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=email]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=url]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=time]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=date]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=datetime]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=datetime-local]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=tel]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=number]:not(.browser-default):focus:not([readonly])+label,.form-wrap input[type=search]:not(.browser-default):focus:not([readonly])+label,.form-wrap textarea.materialize-textarea:focus:not([readonly])+label{
color: #4285F4; /* after animation color change css */
}
.form-wrap input:focus:not([type]):not([readonly]),.form-wrap input[type="text"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="password"]:focus:not(.browser-default):not([readonly]), input[type="email"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="url"]:focus:not(.browser-default):not([readonly]), input[type="time"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="date"]:focus:not(.browser-default):not([readonly]), input[type="datetime"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="datetime-local"]:focus:not(.browser-default):not([readonly]), input[type="tel"]:focus:not(.browser-default):not([readonly]),.form-wrap input[type="number"]:focus:not(.browser-default):not([readonly]), input[type="search"]:focus:not(.browser-default):not([readonly]),.form-wrap textarea.materialize-textarea:focus:not([readonly]){
border-bottom: 1px solid #4285F4;
box-shadow: 0 1px 0 0 #4285F4; /* after animation color change css */
}
I've been trying hard, but I can't find the reason. Check www.kanionek.pl
How to get rid off the gap between the header and top of the window? There's .site: 15px auto, but even if I reduce it to 0 there's still 21px extra. Hope you can help.
I know I can use negative margin, but I would like to know the reason. Part of header:
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<a class="skip-link screen-reader-text" href="#content"><?php _e( 'Skip to content', 'dream' ); ?></a>
<header id="masthead" class="site-header" role="banner">
<div class="site-branding">
Part of template:
<?php
get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main" role="main">
<?php while ( have_posts() ) : the_post(); ?>
css fragments:
.site{
max-width: 960px;
margin: 15px auto;
border: 2px solid #808080;
border-radius: 10px;
overflow: hidden;}
Header margin and padding set to 0 do not help.
Body padding and margin are set to 0 and the only trace is that when I change css body section line-height to "0" that gap is gone.
Something is adding a zero width no-break space right after the <body> tag, forcing the following block-display <div> down one line. Probably one of the many scripts. I couldn't tell what, but there you go.
To see it, open the Firefox inspector, right-click on the <body> tag, and click "Edit as HTML". Right after the tag there is (at least in my Firefox) a red dot which is the placeholder for that invisible character. You can copy it and paste it into something that will tell you the codepoint etc.
I solved the problem - maybe it will help someone some day. I could not locate exactly zero-width char, but being almost sure it should be in header.php, I opened it notepad++ and saved using utf-8 without BOM encoding.
I'm using a CMS theme that contains all of Bootstrap 3. Is it possible to add a title block manually in HTML/CSS? I'm not sure if that's the block's official name... it's the purple full-width block containing the text:
CSS
Global CSS settings, fundamental HTML elements styled and enhanced with extensible classes, and an advanced grid system.
in the following link (for example):
http://getbootstrap.com/css/
This title block is built into my theme and is available based on the design for the page I select.
But I was wondering if this block is available separately from Bootstrap, like a Navbar, panel, well, etc. component, that I can just include some HTML/CSS code and have it appear in the body of a page, for example.
No it's not in bootstrap but it's pretty easy to grab the style and use it anywhere:
.bs-docs-header {
font-size: 24px;
padding-bottom: 60px;
padding-top: 60px;
text-align: left;
}
.bs-docs-masthead, .bs-docs-header {
background-color: #6F5499;
background-image: linear-gradient(to bottom, #563D7C 0px, #6F5499 100%);
background-repeat: repeat-x;
color: #CDBFE3;
padding: 30px 15px;
position: relative;
text-align: center;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
check this jsfiddle
If you look at their source, they are using a stylesheet called docs.min.css, they have defined the background in here. Other then that it is just a simple <div class="container"><!--title and subtitle here-->. So the answer is a yes and a no. You can, of course, use containers seperately from your CMS when using bootstrap, but the background will not be available unless you strip it from the getbootstrap.com source.
Edit
If you see their styles, they are using this code in their docs.min.css:
#media (min-width: 768px)
.bs-docs-header h1 {
font-size: 60px;
line-height: 1;
}
}
This means, when the width of your window is above 768 pixels, it gives the h1 a font-size of 60px. When you fall under it, this code is ignored and the default bootstrap font-size is being applied.
Edit 2
To get a background-color behind it, don't apply the background color to the .container. wrap a div around it without a width value. The container width is not full width, so if you apply a background to it, its only behind the container that is centered.
Edit 3
A simple HTML structure would be something like this (you still have to include all bootstrap styles and default html tags etc.
<html>
<body>
<div id="bgColorDiv">
<div class="container">
<h1>My title</h1>
<p>Paragraph below the title</p>
</div>
</div>
</body>
</html>
Update: I have found out that this is a very specific problem with <div>'s with the combination of overflow: hidden and anchors. There seems to be no solid way around it. I now deleted the overflow: hidden. This solves my anchor problem, but creates extra space below my columns. This is not such a big problem, but if anyone knows how to get rid of the overflow without using overflow: hidden, suggestions would be really welcome. End update
I have a fairly simple website with a header in a <div> over two columns. The header and the columns are in one container. The header is NOT fixed; when scrolling down, the header goes out of view.
Now, my problem is with the anchors I want to add in the right column. The anchor itself works properly; when I click on the link on the top of my page, it jumps to <h2> just fine. It puts the title in the top of the screen just like I want it to. The problem is, however, that when I scroll back to the top, the upper part of my content in the columns has shifted behind the header. At first I thought it shifted all the way up to the top of the page, but now I see that that is not the case. I don't understand what the amount of pixels corresponds to. The columns themselves seem to keep the proper length; there is now extra empty space below the text.
I have read several questions of others on this website, but they all dealt with fixed headers, and their problem was that the anchor tag itself disappeared behind the header. I have tried the solutions proposed to this problem, but that causes my anchor tag to appear too low on the page and doesn't solve the problem that the upper part of my columns ends up behind the header.
Does anyone know how to fix this...?
My HTML for the page-setup:
<div id="container">
<div id="header">
</div>
<div id="columns">
<div id="leftcolumn">
</div>
<div id="rightcolumn">
</div>
</div>
</div>
My CSS for the header and the columns:
#header {
width: 738px ;
height: 298px ;
padding: 0px ;
position: relative;
}
#container {
width: 738px ;
margin-left: auto ;
margin-right: auto ;
margin-top: 0px ;
margin-bottom: 0px ;
padding: 0px ;
}
#columns {
position: absolute;
margin-top: 0px;
margin-bottom: 0px ;
width: 738px ;
background: #b43232 url(fauxcolumns.jpg) ;
overflow: hidden ;
}
#leftcolumn {
float: left;
width: 254px ;
margin-top: 0px ;
padding: 0px ;
}
#rightcolumn {
margin-left: 254px ;
margin-top: 0px ;
padding: 0px ;
}
And, finally, my HTML for the anchor:
Text
<p>Text in between the top and the anchor.</p>
<a name="text"><h2>Text</h2></a>
<p>This is the text the anchor wants to take you to.</p>
So, to summarize: the anchor works, but when I scroll back to the top, the upper part of my content has now shifted behind the header. So I guess I want the content of my columns to align with the top of the column, instead of in some random place behind the header, but I can't imagine how to do it. Setting top or margin-top to either #columns or both columns separately doesn't work. I can't think of anything else...
Anyone have any ideas?
Here is the css code I am using:
#wrapper{
position:relative;
width:950px;
margin-left:auto;
margin-right:auto
}
#content {
text-align: left;
padding: 0px 25px 0px 25px;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 50%;
/*half of width of element*/
margin-left: -450px;
height: auto;
}
And this is the site: http://projectstratos.com/31-01-11/
Please ignore the social icons and the height issues.
To see what I mean make your browser smaller and bigger. The text moves to the right while the background image stays centered. How can I fix this?
I don't believe there's an actual 'fix' for the problem you're presenting.
When you say that the text 'moves to the right' in reality- the text is not moving at all.
Your background image is just trying to maintain itself in the center of the horizontal axis- which you're changing.
For example.. If you got Bungie's website http://www.bungie.net/Projects/Reach/default.aspx and you perform the same action. You'll get the same 'effect' that you are. The only difference is that the background of the text in their website isn't a part of the background image.
Here's what you need to do in order to 'fix' you're problem.
Separate the background (planet, space, etc..) from the logo, purple box etc.
Keep the space, planet, etc.. in the same spot as the background image that's there now.
Take the purple box and put it in it's own div that wraps around all your content
You're code will look similar to this:
<body>
<div id="purpleboxbackgroundimage">
<div id="contentandtext">
<h1>jhkljhlkjhlkj</h1>
</div>
</div>
</body>
I hope this helps.