I'm making a website and my text won't align to the center for the index-intro h1!
.index-intro {
width:100%;
background-color: #00C8FF;
height: 20px;
float:center;
}
.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
text-align:center;
display:inline-block;
}
<section>
<div class="index-intro">
<div class="wrapper">
<h1>Welcome to Anime!</h1>
</div>
</div>
</section>
And thanks :)
Here is a trimmed down set of HTML and CSS:
.index-intro {
background-color: #00C8FF;
text-align:center;
}
.index-intro h1 {
font-size: 15px;
text-transform: uppercase;
}
<div class="index-intro">
<div class="wrapper">
<h1>Welcome to Anime!</h1>
</div>
</div>
This aids the vertical alignment issues too, since you had fixed the height of the containing <div>. Although I guess you may have wanted that?
Here it is with some padding thrown in:
https://jsfiddle.net/9a3b4f7g/1/
Your Css is okay.
Just add this class in style tag
<style type="text/css">
.wrapper
{
text-align: center;
}
</style>
Please try following code snippet
.index-intro {
width:100%;
background-color: #00C8FF;
height: 20px;
text-align:center
}
.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
}
<section>
<div class="index-intro">
<div class="wrapper">
<h1>Welcome to Anime!</h1>
</div>
</div>
</section>
Believe it or not, you can do what you're looking for with just
.index-intro h1 {
font-family: tpeb;
font-size: 15px;
text-transform: uppercase;
text-align:center; /*this makes the text go in the middle*/
display:inline-block;
width:100%;
background-color: #00C8FF; /*your bar color*/
padding-top:20px; /* this "fattens" the blue bar topside */
padding-bottom:20px; /* this "fattens" the blue bar bottomside */
}
What this basically does is, 'make a blue bar that fits 100% the window width, with text in the middle, fatten it top and bottom'. It's better to keep your CSS simple like this if you can. Keeps you from getting confused in the long run.
Related
I'm trying to figure out why I can't fill this spot, despite trying many things I have been unable to figure out how to fix it. I tried padding the top, but to no avail. I have provided the code below as well as a picture of the space I'm talking about. In the picture there's a white space between the header 2 and the gray area that has a brief summary. I have tried padding and also increasing the height of the background color, but it doesn't seem to work. Thank you in advance for reading this and I really do thank you for taking the time to help me figure this out.
$(document).ready(function()){
$("figure img + figcaption").prev().addClass('hasCaption');
});
.body{
margin: 0px;
}
.homeButton{
width: 40px;
}
#MidPort{
background-image: url("http://www.geocities.ws/spahealthcare/pic/dark-green-home-button.png");
background-size:cover;
position:absolute;
margin-left:1565px;
bottom:10px;
}
.topnav{
font-size: 20px;
font-family: Times New Roman;
position:fixed;
top 0;
width:100%;
}
#bg2{
background-color:red;
}
ul{
list-style-type:none;
margin:0;
padding:0;
overflow: hidden;
background-color: #333
}
li{
float:left;
border-right:1px solid #bbb;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
.active{
background-color:#4CAF50;
}
li a:hover:not(.active)
{
background-color: #111;
}
li:last-child{
border-right:none;
}
#margintop1{
margin-top: .5cm;
font-family: Gadget;
}
.jumbotron{
height:175px;
background-color:#808080;
}
hr.style17 {
border-top: 1px solid #8c8b8b;
text-align: center;
}
hr.style17:after {
content: '§';
display: inline-block;
position: relative;
top: -14px;
padding: 0 10px;
background: #f0f0f0;
color: #8c8b8b;
font-size: 18px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
transform: rotate(60deg);
}
img.hasCaption {
padding-bottom: 50px;
}
figcaption {
position: absolute;
left: 14px;
right: 14px;
bottom: 16px;
background-color: white;
text-align: center;
color: blue;
font-family: 'Reenie Beanie', cursive;
font-size: 30px;
padding: 10px;
}
figure {
display: inline-block;
position: relative;
left: 0;
-moz-transform:rotate(-5deg);
-webkit-transform:rotate(-5deg);
-ms-transform:rotate(-5deg);
transform:rotate(-5deg);
}
img {
border-color: white;
border-width: 15px;
-moz-border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-image: url(http://tobias-reinhardt.de/img/frame.png) 15 stretch;
border-style: solid;
margin: auto;
}
#imgR{
margin-left:1285px;
height:400px;
}
font{
font-family:Gadget;
}
section{
background-color:#00FFFF;
margin-bottom:10cm;
font-family:Gadget;
}
}
<!-- Check to see if the navigation bar remains at the bottom if I use the nav class instead of ul. If not, revert back to ul for when the user scrolls down-->
<div>
<header>
<!--<div class="container">-->
<h2 class="topnav" id="cs2">
<ul>
<li><a class="active" href="/home">Home</a></li>
<li>About Me</li>
<li>Contact</li>
<li id="MidPort"></li>
</ul>
</h2>
</header>
</div>
<body>
<div class="intro-text">
<div class="jumbotron">
<div>
<p id="margintop1"style="margin-right:200px;">
<font color="white">Front-End Developer and Economist, with experience in project management, machine learning, and leadership roles; devoted to functional programming and analyzing mathematical models to solve emerging economic problems
</font>
</p>
<hr class="style17"/>
</div>
<figure>
<img src="http://i.maniadb.com/images/artist/116/116122.jpg" id="imgR">
</figure>
</div>
</div>
<div id="midSec">
<section>
<h2>
<center>
<font color="#2F4F4F" size="20">
Portfolio
</font>
</center>
</h2>
</section>
</div>
</body>
<!--setup a home button at the bottom-->
[![Space is in between Portfolio and the brief summary][1]][1]
You're using an h2 in your code that has a margin.
h2{margin: 0;}
This will fix it.
h2{margin-top:0}
will fix the issue
h2 by default has a margin top . Remove that.
Also, your HTML is not correct . ( that's why i post this as an answer, to explain to the op the problems from his html )
The biggest problem is that you nested ul inside h2 . This practice is not valid.
As stated in the doc
Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.
Heading tags like h1,h2 etc. are pharsing content, ul is a flow content . So you cannot put ul inside h2
You can check your HTML here > HTML validator and check docs here > documentation
Second problem is that you write <li>About Me</li>
So you first open li, then a but you close first the li and then the a. You need to close the a before closing the li. a being a child of li . Correct form :
<li>About Me</li>
Another problem is using tags that are no longer supported in HTML5 . font,center . ( also the use of size is not supported either) You either use inline styles for example <h2 style="font-size:10px;text-align:center"> or you can use CSS styles separately .
These are just the problems i see from a first look over your code
I tried to use the text-align in CSS but it does not work.
here is the CSS and I also had all the body set to center, does that have to do with something?
Here is my CSS:
#Swell {
text-align: left;
}
Here is my HTML:
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
Also my CSS body text-align:
body {
font-family: sans-serif;
text-align: center;
background-color: rgb(128, 212, 255);
}
Dose the text-align: center have to do with the error and if that is true then how do I overwrite/fix this error
An anchor element <a> is an inline element per default. Meaning it has no width or height on its own but rather is exactly as big as its content.
The text-align property does work in your example. It's just that the text is aligned regarding it's container. Which in this case is exactly as big as it's content. Therefore you would not see any difference.
Try to set the display property of the anchor element to block and see what happens.
a{
display:block;
text-align:right;
}
<a>Blocking beautiful</a>
Edit: More in line with your example:
body{
text-align:center;
}
a{
display:block;
text-align:left;
}
<body>
<a>Still beautiful</a>
<span>centered</span>
</body>
html
<div id="parentdiv">
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
</div>
css
body {
font-family: sans-serif;
text-align: center;
background-color: rgb(128, 212, 255);
}
#parentdiv {
text-align: left;
}
Example
<html>
<style>
body {
font-family: sans-serif;
text-align: center;
background-color: rgb(128, 212, 255);
}
#parentdiv {
text-align: left;
}
</style>
<div id="parentdiv">
<a id="Swell" href="https://www.swell.com">Use Swell Bottles<img src="https://s-media-cache-ak0.pinimg.com/originals/f9/93/95/f99395b48463ee8d3bfa16f32df51c98.jpg" height="50"></a>
</div>
</html>
Here is a picture of what I want changed to blue
here is my html and css code: https://jsbin.com/cofeweqaca/edit?html,css,output
Okay, weird stuff going on. When I created the jsbin to show you all my problem, the problem wasn't there. So my problem exists in sublime somehow. My problem is this: the space in between the 2 grey divs (the top is a jumbotron the bottom is not). Is supposed to be blue like it is in the jsbin. But in my sublime, when I open it up in Chrome, its white. Everything else is blue except that little stripe between the two divs.
I am VERY new to the web developer scene. So maybe someone wiser than me can explain the reason of this issue? Why is it white? Thanks!
Edit: Here is my code directly.
html {
font-family: 'Droid Sans', sans-serif;
}
#navb {
background: #3E474C;
}
#bs-example-navbar-collapse-1 ul li a {
color: white;
}
li:hover {} html {
background: #A5BCCC;
}
body {
background: #A5BCCC;
}
#rankjumbo {
margin-top: 100px;
height: 350px;
margin-bottom: 0;
}
.searchbox {
width: 50%;
margin: auto auto;
}
#text {
text-align: center;
font-family: 'Droid Sans', sans-serif;
}
#h1 {
font-family: 'Pacifico', cursive;
text-align: center;
padding-bottom: 30px;
}
#button {
background: #4B7795;
color: white;
font-family: 'Droid Sans', sans-serif;
}
.list {
height: 300px;
background: #eee;
margin-top: 30px;
}
<div id="rankjumbo" class="jumbotron">
<div class="container">
<div id="special">
<h1 id="h1">Rank.gg</h1>
<div class="searchbox">
<input id="text" class="form-control" type="text" placeholder="Enter your IGN...">
<button id="button" class="btn btn-default btn-block">See Where You Rank!</button>
</div>
</div>
</div>
</div>
<div class="list">
</div>
it because of the height inside of #rankjumbo and the blank div class "list" remove the css .list and make your #rankjumbo like this Live Fiddle
#rankjumbo{
margin-top:100px;
margin-bottom: 0;
}
I fixed it by moving the bootstrap link above my stylesheet in my html.
I need to create the above HTML.
It's a h3 with a blue background and to the right is an SVG for a tick.
I need to have both elements sitting on the same line, and the SVG embedded within the h3.
This looks so easy, but I can't figure out how to do this.
What is the best way to achieve the above?
<h3 style="background-color:blue;">About You
<img src="image.png" style="float:right;display:block;">
</h3>
Simply create a <h3> with a image in it and apply padding to <h3> for top and bottom space.
h3{
font-family:arial;
font-size:18px;
color:#fff;
background:blue;
margin:0;
padding:5px 10px;
}
h3 img{
float:right;
}
<h3>About Us <img src="tick.png"></h3>
As the others already answered what CSS to use, I just want to promote an additional approach:
Assuming you have multiple headlines with the styled tick, it makes sense not always have to add the whole <img /> tag with all its properties everytime.
So it would make sense to just add a class to your <h3> like so:
HTML
<h3 class="blue-bg tick">About You</h3>
CSS
h3.blue-bg {
background: blue;
/* and what else you need */
}
h3.tick:after {
content: '';
background-image: url("/path/to/your/image-tick.svg");
/* you need to define the dimensions: */
background-size: 18px 18px;
width: 18px; height: 18px;
/* and what else you need */
}
So you can just add your defined class to every element instead of a huge junk of HTML.
Complete Snippet to try out and fiddle with:
h3.blue-bg {
background: #21abe2;
/* and what else you need */
font-family: helvetica, arial;
font-size: 18px;
color: #fff;
margin: 0;
padding: 5px 10px;
}
h3.blue-bg.dark {
background: blue;
font-style: italic;
}
h3.tick:after {
content: '';
background: transparent url("https://upload.wikimedia.org/wikipedia/commons/2/27/White_check.svg") no-repeat center;
background-size: 18px 18px;
/* and what else you need */
display: block;
float: right;
width: 18px;
height: 18px;
}
<h3 class="blue-bg tick">About You</h3>
<br/>
<h3 class="blue-bg tick">Another crazy Headline</h3>
<br/>
<h3 class="blue-bg dark tick">Even with other styles defined</h3>
This container stubbornly refuses to center. Demo: http://codepen.io/Diego7/pen/KzXgZN
I've tried just about every centering code I can find on the web, to no avail.
Removing width: 90%; from the css aligns the container to the left, even though margin: 0 auto; is telling it to center.
Sorry if this question isn't up to StackOverflow's 'standards', but codingforums.com are down at the moment :(
Thanks heaps!
HTML
<div class="container">
<article>
<header>
<img src="https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png" width="972px"><br />
<h2>Information</h2>
</header>
<p>There's currently is no information available. Sorry.</p>
<footer>
© 2016
</footer>
</article>
</div>
CSS
##import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;
background: #fff;
}
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
background: #fff;
border-radius: 6px;
box-sizing: container-box;
}
article header h2 {
color: #282828;
font-size: 1.2em;
font-weight: normal;
display:inline;
line-height: 1.3;
}
article p {
font-size: 1em;
display:inline;
line-height: 1.5em;
color: #282828;
max-width: 972px;
}
article footer {
font-size: .9em;
display:inline;
color: #999;
}
a {
color: #2790ae;
text-decoration: none;
outline: none;
}
a:hover {
color: #0f6780;
}
Your .container is already centered: if you change background to red you will see it. And, if you add text-align property its content will be centered too.
.container {
list-style:none;
margin:0 auto;
width:90%;
padding-top: 20px;
border-radius: 6px;
box-sizing: container-box;
text-align:center;
background: red;
}
If you make the width a bit narrower (like 70%), you see that it IS centered.
by the way: " list-style:none;" has no effect whatsoever, and "box-sizing: container-box;" should be "box-sizing: content-box;"
Looks like you're centering the <div class="container">, but it doesn't look like it, because you're looking at the image.
If you want the image to take up the entire <div> element (so that any centering takes effect on both), try something like the following, instead of using an <img> element:
div.container {
background-image: url(https://softwarereviews.files.wordpress.com/2016/04/bg-header-no-logo.png);
}
There are other properties you can use to fiddle with precisely how the image is displayed. You can find more info here.
If you are using container after float tag. It can create problem sometimes. So to avoiding this user <div class="clear"></div>. Also clear class properties would be:
.clear{
clear:both;
margin:0px;
padding:0px;
height:0px;
font-size:0px;
line-height:0px;
float:none;
}
Hope it will be helpful..