I'm new in CSS/HTML and I can't make the design that I want.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../css/header.css">
<link rel="stylesheet" href="../css/layout.css">
</head>
<body>
<div class="header">
<div class="logo"></div>
<input type="text" class="search-bar" placeholder="Type...">
</div>
</body>
</html>
CSS:
.logo {
width: 80px;
height: 80px;
background-image: url('../assets/images/logo.jpeg');
background-size: cover;
margin-right: 20px;
}
.search-bar {
width: 50%;
height: 50%;
border: 1px solid gray;
border-radius: 20px;
padding: 10px;
margin: 0 auto;
font-size: 1em;
}
Photo (I would like the logo to be centered, next to the search bar):
Thanks!
You can use display:flex and justify-content: center in your .header div to center the elements in the center; Add a margin-right to the logo to give a space between the logo and search bar
.header {
display: flex;
justify-content: center;
}
.logo {
width: 80px;
height: 80px;
background: url('https://via.placeholder.com/80') no-repeat;
margin-right: 10px;
}
<!DOCTYPE html>
<html>
<body>
<div class="header">
<div class="logo"></div>
<input type="text" class="search-bar" placeholder="Type...">
</div>
</body>
</html>
I'm kinda new to web dev too, but this should work:
.header{
text-align: center;
}
There are many ways to achieve your desired output. One of the ways using flex. You can also have a look at FLEX: A simple visual cheatsheet for flexbox.
display: flex;
align-items: center;
justify-content: center;
Click on this CodePen to see the full code.
Besides, you can also have a look at the link below to see the issue & solution visually: StackOverFlow QA - Header in css not as expected
Happy coding :)
The problem was in the
margin: 0 auto;
Hope it helps someone!
Related
In my HTML page, I have some social media icons at the top of the page, and a logo that's supposed to be in the middle. But, after I added the icons, they're pushing the logo to the side a bit.
Here's an image of what's happening
The question mark symbol is supposed to be in the middle of the entire page (directly in between the "updates" and "archive" in the nav bar), but it's being pushed off. Is there a way I can make the logo in the center of the entire page?
In my HTML I have:
<img src="https://imgur.com/16OdDvD.png" class="sns-icon" id="ig">
<img src="https://imgur.com/nQ2aUYu.png" class="sns-icon" id="reddit">
<div class="center">
<img src="https://imgur.com/hQRzG5G.png" id="headerlg">
</div>
Then in my styles.css I have:
.center {
text-align: center;
}
#headerlg {
padding-top: 35px;
padding-bottom: 9px;
width: 80px;
position: relative;
}
.sns-icon {
width: 30px;
float: left;
margin-top: 13px;
margin-left: 13px;
padding: 1px;
}
I've also tried justify-content: center and margin: auto both of which didn't work
your source code didn't work for me, but here I write some code like yours, I solve your problem with flex box and add some visual style, I hope it's make sense to you.
.container {
width: 100%;
height: 50px;
display: flex;
justify-content: space-around;
align-items: center;
}
.container>div {
width: 33%;
height: 20px;
background-color: rgb(216, 216, 216, 0.4);
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTML & CSS</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="container">
<div class="social-media">
<span>instagram</span>
<span>twitter</span>
</div>
<div class="logo">
icon logo
</div>
<div class="put-nothing">
</div>
</div>
</body>
</html>
I just created 3 div 1 of them contain social media ,another contain logo , and last one left empty. all of them have same width in all device (mobile, tablet, laptop).
I am working on this website as a side project. I have been trying to make this page responsive (this is my first responsive web page). So far I figured out everything except the social media buttons. I would like to place them on the bottom right corner of the page and have it be responsive however every time I do this when I resize the window they move start to move up. I have included my HTML and CSS. Thank you for all of your help.
I have tried using flexbox, bootstrap, and grid and cant get any of them to work, I am also a bit confused about which kind of CSS to use.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Giphy Search</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"integrity="sha384ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2Zw1T" crossorigin="anonymous">
<link href="Style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="fb-root"></div>
<script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v4.0">
</script>
<div id="imgLogoDiv">
<img id="imgLogo" src="/img/logo.png" alt="unable to load image">
</div>
<div id="divTxtField">
<input type="text" id="search" placeholder="Search for a gif!">
</div>
<div id="bs-divSearchButton">
<button id="bs-Button" type="button" class="btn btn-dark">Search</button>
</div>
<br>
<div id="GifDisplay">
<img id="gif">
</div>
<div id="socialMediaBottons">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-
href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
<script src="JS/script.js"></script>
</body>
</html>
CSS:
body {
background-image: url(img/background.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-attachment: fixed;
}
#imgLogoDiv {
display: flex;
justify-content: center;
height: auto;
/*height: auto
Not sure if I should keep this since it seems to have to effect.*/
}
#imgLogoDiv #imgLogo {
width: 45%;
height: auto;
}
#divTxtField {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 1%;
}
#divTxtField #search {
border-radius: 25px;
}
#divTxtField #search:hover {
cursor: auto;
}
#bs-divSearchButton {
display: flex;
justify-content: center;
position: relative;
top: 20px;
padding-bottom: 20px;
}
#bs-divSearchButton #bs-Button:hover {
cursor: pointer;
}
#socialMediaBottons{
display: flex;
justify-content: flex-end;
align-items: flex-end;
height: 50vh;
}
#GifDisplay {
display: flex;
justify-content: center;
}
image of site showing buttons
This solution comes from the Bootstrap 4 page on Flex _
As recommended I added flex classes d-flex justify-content-end to the div #socialMediaBottons and removed the same from your CSS
So now the HTML section looks like this:
<div id="socialMediaBottons" class="d-flex justify-content-end">
<div id="twitterButton">
<a href="https://twitter.com/share?ref_src=twsrc%5Etfw" class="twitter-share-button" data-size="large"
data-text="Search for a Gif!" data-show-count="false">Tweet</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
<div id="fbButton">
<div class="fb-share-button" data-href="https://www.facebook.com/GIPHY/" data-layout="button" data-size="large"><a
target="_blank"
href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
class="fb-xfbml-parse-ignore">Share</a></div>
</div>
</div>
...while the pertinent CSS block only contains the height attribute:
#socialMediaBottons{
height: 50vh;
}
As you can see from this image the buttons are now aligned:
aligned buttons
Reference Docs:
Bootstrap 4 Flex: https://getbootstrap.com/docs/4.0/utilities/flex/
I appreciate you're trying to use Flexbox, but in this case it's not the right tool for the job.
You should use either absolute or fixed positioning (depending on what you're going for) to get the social buttons in the bottom corner. Just make sure body has position:relative.
body { position:relative }
#socialMediaBottons { position:fixed; bottom:10px; right:10px; }
#fbButton, #twitterButton { display:inline-block; }
This way, whatever height or width the viewport is, the buttons will always be a specified distance from the bottom right corner (you can adjust bottom and right to your liking).
You can use CSS as below:
.socialMediaButton{
display: inline-block;
margin: 5px;
}
.socialMediaButtons {
position: absolute;
bottom: 10px;
right: 10px;
display: flex;
}
See result here.
I have some simple HTML and CSS written. I'd like to get a list of buttons to the right side of an image.
I've tried using float and display: inline
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
.main{
background: yellow;
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container{
background: pink;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
I've highlighted the container for everything but the footer as yellow. The container holding the buttons are pink. I've done this to help me understand what's happening to the containers as I test things out.
For float, I've tried floating the buttons-container to the right. This results in the buttons going to the right of the page, and it seems to somehow disassociate itself from the main container as it is no longer highlighted in yellow.
I've also tried floating the img to the left. This seems to be the best help so far, except that the yellow background has disappeared. What happened to the rest of my container? I've tried using margin-top to move the buttons down towards the middle of the image but both the image and the button's margins seem to be altered.
Is there a better way to do this? Thank you.
I suggest you use display: flex; to do this. It's much easier to get alignment done with flex This is a sample code.
I have added align-items: flex-start to your controls-container so that it will only take up the space from the top. If you want the container to take the full height along with your image-container feel free to remove that code. Also I have removed your ids and used classes to reference the styles and I would advise you to do the same. Hope it helps you.
HTML
<div class="d-flex flex-column">
<div class="container main">
<div class="image-container">
<img src="img/placeholder.png" />
</div>
<div class="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
<div class="footer">
<h5>
Footer
</h5>
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-column {
flex-direction: column;
}
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
}
.main {
background: yellow;
}
.image-container {
width: 1000px;
height: 600px;
}
.controls-container {
display: flex;
flex-direction: row;
background: pink;
}
.footer {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
JS Fiddle Link: https://jsfiddle.net/SJ_KIllshot/fq8t3ndw/
The other way around is to use position.I have just tweaked your code, below is the snippet please have a look at it.
.main {
background: yellow;
position: relative
}
#image img {
width: 1000px;
height: 600px;
}
#controls-container {
background: pink;
position: absolute;
right: 0px;
top: 0px;
}
.controls {
display: inline;
}
.footer-container {
clear: both;
text-align: center;
margin-top: 5em;
margin-bottom: 2em;
}
<html>
<head>
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<section class="main">
<div class="container">
<div id="image">
<img src="img/placeholder.png" />
</div>
<div id="controls-container">
<div class="controls">Start</div>
<div class="controls">Right</div>
<div class="controls">Back</div>
<div class="controls">Down</div>
</div>
</div>
</section>
<div class="footer-container">
<footer>
<h5>footer</h5>
</footer>
</div>
</body>
</html>
I tried to center "Travel Blog;View Project" with the image, so the text is in the middle of the image on the left side. Not overlapping
I tried using flexbox grid, but i dont have any clue what to do now
the html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Fabian Gmeindl</title>
<link rel="stylesheet" type="text/css" href="css/master.css">
</head>
<body>
<header id="showcase">
<div class="Top-Page">
<h1>HEY,</h1>
<h2>I'm Fabian Gmeindl</h2>
<p>Skier, Writer, Entrepreneur</p>
</div>
</header>
<div id="project-home">
<!-- Top Page -->
<!-- Page Projects -->
<div class="rtro-area" class="wrapper">
<h2>Travel Blog</h2>
View Project
</div>
<img class="img-rtro" class="wrapper" src="Resources/rtro-toppage.png" alt="Rtro Blog Top Page">
<footer id="main footer">
<p>Copyright © 2019 Fabian Gmeindl</p>
</footer>
</div>
</body>
</html>
the css
*{
margin: 0;
padding: 0;
border:0;
}
h1{
color:#56A1B1;
font-size: 100px;
font-weight: bold;
}
#showcase h2{
color:white;
font-size: 80px;
text-transform: uppercase;
}
p{
color:white;
}
.Top-Page{
padding-left: 8%;
}
body{
background-color: #f4f4f4;
line-height: 1;
}
#showcase{
background-image: url('../Resources/Portrait.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
/* Project Home Page */
.img-rtro{
width: 1300px;
float: right;
margin-left: 20%;
}
#project-home{
background-image: url('../Resources/background.jpg');
background-size: cover;
background-position: center;
height: 100vh;
display:flex;
flex-direction: column;
justify-content: center;
}
When I scroll down to the second section, where the problem is, it looks like this
https://imgur.com/mt2HStK
You can align the "Travel Blog;View Project" part if you add align-items: center to the flexcontainer's CSS. (align-items — controls alignment of all items on the cross axis.) You have to center on the cross axis, as you are using "flex-direction: column".
For aligning elements with flexbox in general, I can recommend this article: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container
I have looked for a solution to this for around half a day. I am just starting web design and I need to center a form horizontally and vertically. Right now it is in the top left-hand corner. Please do not mind the bad code I am going to tidy it up soon.
form {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.trans {
background:rgba(1,1,1,0.6);
}
body {
background-image: url(wallpaper.jpg);
}
.text {
}
.box {
display: table;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
<title>Peq Anon</title>
</head>
<body>
<div class="container">
<form>
<input class="trans text" type="text" name="Password">
<button type="submit" onclick="#">Submit</button>
</form>
</div>
</body>
</html>
Here is a simple solution: wrap your form in a container div and use display: flex property to set the alignment.
Try this:
<div class="container">
<!-- the rest of your code comes here -->
</div>
And for the CSS
.container {
display: flex;
justify-content: center; /* center horizontally */
align-items: center; /* center vertically */
}
Edit
You have to make sure that the height of your body, html and container elements are all set to 100%.
Look at this fiddle for an example: Fiddle
.container {
position: absolute;
top: 50%;
margin-top: -50px;
left: 0;
width: 100%;
}
form {
text-align: center;
vertical-align: middle;
margin-left: auto;
margin-right: auto;
height: 100px;
}
You need to have a static form height though.
The form height:100px is the height of your form. the margin-top needs to be 50% of your form height.
Use margin:auto for horizontal center
Use top:50% and position:relative for vertical align.
Don't forget to define a height for the container and make its position relative too.
form {
margin: auto
display: table-cell;
text-align: center;
vertical-align: middle;
position:relative;
top: 50%;
}
.container{
position.relative;
height:200px;}
.trans {
background:rgba(1,1,1,0.6);
}
body {
background-image: url(wallpaper.jpg);
}
.box {
display: table;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="icon" type="image/ico" sizes"32x32" href="pths_logo32x.png">
<title>Peq Anon</title>
</head>
<body>
<div class="container">
<form id="form">
<input class="trans text" type="text" name="Password">
<button type="submit" onclick="#">Submit</button>
</form>
</div>
</body>
</html>