I am confused by the margin when I write the code:
Section {
background-color: #FFFFFF;
width="100%";
}
p1 {
font-family: Roboto;
font-size: 22px;
font-height: 1px;
margin-top: 45px;
margin-left: 165px;
}
p2 {
font-family: Roboto;
font-size: 22px;
font-height: 1px;
margin-top: 10px;
margin-left: 165px;
}
<section>
<p class="p1"> Content 1 </p>
<p class="p2"> Content 2 </p>
</section>
However, when I don't add the display, the background in section will not cover all the content. when I add the display: inline-block, it will cover but it will have the same first situation when I change display:inline-block to display: inline or display:block. So everyone can explain me what is happening please?
Add overflow:auto or overflow:hidden or overflow:scroll.
section {
background-color: red;
width: 100%;
overflow:auto; // added
}
.p1 {
font-family: Roboto;
font-size: 22px;
margin-top: 45px;
margin-left: 165px;
}
.p2 {
font-family: Roboto;
font-size: 22px;
margin-top: 10px;
margin-left: 165px;
}
<section>
<p class="p1"> Content 1 </p>
<p class="p2"> Content 2 </p>
</section>
The only issue is with you misused the double quotes in the width property of your section CSS, also the class selectors in your css haven't started with ".", so just update your css it will definately work.
Related
I want to move the text "Hi" downwards because the PNG file makes it separate too much from the rest of the text.
body {
background-color: #1d1d1d;
}
.content {
padding-top: 200px;
padding-bottom: 200px;
padding-left: 100px
}
.content > h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
}
<article id="main" class="content">
<h1>Hi, <br/>
I'm <img src="../Sources/Untitled-2.png" alt="V">ictor,
<br/> just another Video Editor.
</h1>
</article>
You can add a <p> tag to your "Hi," to be able to refer to that part of the text only. In this case, I added a class as well <p class="hiText">Hi, </p>.
Then in the CSS, I referred to the hiText class and applied the following properties:
position: absolute; This sets the position of the text to absolute.
padding-top: -40px; This moves the text downwards. You can change 40px to any desired number and/or measurement unit.
Hope this answers your question!
body {
background-color: #1d1d1d;
}
.content {
padding-top: 200px;
padding-bottom: 200px;
padding-left: 100px
}
.content > h1 {
color: white;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
}
.hiText {
position: absolute;
padding-top: -40px;
}
<article id="main" class="content">
<h1><p class="hiText">Hi, </p><br/>
I'm <img src="../Sources/Untitled-2.png" alt="V">ictor,
<br/> just another Video Editor.
</h1>
</article>
I put "Hi," in a <p class="hiText"> </p> and then used
.hiText {
position: relative;
top: 38px;
}
This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 4 years ago.
Okay so, Building an account page, and using the same kind of method we normally use when constructing pages, we seem to have this issue where it's like a large white block/space is in the background, so essentially some kind of element or div with white background colour. Only issue is, there isn't anything that should be causing this, and it most certainly isn't the body.
See image
(minor details aside, it is not finished as work has stopped due to this issue!)
The account and operative buttons elements (columns) are supposed to have a white background, while the background behind these two divs should be green. We assumed this would be the body.
body {
font-family: 'nunito', sans-serif;
/*width: 100%;*/
height: 100%;
background-color: #049E84 !important;
overflow: hidden;
align-content: center;
float: inherit;
margin-top: 0;
}
#account {
margin-top 100px;
padding: 50px;
margin-bottom: 100px;
/* font-family: 'nunito', sans-serif; */
/* float: inherit;*/
/* width: 70%;*/
/* margin-left: 19%;*/
/* margin-top: 0;*/
align-content: center;
background-color: #049E84;
}
#info {
text-align: center;
width: 60%;
height: 75%;
background-color: white;
padding: 25px;
font-family: 'nunito', sans-serif;
font-size: 35px;
color: dimgrey;
float: left;
border-radius: 60px;
}
#operativeButtons {
text-align: center;
padding: 25px;
margin-left: 30px;
background-color: white;
border-radius: 60px;
width: 15%;
height: 75%;
float: right;
}
#yourAccount {
font-family: 'nunito', sans-serif;
font: bolder;
color: #282828
}
#valid {
color: grey;
padding-top: 20px;
font-weight: bold;
}
#tickets {
color: #049e84;
}
#warning {
color: #ff0000;
}
#uname {
display: inline;
}
p {
line-height: 1;
}
.title {
padding-top: 10px;
color: black;
}
#bg {
background-color: #049e84;
}
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<div id="bg">
<div id="account">
<div id="info">
<div id="yourAccount">
YOUR ACCOUNT</div>
<hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />
<p class="title">Username:</p>
<p id="username" class="details"></p>
<p class="title">Name:</p>
<p id="name" class="details"></p>
<p class="title">Email:</p>
<p id="email" class="details"></p>
<p class="title">Phone:</p>
<p id="phone" class="details"></p>
<p class="title">Address:</p>
<p id="address" class="details"></p>
<p class="title">Your Tickets:</p>
<p id="tickets" class="details"></p>
<p id="valid"></p>
<hr style="height:1px;border:none;color:#049e84;background-color:#049e84;" />
</div>
<div id="operativeButtons">
<p id="home">Home</p>
<p id="logout">Logout</p>
<p id="deleteaccount">Delete Account</p>
<p id="warning">WARNING:</p>
<p id="warningmessage">Deleting your account will entirely erase all your data from our database. By
clicking, you acknowledge this. <br> All tickets will be erased</p>
</div>
</div>
</div>
Please note in the code above that the html and body tags are closed later after the PHP, this isn't the issue. :)
any help would be greatly appreciated, I am completely perplexed! That being said though, I'm also very tired.
Looks like you lack a clear of the floats, that's why the parent element (#account) does not get the expected height.
You can use a clear fix like this:
#account:after {
content: "";
display: table;
clear: both;
}
more info here:
https://css-tricks.com/snippets/css/clear-fix/
Another dirty way to do it is adding <br clear="all"/>. before closing #account.
I have two lines of text that compose a title and date section for small little blog I'm making. I want to adjust the vertical distance between the two so that the second line of text is almost directly underneath the first. As it stands right now, there is a giant gap between the two. What is the standard fix for this? I have tried adjusting the position variable in the past, but it always makes the resizing of my website wonky. I would prefer not to mess with this. Thanks!
.StoriesTitle {
font-size: 25px;
margin-left: 23%;
height: 10px;
}
.chinese {
font-family: "Yu Gothic";
font-weight: normal;
}
.StoriesDate {
padding-bottom: 10pt;
font-size: 12pt;
margin-left: 1pt;
}
<section class="stories">
<div class="StoriesTitle">
<h2>Title Length</h2>
<div class="StoriesDate">
<h3>2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span</h3>
</div>
</div>
</section>
Just remove the margin from h2 and h3 tags and add height: auto to your StoriesTitle class.
h2, h3 {
margin: 0;
}
.stories {
margin-top: 15px;
}
.StoriesTitle {
font-size: 25px;
margin-left: 23%;
height: auto;
}
.chinese {
font-family: "Yu Gothic";
font-weight: normal;
}
.StoriesDate {
padding-bottom: 10pt;
font-size: 12pt;
margin-left: 1pt;
}
<section class="stories">
<div class="StoriesTitle">
<h2>Title Length</h2>
<div class="StoriesDate">
<h3>2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span></h3>
</div>
</div>
</section>
.StoriesTitle h2 {
margin-bottom: 0;
}
.StoriesDate h3 {
margin-top: 0;
}
Try to remove the margin of your h2 and h3 elements
.StoriesTitle {
font-size: 25px;
margin-left: 23%;
height: 10px;
}
.chinese {
font-family: "Yu Gothic";
font-weight: normal;
}
.StoriesDate {
padding-bottom: 10pt;
font-size: 12pt;
margin-left: 1pt;
}
.StoriesTitle > h2, .StoriesDate > h3 {
margin: 0px;
}
<section class="stories">
<div class="StoriesTitle">
<h2>Title Length</h2>
<div class="StoriesDate">
<h3>
2018<span class="chinese">年</span>09<span class="chinese">月</span> 28<span class="chinese">日</span>
</h3>
</div>
</div>
</section>
Can someone please help me out why my "desc" content is not right under my title in the banner? I have posted my CSS and HTML code. I have also posted the photo of how the outcome looks.
#bannerBottom {
border: 5px #0087dd solid;
margin-top: 30px;
margin-bottom: 50px;
}
#bannerImg {
width: 150px;
margin-top: 7px;
margin-left: 10px;
display: inline-block;
}
#bannerContent {
display: inline-block;
vertical-align: top;
margin-left: 20px;
}
#bannerContent>span {
font-size: 20px;
font-weight: bold;
font-family: arial;
color: steelblue;
display: inline-block;
}
#desc {
font-family: arial;
display: inline-block;
margin-left: 190px;
}
<div id="bannerBottom">
<img id="bannerImg" src="http://www.placehold.it/100x100">
<p id="bannerContent">
<span>The Big 3 - HTML, CSS, JavaScript</span>
</p>
<p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>
You can float your image left instead of making it an inline-block element. Also there'd be no need to make the paragraph an inline-block either.
#bannerBottom {
border: 5px #0087dd solid;
margin-top: 30px;
margin-bottom: 50px;
}
#bannerImg {
width: 150px;
margin-top: 7px;
margin-left: 10px;
float: left;
}
#bannerContent {
display: inline-block;
vertical-align: top;
margin-left: 20px;
}
#bannerContent>span {
font-size: 20px;
font-weight: bold;
font-family: arial;
color: steelblue;
display: inline-block;
}
#desc {
font-family: arial;
margin-left: 190px;
}
<div id="bannerBottom">
<img id="bannerImg" src="http://www.placehold.it/100x100">
<p id="bannerContent">
<span>The Big 3 - HTML, CSS, JavaScript</span>
</p>
<p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>
Surely it is because you have:
#desc {
margin-left: 190px;
}
... which means the box isn't fitting under the title, so it is getting shunted underneath. Either way, float the image left and don't have margin-left.
try this:
<div id="bannerBottom">
<div class="container-banner-img">
<img id="bannerImg" src="http://www.placehold.it/100x100">
</div>
<div class="container-banner-content">
<p id="bannerContent">
<span>The Big 3 - HTML, CSS, JavaScript</span>
</p>
<p id="desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!
</p>
</div>
</div>
CSS
#bannerBottom {
border: 5px #0087dd solid;
margin-top: 30px;
margin-bottom: 50px;
}
#bannerImg {
width: 150px;
margin-top: 7px;
margin-left: 10px;
display: inline-block;
}
#bannerContent {
display: inline-block;
vertical-align: top;
margin-left: 20px;
}
#bannerContent>span {
font-size: 20px;
font-weight: bold;
font-family: arial;
color: steelblue;
display: inline-block;
}
#desc {
font-family: arial;
display: inline-block;
margin-left: 190px;
}
.container-banner-img {
float: left; /* <- pay attention on this line */
width:25%;
}
.container-banner-content{
width: 70%;
}
}
If you don't want to go the flexbox route you can float the image and keep your heading and description block level.
I took a few liberties with the markup and CSS selectors, changing them from IDs to classes and other improvements to streamline everything.
.entry {
font-family: Arial, sans-serif;
border: 5px solid #0087dd;
margin: 30px 0;
}
.entry-img {
float: left;
max-width: 150px;
margin: 10px;
}
.entry-title {
font-size: 20px;
color: steelblue;
}
.entry-desc {
margin: 10px;
}
<div class="entry">
<img class="entry-img" src="http://www.placehold.it/100x100">
<h2 class="entry-title">The Big 3 - HTML, CSS, JavaScript</h2>
<p class="entry-desc">While the server can process information in many different languages, the file that they serve to the client are always going to be some combination of HTML, CSS, and JavaScript!<br>Learn more about the Big 3 here!</p>
</div>
I have a CSS greybox: (When I say greybox, I mean the CSS box I have created that I have made with the color grey as you can see down below.)
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
}
This greybox is inside of my header and since this greybox is bigger than it appears, it goes past the header image but doesn't appear.
With this:
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
The picture and Mail Us show in the correct position not exposing the box. The test however, when I put it in exposes the box.
Here is the CSS I have behind this
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
margin-left: 500px;
}
You already saw the box for CSS.
I would like to accomplish either one of two things: Make the CSS box smaller and lower it, or have the CSS correctly position the test along with more elements to stay in the same line as the Mail Us.
NOTE: I have tried for the test margin-top:-pixels, this does not go up high enough and stops going up after a while.
This is what it looks like with the test:
This is what it looks like without the test:
As you can notice the first one has a larger box that drops down beneath the header picture. The one without the test has stayed in the header's picture.
There are a few problems with your code.
First, you should not nest anchors (<a>) in other anchor elements.
Using margin to position elements is not a good idea, you are already trying to use inline-block to change default block display of headers and at the same time you are floating one of your inline-block elements to the right.
Adding big margin to the element makes the element use more space and moves next inline element to the new line if it cannot fit in one line with other elements.
If you want to position all your menu items to the right you can use text- align:right on your inline-block elements to stick them to the right.
If you want your mail element be on the right you may stick to using float:right on it, but it would also be easier to just place mail element as the last one in the nav
You can nest anchors <a> inside headers <h1> to create links inside headers
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"></h1>
http://jsbin.com/kazocekoba/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
float: right;
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to separate your navigation elements */
.navigation > * {
padding-left: 2em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- --><img id="mailpicture" src="images/gmail.png">
<h1 id="mailtext">Mail Us</h1>
<h1 id="nava">test</h1>
</nav>
</div>
</a>
</div>
A bit better solution http://jsbin.com/xunokaviju/1/
.navigation-div
{
margin-top: 14px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.47);
padding: 0;
color: #E3E3E3;
background-color: #333;
text-align: right;
}
#mailtext
{
margin-top: 20px;
display: inline-block;
/* margin-left: 1230px;*/
font-size: 20px;
color: white;
font-style: italic;
}
#mailpicture
{
display: inline-block;
margin-top: 16px;
/*float: right;*/
}
#nava
{
font-size: 20px;
color: white;
font-weight: bold;
font-style: italic;
margin-top: 20px;
display: inline-block;
/*margin-left: 500px;*/
}
/* use padding to pad elements */
.navigation > * {
padding-left: 1em;
}
<div class="navigation-bar">
<a class="navigation-div-blur">
<div class="navigation-div">
<nav class="navigation">
<!-- -->
<h1 id="nava">test</h1>
<h1 id="mailtext">Mail Us <img id="mailpicture" src="images/gmail.png"> </h1>
</nav>
</div>
</a>
</div>
In #mailtext the margin-left:1230 is the problem. Keeping your code just as it is the only change you'll have to make looks like this:
#mailtext
{
float: right;
font-size: 20px;
color: white;
font-style: italic;
}
change your
#mailtext
{
margin-top: 20px;
display: inline-block;
margin-left: 1230px;
font-size: 20px;
color: white;
font-style: italic;
}
to
#mailtext
{
margin-top: 20px;
display: inline-block;
float:right;
font-size: 20px;
color: white;
font-style: italic;
}
Hope it solves your problem