I have a logo on the right side of the page. On resizing(making window smaller) I want to move the logo to the center of the page.
Here's my CSS
.headerlogo {
position: relative;
float: right;
margin-right: 5%;
margin-top: 50px;
z-index: 999;
}
.getapp-nav-img{
height: 60px;
margin: auto;
}
Here's my HTML
<div class="headerlogo" style="">
<div class="social-nav">
<a href='#'><img class="getapp-nav-img" src='img/logo.png'/></a>
</div>
</div>
Its not moving by this. How can I achieve this?
Remove the float and use text-align to center the img. You need to make those changes within a media query like this:
#media (max-width: 768px) {
.social-nav {
text-align: center;
}
.headerlogo {
float: none;
}
}
Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/108/
You can use media queries like this:
.headerlogo {
width: 50px;
position: relative;
float: right;
margin: 50px 5% 0 auto;
z-index: 999;
}
.getapp-nav-img {
height: 60px;
margin: auto;
}
#media (max-width: 480px) {
.headerlogo {
float: none;
text-align: center;
margin: 50px auto 0 auto;
}
}
<div class="headerlogo" style="">
<div class="social-nav">
<a href='#'><img class="getapp-nav-img" src='https://cdn0.iconfinder.com/data/icons/black-icon-social-media/256/099280-blinklist-logo.png'/></a>
</div>
</div>
Here is a fiddle for easier testing: https://jsfiddle.net/ajjr3u3n/2/
Related
so I am basically coding my website.
I made a container, where a text floats to the left and the img to the right. I set a min-width for the text so it gets responsive. The image size is also responsive. Once the screen width gets lower, the image does get under the text but not in the center. I tried using margin: 0 auto; but that didn't help either.
.container {
width: 88%;
margin: auto;
overflow: hidden;
}
/* showcase */
#showcase h1 {
margin: 0;
}
#text {
width: 60%;
float: left;
min-width: 300px;
}
#pic {
width: 40%;
float: right;
}
#pic img {
width: 100%;
}
<section id="showcase">
<div class="container">
<div id="text">
<h1> dummy text </h1> <button class="button_1">Kontakt</button> </div>
<div id="pic"> <img class="mypic" src="./img/menew.png"> </div>
</div>
</section>
Use flex rather than a float on your container, you will get a better response from it
.container {
width: 88%;
overflow: hidden;
display: flex;
}
/* showcase */
#showcase h1 {
margin: 0;
}
#text {
min-width: 300px;
}
#pic {
width: 40%;
}
#pic img {
width: 100%;
}
You can now change the width of your #text div to place where you want the elements
Media query as asked for responsive
#media (max-width: 750px) {
.container {
display: block;
}
}
I deleted #pic float and added auto margin + a min width
#pic{
width: 40%;
min-width: 300px;
margin: 0 auto;
}
and made a media query:
#media (min-width: 600px) {
#pic {
float: right;
}
}
I'm trying to learn HTML/CSS and working on a nav bar, however, I am experiencing a scaling problem. This is the website in full screen.
This is the website minimized a bit.
Then this is the website minimized all the way.
As you can tell when I scale the website around into different scales then the proportions mess up and things begin to overlap. I have tried making the children absolute while keeping the containers relative. I am also using em's for measurement and not using pixels. What can I do to keep everything proportional while scaling?
This is the js fiddle
https://jsfiddle.net/2w1r136j/2/
HTML
<div class="container">
<header>
<nav>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="leftNavContainer">
Home
Story
</div>
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
.container {
width: 100%;
height: 100%;
position: absolute;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important; /* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
position: absolute;
float: left;
}
.leftNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
.rightNavContainer {
float: right;
}
.rightNavContainer a {
position: relative;
display: inline;
margin-right: 2em;
margin-left: 2em;
}
Well Media queries might work, but a much better implementation would be using Flexbox or better CSS Grid.
I've updated the fiddle with a flexbox implementation.
https://jsfiddle.net/khpv2azq/3/
HTML
<head>
<title>
Westworld
</title>
<link rel="stylesheet" href="css/style.css">
</head>
<div class="container">
<header>
<nav>
<div class="leftNavContainer">
Home
Story
</div>
<img class="logo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/Westworld_Logo.svg/2000px-Westworld_Logo.svg.png" alt="logo">
<div class="rightNavContainer">
Characters
Create
</div>
</nav>
</header>
</div>
CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #222;
font-size: 1em;
}
nav{
display: flex;
justify-content: space-between;
}
.container {
width: 100%;
height: 100%;
}
header {
background: white;
height: 3.5em;
}
.logo {
height: 4.5em;
width: 4.5em;
position: absolute;
left: 50%;
margin-left: -50px !important;
/* 50% of your logo width */
display: block;
margin-top: 0;
}
.leftNavContainer {
}
.leftNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
.rightNavContainer {
}
.rightNavContainer a {
position: relative;
display: inline;
margin: 4px;
}
Also MDN resource for Flex box -
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox
Hope this help! 😇
You can use media queries to change sizes at breakpoints
ex:
#media only screen and (max-width: 600px) {
body {
font-size: .7em;
}
}
https://jsfiddle.net/2w1r136j/7/
However, you might consider using the media queries to incorporate a responsive design which will work for mobile.
A common idiom is to collapse the menu items into full width elements, and to bump up the font size.
something like: https://jsfiddle.net/2w1r136j/40/
I want to know if it is possible to center a website header which has not been placed into divisions, but has been placed in the header tag.
It's code goes something like this:
<header>
<div class="top">
</div>
<div class="image">
</div>
</header>
The CSS goes something like this:
header
{
width: 100%;
margin: 0 auto;
}
.top
{
width: 30%;
background: yellow;
float:left;
padding: 2.5%
}
.image
{
width: 45%;
background: black;
float: left;
}
I want the contents inside the header to be centered in origanal size as well as when the website is being used in a smaller resolution (i.e. mobile).
How do I go about doing this?
Use display: inline-block instead of float: left.
The elements will then be inline. When adding a text-align: center to the header will make them center inside it.
header {
width: 100%;
text-align: center;
}
.top, .image {
display: inline-block;
vertical-align: top;
margin-left: -4px;
}
.top {
width: 30%;
background: yellow;
padding: 2.5%
}
.image {
width: 45%;
background: black;
}
<header>
<div class="top">t</div>
<div class="image">i</div>
</header>
I need to center an element within a div while there is another element nearby. When I use text-align center, it places the element close but it's not going exactly where I'd like due to another element nearby. I want the logo element to center exactly while the social element floats to the right.
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
float: right;
}
#social img {
width: 25%;
display: inline-block;
}
<div id="header">
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</div>
See this fiddle
To make the logo div centralize irrespective of the div taht holds the social link, you'll have to make the logo div absolute positioned.
Now, to make the absolute positioned logo div centered, you'll have to add left:0;right:0 to the CSS.
The revised CSS is as follows
CSS
#logo {
width: 30%;
margin: 10px auto;
position: absolute;
left: 0;
right: 0;
}
Try add this:
#logo {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}
alternatively if #logo would have width: 100px; then position: absolute; left: 50%; margin-left: -50px;
Add center tag and remove float:right from social
#header {
width: 100%;
height: auto;
text-align: center;
background-color: #ffffff;
}
#logo {
width: 30%;
margin: 10px auto;
display: inline-block;
text-align: center;
}
#logo img {
width: 100%;
height: auto;
margin: auto;
}
#social {
width: 15%;
display: inline;
}
#social img {
width: 25%;
display: inline-block;
}
<div id="header">
<center>
<div id="logo">
<img src="images/final/logo2.png">
</div>
<div id="social">
<img src="images/final/fb.png">
</div>
</center>
</div>
I'm having some trouble floating some elements. I've reproduced an example here.
Basically I want Logout to appear on the right (just like the image appears on the left), but am having trouble doing so.
If you swap float: right with float: left and vice-versa in .logo and user-header, Logout still appears on the new row while the logo will correctly float right.
I feel I am missing something obvious here.
Any ideas?
Thanks.
http://jsfiddle.net/xVXPk/15/
Try this. ( always do float:right, float:left, center, clear:both ) -- note close your image tags.
<div id="header">
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
<div class="logo">
<img src="#"/>
</div>
<div class="company-header">
<a title="title" href="index.php"><b>Hello</b></a>
</div>
<div style="clear:both; height:1px; width:99%" ></div>
</div>
#header {
width: 600px;
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
margin-left: 30px;
}
#header .logo img {
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
text-align: center;
width: 200px;
margin: 0 auto;
}
#header .user-header {
float: right;
margin-right: 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
duplicate of this post:
How to align 3 divs (left/center/right) inside another div?
To explain, as far as I understand the issue, when the browser draws the page, it will render the center content, first as it process the page in logical order. then apply the floats this is why the right hangs. But by adding the floats first the browser will know before rendering the center to float the content to the right, because it goes , left center right in the first case, and in the second right left center. If that makes sense. Sort of order of processing operations.
You simply haven't done the math right. There is not enough space for the div class="user-header" to be positioned on the RH-side. See the JSFiddle with borders.
EDIT: and you need to float:left the div class="company-header" as well: live demo.
Used code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Live demo</title>
<style>
div {
border: 1px solid black; /* added */
}
#header {
width: 600px;
height: 60px; /* added */
background-color: #585D63;
padding: 15px 0px;
}
#header .logo {
float: left;
width: 33%;
max-width: 180px;
padding: 5px 30px;
}
#header .logo img {
max-width: 120px;
height: auto;
}
#header .company-header {
font-size: 150%;
letter-spacing: 1px;
margin: 0 auto;
width: 33%;
text-align: center;
float: left; /* added */
}
#header .user-header {
float: right;
w/idth: 33%; /* de-activated */
max-width: 180px;
padding: 5px 30px;
}
#header .user-header a {
max-width: 120px;
height: auto;
}
</style>
</head>
<body>
<div id="header">
<div class="logo">
<img src="#">
</div>
<div class="company-header">
<a title="title" href="index.php">
<b>Hello</b>
</a>
</div>
<div class="user-header">
<label class="user"></label>
<a class="" href="#">Logout</a>
</div>
</div>
</body>
</html>
Add class to anchor: <a class="logout" href="#">Logout</a>
css:
#header {
position: relative;
}
.logout {
line-height: 58px; /* Same height as #header */
position: absolute;
top: 0;
right: 30px; /* Same padding-left of logo */
}
DEMO