Friends, I have a div with text inside my header, but I want to push that div so it rests on the bottom of my header window. what would be the best way to do it, thank you very much in advance.
So far it looks like this:
#head {
border: solid black 1px;
text-align: center;
background-image: url("../images/interior1.jpg");
background-size: cover;
background-repeat: no-repeat;
color: #f8f6f0;
height: 50vh;
}
<body>
<header id="head">
<div id="text">
<h1>Nagoya Express</h1>
<p>
<h2>Your Way to More Ecofriendly and Economical Personal Trasportation</h2>
</p>
</div>
</header>
</body>
Okay, you have two the best options:
Add position: relative for #head and position: absolute for #text. And to next you need set bottom: 0; for #text.
Second option is using display: flex for #head and set align-items: flex-end.
Both solutions are presented in the example below:
.head {
height: 500px;
border: 1px solid red;
}
.text {
background: green;
}
.head--position {
position: relative;
}
.head--position .text {
position: absolute;
bottom: 0;
}
.head--flex {
display: flex;
align-items: flex-end;
}
<body>
<header class="head head--position">
<div class="text">
<h1>Nagoya Express</h1>
<p>Your Way to More Ecofriendly and Economical Personal Trasportation</p>
</div>
</header>
<header class="head head--flex">
<div class="text">
<h1>Nagoya Express</h1>
<p>Your Way to More Ecofriendly and Economical Personal Trasportation</p>
</div>
</header>
</body>
It is good to pay attention to the fact that selectors should be styled by the class, not by the id.
Related
Using the 98.css library: https://jdan.github.io/98.css/
I'm currently trying to fit the bottom element status-bar at the bottom of the box with its width set to stretch to the entire box's width. I feel like I'm doing it incorrectly and/or not doing it properly via percentages in .width-stretch.
The result is this:
Note that it is somehow overlapping the bottom-right edge of the box. When I try making the width: 99%, it gets pretty close to what I want but not quite, and it is left-aligned (and not centered). I'm trying to figure out a more elegant solution that fixes this issue; any suggestions? I'm also open to any CSS frameworks that can run alongside 98.css to make styling easier. Thanks!
...
<style>
html, body {
margin:0px;
background: #c0c0c0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top:0px;
right:0px;
bottom:0px;
left:0px;
}
.relative-position {
position: relative;
width: auto;
}
.bottom {
position: absolute;
bottom: 0;
padding-bottom: 4px;
}
.width-stretch {
width: 100%;
}
</style>
</head>
<body>
<!-- MAIN -->
<div class="center">
<div class="window relative-position" style="width: 95%; height: 95vh;">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar bottom width-stretch">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
</div>
</body>
</html>
You can use flex-direction:column on .window, with flex:1 on the .window-body so that it fills all the available vertical space.
html,
body {
margin: 0px;
background: #c0c0c0;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
}
.window {
display: flex;
flex-direction: column;
}
.window-body {
flex: 1;
}
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="center">
<div class="window " style="width: 95%; height: 95vh;">
<div class="title-bar">
<div class="title-bar-text">A Window With A Status Bar</div>
</div>
<div class="window-body">
<p> There are just so many possibilities:</p>
<ul>
<li>A Task Manager</li>
<li>A Notepad</li>
<li>Or even a File Explorer!</li>
</ul>
</div>
<div class="status-bar">
<p class="status-bar-field">Press F1 for help</p>
<p class="status-bar-field">Slide 1</p>
<p class="status-bar-field">CPU Usage: 14%</p>
</div>
</div>
</div>
Add these styles to the inside of the style tag.
.status-bar {
display: flex;
}
.status-bar-field {
flex: 1;
padding: 0 10px;
border: 1px solid black;
}
I have a footer with four icons and they lie on top of each other. My aim is to arrange the four icons side by side. I tried different things but nothing worked. Either I have the icons all at one point in the middle, the left side at the bottom or vertical in a row. Would ne nice to get some help for that!:)
<style>
.i{
margin: 50px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
float: left;
}
</style>
<body>
<p class="container" div align="center" class = "i">
<img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
<p class = "i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>
<div class = "footer">
<p><img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord"></p>
<p><img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord"></p>
<p><img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail"></p>
<p><img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads"></p>
</div>
</body>
</html>
First of all, it doesn't make sense to use this if there will only be an image inside the "p" tag. I removed them.
We created a new element named ".footer--icons" in the footer and included all the images.
The next is easy, we set the Element to "display:flex" and align it all side by side.
See: excellent article about flex-box
Also with "align-items" we have centered them all on the "Y" axis and with "justify-content" we have centered them all on the "X" axis relative to their parent.
.i {
margin: 50px;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
float: left;
}
.footer--icons {
display: flex;
align-items: flex-center;
justify-content: center;
}
.footer--icons > img {
margin: 5px;
}
<p class="container" div align="center" class="i">
<img src="static/website/media/profile.jpg" class="rounded-circle" alt="My image" width="254" height="186"></p>
<p class="i" div align="center">I am a 20 years old computer science student from Berlin. Let's go for a walk!</p>
<div class="footer">
<div class="footer--icons">
<img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
<img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">
</div>
</div>
Just use CSS flex-blox and .footer as your container.
.footer {
display: flex;
justify-content: center/flex-start;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
float: left;
}
With justify-content you can control your flex-items either on center or left side of the parent container which is what you want to happen.
Add the following to you css footer class:
display:flex;
flex-direction:row;
Remove the paragraph tags:
<div class = "footer">
<img src="static/website/media/iconfinder_4691356_discord_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_1964405_linkedin_logo_media_social_icon.svg" alt="discord">
<img src="static/website/media/iconfinder_4202766_email_gmail_mail_icon.svg" alt="gmail">
<img src="static/website/media/iconfinder_287723_goodreads_icon.svg" alt="goodreads">
</div>
Then amend your .footer class to the following:
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
display: flex;
}
To center the images, add justify-content: center to the footer class.
To distribute them evenly, add justify-content: space-between.
For a complete guide to flexbox (display: flex), you can check this article out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
I'm trying to put a logo on the top left corner, and text parallel to the logo (top center).
The text should have the same distance from both sides of the page regardless of the logo.
I tried adding around "display: table; display: table-cell; position: relative; position: absolute;"
But the best I can get is text being centered but not on the same line as the logo but a bit low.
html:
<header class="header">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
css:
.header {
border: 2px solid black;
width: 100%;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
}
example image:
You could use position: absolute; and i've added the position to the title and gave it a wrapper together with the image so you can move them together.
I've also added some margin to show you the title stays centered
.header {
border: 2px solid black;
width: 100%;
position: relative;
}
.wrapper {
width: 100%;
position: relative;
margin: 30px 0;
}
.logo {
display: flex;
}
.logo img {
width: 80px;
}
.header-text {
text-align: center;
position: absolute;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
<header class="header">
<div class="wrapper">
<div class="logo">
<img src="https://via.placeholder.com/150" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</div>
</header>
use flexbox!
.header {
border: 2px solid black;
width: 100%;
display:flex;
justify-content:space-between;
align-items:center;
}
img ,#spacer{
width: 80px;
}
.header-text {
text-align: center;
}
<header class="header">
<img src="https://via.placeholder.com/150" alt="a logo">
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
<div id='spacer'></div>
</header>
There a numerous ways to go about this; I'll describe one method here.
Basically, you need to get the logo out of the layout flow so that the text can be centered without being affected by it. the easiest way to do this is by adding position: absolute to the logo.
Thus, a complete example might look like:
.header {
/* Allows the logo to be positioned relative to the header */
position: relative;
/* Centers the text — can be done other ways too */
text-align: center;
}
.header .logo {
position: absolute;
left: 0;
}
A JSFiddle Example: https://jsfiddle.net/g01z27tv/.
Keeping Proper Alignment
If you want to keep the logo and the text properly (vertically) aligned, flexbox will be your friend here.
First, ensure that the header is taller than the logo will be; otherwise the logo will be cut off.
Next, create a wrapper <div> for your logo. In your case:
<header class="header">
<div class="logo-wrapper">
<div class="logo">
<img src="logo.gif" alt="a logo">
</div>
</div>
<!-- ... -->
</header>
Now, add some styles for .logo-wrapper. Namely:
cause it to expand to fill the height of the header,
make it a flex container,
make its items' vertically centered,
make it position: absolute, and
position it to the left of the header:
.logo-wrapper {
height: 100%;
display: flex;
align-items: center;
position: absolute;
left: 0;
}
Note that you should now remove position: absolute and left: 0 from .logo, since we are positioning the wrapper instead.
Lastly, in order to properly align the text, we'll use flexbox on .header:
.header {
display: flex;
justify-content: center; /* Use this instead of text-align: center */
align-items: center;
}
You'll note now that even when you make the logo taller—as long as the header is taller—everything stays aligned.
An Update JSFiddle Example: https://jsfiddle.net/oL5un8gb/.
Note: I created a separate wrapper <div> in this example; in your case you probably don't need to because you have a separate <div> and <img> already. You might be able to get it to work without an extra element.
.header {
border: 2px solid black;
width: 100%;
}
.logo {
float: left;
}
.header-text {
text-align: center;
position: absolute;
width:100%;
margin: auto;
}
.header::after {
content: "";
clear: both;
display: table;
}
<header class="header">
<div class="logo">
<img src="https://via.placeholder.com/75" alt="a logo">
</div>
<div class="header-text">
Some text that is supposed to be centered in viewport
</div>
</header>
As suggested in comments I have edited the text to be centred to 100% width.
I'm trying to jump to a section of a web page but...
I want to jump to the center of it (rather than have the top of the page be the top of the section)
Is there any way to do this?
I was thinking if there was some kind of #section + 50px kind of thing?
Because you wanted pure HTML, based on your tag, all I can come up with is this.
Create an absolute element.
Place it in the middle of the section.
Point the anchor to said element.
html {
scroll-behavior: smooth;
}
section {
position: relative; /* to make absolute child elements stay within it */
min-height: 100vh;
}
section.yellow {
background-color: yellow;
}
section.brown {
background-color: brown;
}
section.purple {
background-color: purple;
}
.middle.element {
position: absolute;
height: 0px;
top: 50%;
width: 100%;
}
.dashed-line.middle.element {
border-top: 1px dashed;
}
<ul>
<li>Yellow</li>
<li>Brown</li>
<li>Purple</li>
</ul>
<section class="yellow">
<div class="dashed-line middle element"><a id="yellow"></a></div>
</section>
<section class="brown">
<div class="middle element"><a id="brown"></a></div>
</section>
<section class="purple">
<div class="middle element"><a id="purple"></a></div>
</section>
<section></section>
I'm having a tough time keeping my content centered within a certain width on my personal website. I have tried many methods such as setting body to a fix width and my wrapper container to a percentage of that. I have attached a picture of my website here and highlighted where I want my content to be contained in the picture shown
.
I want my content of my website centered within that highlighted area, while at the same time keeping the background to be the full size of the screen.
I realize this may be a simple question for many, but I have spent all day looking for and trying out different methods to do this with no avail.
body {
background-color: #F0f0f0;
text-align: center;
margin-right: 0px;
margin-left: 0px;
}
.wrapper {
text-align: center;
}
.topSection {
height: 300px;
border: solid 5px;
}
.mainAbout {
padding-left: 50px;
padding-right: 50px;
vertical-align: middle;
}
.mainAbout h1 {
font-size: 60px;
font-family: arvo, sans-serif;
margin-bottom: 5px;
}
#leftBrace {
vertical-align: middle;
}
#rightBrace {
vertical-align: middle;
}
.projects {
height: 864px;
border: solid 5px;
margin-top: 2px;
background: #0F1217;
}
.projects h2 {
color: #e6e6e6;
font-family: arvo, sans-serif;
font-size: 50px;
}
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
<div class="wrapper">
<!---- Wrapper Starts Here --->
<div class="topSection" style="display:block" ;>
<!---- Name Section Starts Here --->
<div id="leftBrace" style="display: inline-block" ;>
<img src="leftbrace.png">
</div>
<div class="mainAbout" style="display: inline-block" ;>
<!--- Main Name and About me Section ---->
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
<!--- End mainAbout --->
<div id="rightBrace" style="display: inline-block" ;>
<img src="rightbrace.png">
</div>
</div>
<!--- Wrapper Ends Here --->
<div class="projects">
<h2> Projects </h2>
</div>
<div class="contact">
</div>
</div>
<!--- Wrapper Ends Here --->
<footer>
</footer>
Instead of using background you could style curly-braces using pseudo selector :before and :after, thus it works like font styling, you could use transform:translate to center your intro text container, check below codes.
#box {
width: 100%;
height: 300px;
overflow: hidden;
background: #ccc;
}
#box > .cnt {
width:50%;
text-align: center;
top: 50%;
left: 50%;
position: relative;
transform: translate(-50%, -50%);
}
#box:before {
content:"{";
font-size: 250px;
position: absolute;
top: 0;
left:10%;
}
#box:after {
content: "}";
font-size: 250px;
position: absolute;
top: 0;
right:10%;
}
<div id="box">
<div class="cnt">
<h1> Benjamin Yan </h1>
<p> I am a Senior Year Computer Science student at Sacramento State <br> University, California. I strive to become a professional Web Developer. </p>
</div>
</div>
Apply margin: 0 auto; to your content class. This will work.
You need to make sure add an inner class inside each wrapper and define your desired width. And need to apply margin: 0 auto to the inner. I added demo snippet.If u want specific wrapper full width just remove innerclass that's enough you will get full width. I hope it will help you.
.wrapper {
height: 300px;
width: 100%;
background: orange;
margin-bottom: 20px;
}
.inner {
width: 70%;
margin: 0 auto;
background: pink;
height: 100%;
}
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>