I need help getting my H1s to align. My code is below. An image of it is also below. I would like for the Spencer Hiltbrand bit at the top to be all the way to the right. The Beautiful Websites, Inspiring Photography part the same it is now. I am using Bootstrap.
Homepage:
.intro {
color: white;
font-weight: 600;
text-align: left;
font-size: 80px;
margin-left: 45px !important;
padding-top: 380px;
}
.name {
text-align: right !important;
}
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
<h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
</div>
</div>
</div>
</section>
The following line of HTMl you have is invalid:
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h4>
You're starting with an h1 tag but never closing it because you try to close it with an h4 tag. This may be causing part of your issue if styles aren't working.
To answer your actual question, an easy way to get your top brand/text to the right is simply to use float: right instead of text-align: right.
If you need to align the heading all to the right, then you need to get rid of container, row and col-lg-12 because they introduce padding and margins. The heading's margin-top has been changed little from the top. Please have a look at the HTML, CSS and its working demo.
HTML
<!-- Intro Section -->
<section id="intro" class="intro-section">
<div>
<h1 class="name"><span class="red">Spencer</span> Hiltbrand</h1>
<h1 class="intro"><span class="red">Beautiful</span> Websites, <br>and <span class="red">Inspiring</span> Photography</h1>
</div>
</section>
CSS
.intro {
color: white;
font-weight: 600;
text-align: left;
font-size: 80px;
margin-left: 45px !important;
padding-top: 380px;
}
.name {
text-align: right;
margin: 5px 0 0 0;
}
Still if you have to make use of bootstrap's container, row and col-*, then you need to modify the existing html.
Related
For some reason, I was able to achieve what I wanted earlier in the day, but now when I am trying to re-create my code, it won't replicate.
I want two header elements, h2 and h3, centered-aligned in one div row, within the jumbotron section.
Then, I want to add bottom-margin to the h3 element to lift it slightly above the h2 element, like in the photo.
I still have my original code in hand, but even after copynpasting the exact code with the same styling, the h3 element ends up being directly below h2.
I have tried cross-referencing with dev tools, and i found that the only difference is the div row containing the h2 and h3 elements is missing display:flex, but it's still not working.
what i want to happen
what is happening
Original Working Code:
HTML:
<section class="jumbotron">
<div class="container">
<div class="row">
<h2>Jumbotron</h2>
<h3>Bootstrap</h3>
</div>
</div>
</section>
CSS:
.jumbotron {
display: flex;
align-items: center;
background-image: url('https://images.unsplash.com/photo-1665956600293-4511bd26ea98?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2787&q=80');
background-size: cover;
color: #ffffff;
height: 400px;
}
.jumbotron h2 {
font-size: 60px;
font-weight: 700;
margin: 0;
color: ;
}
.jumbotron h3 {
margin: 0 0 20px;
color: #fff;
}
Thank you for your help!
change row class with d-flex like
<section class="jumbotron">
<div class="container">
<div class="d-flex">
<h2>Jumbotron</h2>
<h3>Bootstrap</h3>
</div>
</div>
</section>
I'm following this CSS guide:
https://www.youtube.com/watch?v=1GNGtLbRyI4&list=PLr6-GrHUlVf8JIgLcu3sHigvQjTw_aC9C&index=66
and when I replicate the CSS code, I get this problem: the two elements don't align vertically on the row, like shown in the image.
Here's the screenshot of the problem:
I tried changing margin, padding of the two div element but I can't get it to work. When I use inspect element, the margins are just fine, I just see that in that space between the main content and the navigation bar I can select what seems to be a blank character. I would like to follow the tutorial exactly as it is and keep things simple, and I don't understand why it doesn't work on my end.
HTML:
<body>
<div id="header"></div>
<div id="navbar"></div>
<div class="sideright">
<p>Links here</p>
</div>
<div class="maincontent">
<p>Content here</p>
</div>
</body>
CSS:
body {
background-color: #757CA4;
margin: 0px;
font-family: 'Open Sans', sans-serif, verdana;
font-size: 14px;
}
#header {
background-color: #323A6F;
margin: 10px;
border-radius: 5px;
height: 80px;
}
#navbar {
background-color: #323A6F;
margin: 10px;
border-radius: 5px;
height: 35px;
}
.maincontent {
background-color: #D1D3E2;
margin: 10px 320px 10px 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
.sideright {
background-color: #D1D3E2;
margin: 0px 10px 10px 10px;
border-radius: 5px;
padding: 20px;
font-size: 105%;
float: right;
width: 260px;
}
You seemed to have had an odd space after the closing tag of <div class="sideright"> that showed up when I copied the HTML into the environment. It showed up as a /ufeff in codepen. When I removed it, it worked.
Check my codepen and you'll see the layout you want.
https://codepen.io/tylerp33/pen/QYNLWN
<body>
<div id="header"></div>
<div id="navbar"></div>
<div class="sideright">
<p>Links here</p>
</div>
<div class="maincontent">
<p>Content here</p>
</div>
</body>
Copy paste what is above and you should be fine.
EDIT: Correction; the character that I removed in codepen is Unicode Character , which is 'ZERO WIDTH NO-BREAK SPACE' or U+FEFF. You may have copied the code without knowing it using copy/paste. Also, now you know your current text editor is not displaying unicode characters (oddly enough, mine isn't either).
Here is a helpful solution that I stumbled upon:
One option is to open the file in a very basic text editor that
doesn't understand unicode, or one that understands it but has the
ability to display any non-ascii characters using their actual codes.
Once you locate it, you can delete the small block of text around it
and retype that text manually.
Hope this helps!
Here i upload the picture, i want to put my image to the left side of Food and Travel text
.block-title h3 {
color: #151515;
font-family: 'Montserrat', sans-serif;
font-size: 36px;
font-weight: 700;
line-height: 1.4;
letter-spacing: -0.9px;
margin-bottom: 24px;
margin-top: 50px;
padding-bottom: 13px;
position: relative;
text-align: center;
}
<div class="col-lg-12">
<p>
<center><img src="#">
<div class="block-title">
<h3>Food & Travel</h3>
</div>
</center>
</p>
</div>
You just need to add that line of CSS
div.block-title { display: inline-block; }
<div class="col-lg-12">
<p>
<center><img src="#">
<div class="block-title">
<h3>Food & Travel</h3>
</div>
</center>
</p>
</div>
I would change your HTML a little bit:
<div class="col-lg-12">
<div class="block-title">
<img class="image" src="https://image.flaticon.com/icons/png/512/45/45260.png">
<h3 class="title">Food & Travel</h3>
</div>
</div>
Some observations about your HTML:
Since the creation of CSS, it is considered a bad practice to use styling elements inside HTML, like center. HTML should hold only content and CSS styles. center in HTML can be, in most cases, easily replaced by text-align: center in CSS;
Avoid giving styles to a tag (as you did with H3). It is always better to give a class for each individual element you want to style. For example, you can give a class to your image and to your header, as I did on the example above.
Float, as mentioned by some users here, is barely a good option. I would not recommend it.
I'd go for using Flexbox on the container (block-title). It is the better option and the most accurate.
Your container would be something like
.block-title {
display: flex;
justify-content: center;
align-items: center;
}
... and the magic is done!
Here is an example using flexbox:
https://codepen.io/annabranco/pen/mzEXGv
Another option if you are not comfortable with using Flebox yet, it's to give the H3 a display: inline. By default, all header force a line break (they have display: block). If you change it to display: inline you force the other elements to be displayed in the same line as your header.
In this case you would need to play around with vertical-align to find the exact spot where your text would be centered to the image.
.title {
display: inline;
(..)
}
.image {
vertical-align: -25px; //negative values go up and positive down.
}
Here is an another example, using inline:
https://codepen.io/annabranco/pen/yRJvQa
The headertext font size changes but it won't be centered. Only just started learning HTML so this is likely a rookie mistake. Any advice is appreciated, thanks!
.main {
margin-left: 220px; /* Same as the width of the sidenav */
margin-top: 20px; /* Same as the width of the sidenav */
font-size: 20px; /* Increased text to enable scrolling */
}
.main headertext {
font-size: 45px;
text-align: center;
}
<div class="main">
<headertext>ExampleTitle</headertext>
<p>Welcome to my website.</p>
</div>
headertext is not a valid HTML element. Change it to a div with a class of headertext and I think that fixes your issue, snippet below:
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
.main .headertext {
font-size: 45px;
text-align: center;
}
<div class="main">
<div class="headertext"> ExampleTitle </div>
<p> Welcome to my website.</p>
</div>
Your problem is there is no <headertext> element. You need to use <h1> (biggest) to <h6> (smallest). If you want it centered, use the following CSS:
h1 {
margin-left: auto;
margin-right: auto;
}
Actually, if you want to it to act as a title (semantically) you should probably give it a h1 tag instead. Like so
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
h1 {
font-size: 45px;
text-align: center;
}
<div class="main">
<h1> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
This will tell the browser and people who use screenreaders that it's actually a title. You may benefit from reading up on html tags. This is a useful link and whilst it may seem overwhelming, you'll get used to it pretty quickly. https://www.w3schools.com/tags/ref_byfunc.asp
There is no element called headertext. Instead you can user header which is whole wrapper in standard or h1/h2/h3/h4/h5/h6 which are commonly used to represent headings.
In your code if you want to follow the first heading you can follow the following code:
.main {
margin-left: 220px;
margin-top: 20px;
font-size: 20px;
}
.header-text {
font-size: 45px;
text-align: center;
}
<div class="main">
<h1 class="header-text"> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
But it seems in-align with other contents. I guess you are looking for the following.
.main {
/*margin-left: 220px;*/ //remove this line
margin-top: 20px;
font-size: 20px;
text-align: center; //added this line
}
.header-text {
font-size: 45px;
/* text-align: center; */
}
<div class="main">
<h1 class="header-text"> ExampleTitle </h1>
<p> Welcome to my website.</p>
</div>
I added both way that you can try for now. But still there is many ways to give you a solution. Happy journey on HTML,CSS
I start to learn HTML and on my website in the middle of the top there should be a heading in the center. In the left top corner, there is a picture.
If I want to set the heading with align="center"; into the middle I can only set it into the middle between the right end of the picture and the right end of the Display...
I hope it's understandable and someone can help me!
The code is:
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 align="center" style="margin-top:15px; margin-bottom:20px;"><u>Peter Möhle</u></h1>
</p>
enter image description here
It should look like the Picture at the Bottom but this was made mith margin-left and isnt a fixed Position if i use another browser or display
I've updated your snippet as you are using deprecated tags. Happy to hear and clear your doubts, if you have any.
Ref: W3 CSS, W3 HTML
.nav {
width: 100%;
}
.logo-holder {
float: left;
height: 50px;
width: 100px;
}
.logo {
height: 100%;
width: 100%;
}
.nav-text {
text-align: center;
text-decoration: underline;
}
<div class="nav">
<div class="logo-holder">
<img class="logo" src="bilder/logo.jpg" />
</div>
<div class="nav-text">
<h1>Peter Möhle</h1>
</div>
</div>
You can use text-align: center; to centre text, but as mentioned in the comments you are using some deprecated tags.
<h1 style="margin-top: 15px; margin-bottom: 20px; text-align: center; text-decoration: underline;">Peter Möhle</h1>
It's even better to remove the style attribute and create a css file to put the styles in.
CSS
h1 {
margin-top: 15px;
margin-bottom: 20px;
text-align: center;
text-decoration: underline;
}
I'd also change the div markup to
<div style="float: left; width: 600px; height: 152px;">
<img src="bilder/logo.jpg" style="height: 54px; width: 214px;">
</div>
I've used padding to the left now using relative value
<div style="float:left; width=600px; height=152px;">
<img src="bilder/logo.jpg" height="54px" width="214px" hspace="0" vspace="0"/>
</div>
<p>
<h1 style="margin-top:15px; margin-bottom:20px; padding-left: 50% "><u>Peter Möhle</u></h1>
</p>