I am working on a navigation bar for my website. The navigation bar contains a menu icon, a header 'Reviews' and a search icon. The icons need to have a distance of 3% from the border. The problem is that I can't figure it out how I center the text. I think the problem is with the floating elements and I don't know how I center a floating element between to other elements(in this case two icons). I hope someone could provide me with an answer :)
This is the result:
the navigation bar
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
float: left;
}
.searchButton {
float: right;
}
<!DOCTYPE html>
<html>
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
You may use the flex boxmodel and margins :
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
/* see center */
background-image:linear-gradient(to right, transparent 50%, rgba(0,0,0,0.5) 50%);
margin: 3%;
display: flex;
justify-content: center;
}
.menuButton {
float: left;
margin: auto auto auto 0;
}
#nav h1 {
float: left;
}
.searchButton {
margin: auto 0 auto auto;
}
<!DOCTYPE html>
<html>
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu"></div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
edit.
Considering only float, then float elements should be ahead in the flux to let other non-floatting elements comes in between, so h1 can be standing in between and get text-align or be centered via display and margin.
float won't allow vertical centering of elements where flex does .
text-align and no float for h1
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
display:table;/* shrinks on itself */
margin:auto;
}
.searchButton {
float: right;
}
<div id="dropMenu"></div>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<img src="search.jpg" class="searchButton">
<h1> REVIEWS. </h1>
</div>
<div id="content"></div>
<div id="footer"></div>
or display and margin without float for h1
* {
padding: 0px;
margin: 0px;
}
#nav {
width: 94%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
#nav h1 {
text-align:center
}
.searchButton {
float: right;
}
<div id="dropMenu"></div>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<img src="search.jpg" class="searchButton">
<h1> REVIEWS. </h1>
</div>
<div id="content"></div>
<div id="footer"></div>
Is this output are you expecting
Check output in codepen.io
* {
padding: 0;
margin: 0;
}
#nav {
width: 100%;
background-color: blue;
margin: 3%;
}
.menuButton {
float: left;
}
.searchButton {
float: right;
}
.a {
text-align: center;
}
<head>
<title> Reviews </title>
<link rel="stylesheet" type="text/css" href="main.css">
<meta charset="utf-8">
</head>
<div id="dropMenu">
</div>
<body>
<div id="nav">
<img src="menu.jpg" class="menuButton">
<h1 class="a"> REVIEWS. </h1>
<img src="search.jpg" class="searchButton">
</div>
<div id="content">
</div>
<div id="footer">
</div>
</body>
Related
I would like to add some texts next to centered images. I want to keep images in the center of my page and texts just floating on sides of pictures (without moving images to the sides of the page)
my goal
This is my code (with a random free image for question purposes only):
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
}
.img1 {
margin: 0 auto;
width: 200px;
display:block;
}
.text1 {
text-align: right;
float: left;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
}
.text2 {
text-align: left;
float: right;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I've tried using inline-block for images, but then I couldn't center them. In general, the texts somehow push the images away from the center and I cannot find a similar case as mine online. Thank you in advance for any hints.
easiest way with your code is to use position absolute
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
position:relative;
}
.img1 {
margin: 0 auto;
width: 200px;
display: block;
}
.text1 {
text-align: right;
position:absolute;
top:20%;
left:15%;
}
.img2 {
margin: 0 auto;
width: 200px;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
position:relative;
}
.text2 {
text-align: left;
position:absolute;
top:20%;
right:15%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1" >
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1" alt="img1">
<div class="text1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
<div class="row2">
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2" alt="img1">
<div class="text2">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
or we could do this with flex: when you use absolute it takes the element out of the regular dom flow. Better yo use flex, makes responsive designs easier
.whole h2 {
margin-top: 15px;
text-align: center;
}
.row1 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.img1 {
margin: 0 auto;
display: block;
}
.text1{
text-align:right;}
.r1{
width:30%;}
.img2 {
margin: 0 auto;
display: block;
}
.row2 {
height: 250px;
margin: 0 auto;
display:flex;
align-items:center;
}
.text2 {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="whole">
<h2>Experience</h2>
<div class="row1">
<div class="text1 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img1 r1" alt="img1">
<div class='r1'> </div>
</div>
<div class="row2">
<div class='r1'> </div>
<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/285/open-book_1f4d6.png" class="img2 r1" alt="img1">
<div class="text2 r1">
<h3>year</h3>
<p>xxxxxxxxxxxxx</p>
</div>
</div>
</div>
</body>
</html>
I'm having a problem that's driving me crazy because I know the solution is likely right in front of my eyes. I have a dropdown menu that I want to change on the screen reaching a size. Here is the snippet of what it it is like when it's unedited.
.box {
float: left;
position: relative;
top: -50px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: left;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This works fine and how I want it. But my trouble comes when I try to change the float value when the screen reaches a certain size by doing the following:
#media screen and (max-width: 768px) {
#Dropdown {display: block;}
.box button {
float: top;
display: inline-block;
}
.box {
float: top;
position: static;
top: 0;
margin-top: 10px;
max-height: 45px;
max-width: 150px;
}
}
But for some reason it doesn't work right. It should appear like the following page:
.box {
float: top;
margin-top: 0px;
max-height: 45px;
max-width: 150px;
}
.box button {
float: top;
background-color: #34495e;
border: none;
color: white;
width: 150px;
height: 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-family: 'Quicksand';
}
<html>
<head>
<link rel="stylesheet" href="styles.css">
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(function() {
$("#Dropdown").click(function() {
$("#Home").toggle();
$("#Profile").toggle();
$("#Group").toggle();
$("#Projects").toggle();
});
});
</script>
</head>
<body>
<div id="container">
<div class="dropdown">
<button id="Dropdown">
<img src="menu.png">
</button>
</div>
<div class="box">
<button id="Home">Home</button>
</div>
<div class="box">
<button id="Profile">Profile</button>
</div>
<div class="box">
<button id="Group">Group</button>
</div>
<div class="box">
<button id="Projects">Projects</button>
</div>
</div>
</body>
</html>
This is a pretty long winded question so any help on this would be greatly appreciated!
As I know, there is no css command float:top;. float can take the parameters: left, right, none, inline-start, inline-end.
I've decided to create my own blog, and am trying to work on the layout for it. I just started on it and I'm having trouble with the header already. I want a header that stretches all the way across the screen with no white spaces on top or on the sides and am planning on making my blog responsive. I've tried setting the margin to 0 and can't seem to get anything to work. I've tried to search the answer on here but couldn't get anything to work. this is my html and css. Thanks for any help!
p.s. The reason I did the logo in such a weird way is because I'm going to have one word in a bold font and one word in a skinny font and that was the only way I could think of to do it.
HTML:
<!DOCTYPE html>
<html>
<title>FatHead | Blog</title>
<link href="http://fonts.googleapis.com/css?family=Dosis:400,500,600,700,800|Muli:400,300italic,400itali" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<head>
</head>
<body>
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1><h1 id="logo-small">HEAD</h1>
</div>
<div class="nav">
</div>
</div>
</body>
</html>`
CSS:
.header{
background-color: lightslategray;
margin:0;
padding:0;
width: 100%;
}
.logo{
text-align: center;
display: block;
margin:15px;
}
#logo-large{
display: inline;
}
#logo-small{
display: inline;
}
You have to add
body
{
margin:0;
padding:0;
}
and change your css
.logo{
text-align: center;
display: block;
margin:15px;
}
to this
.logo{
text-align: center;
display: block;
margin:0 15px 15px 15px;
}
JSFiddle
Remove the appropriate margins from body and .logo.
body {
margin-top: 0;
margin-left: 0;
margin-right: 0;
}
.header {
background-color: lightslategray;
margin: 0;
padding: 0;
width: 100%;
}
.logo {
text-align: center;
display: block;
margin: 0 15px 15px;
}
#logo-large {
display: inline;
}
#logo-small {
display: inline;
}
<div class="header">
<div class="logo">
<h1 id="logo-large">FAT</h1>
<h1 id="logo-small">HEAD</h1>
</div>
<div class="nav">
</div>
</div>
this is for sure a noobish html question, because i am new at this stuff.
Anyways lets get to it:
1st, check the fiddle:
http://jsfiddle.net/d6767uur/
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="frontpage.css" rel="stylesheet">
</head>
<body>
<div class="navBar">
<div class="greyline"> </div>
<div class="menu"> smoothies </div>
<div class="greyline"> </div>
<div class="menu"> milkshakes </div>
<div class="greyline"> </div>
<div class="menu"> juicy facts </div>
<div class="greyline"> </div>
<div class="menu"> about us </div>
<div class="greyline"> </div>
<div class="stuffwithsmall"> © All rights reserved.. </div>
</div>
<div class="frontWrapper">
<h1> HELLO </h1>
<div style="margin-left: 750px; margin-top: -435px;"> <img src="frontfruit.jpg"> </div>
</div>
</body>
</html>
CSS:
#font-face { font-family: SourceSansPro-Regular; src: url('SourceSansPro-Regular.otf'); }
body {
margin: 0px;
padding: 0px;
}
.navBar {
width: 205px;
height: 667px;
background-color: #55AE3A; //hover = 398a20
}
.greyline {
width: 205px;
height: 1px;
background-color: darkgrey;
}
.menu {
font-family: 'SourceSansPro-Regular';
color: white;
font-size: 25px;
opacity: 0.64;
height: 40px;
text-decoration: none;
}
.menu:hover {
background-color: #398a20;
}
.stuffwithsmall {
color: #75715e;
font-family: helvetica;
margin-top: 320px;
}
Question: why is that header going down below the main menu, and how do i change it, so that it goes to the right of the menu?
Your navbar div goes down that far because .stuffwithsmall class is inside it and has a huge margin-top. You can fix that by moving it lower, after the closing tag of navbar div.
In css, change:
.navbar {
height: auto;
width: 100%;
}
Starting my first Tumblr layout.
For some reason, the columns are all a little to the left, and not centered within #content.
Not sure what I am doing wrong... any help would be very much appreciated.
Also... if anyone viewing this has any advice or sees a better way of doing these columns, I would love to hear it.
Thanks
Sam
Code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body {
text-align: center;
}
#wrap {
height: auto px;
width: 920px;
margin: 15px auto;
border: 1px black solid;
}
#header {
margin: 10px;
}
#content {
}
#column1 {
}
#column2 {
}
#column3 {
}
#footer {
}
.title {
font-size:25px;
}
.subtitle {
font-size:16px;
}
.column {
width: 300px;
float: left;
}
</style>
<title>{title}</title>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="title">
{title}</div>
<div class="subtitle">
{description}</div>
</div>
<div id="content">
<div id="column1" class="column">
column1
</div>
<div id="column2" class="column">
column2
</div>
<div id="column3" class="column">
column3
</div>
</div>
<div id="footer" class="subtittle">
copyright {copyrightYears} {title}
</div>
</div>
</div>
</body>
</html>
Your container is more than 900px (300px x 3) wide.
Set column width to 33.3% (near enough 1/3 of the container width).
.column {
width:33.3%;
float: left;
}
http://jsfiddle.net/CZ9Lw/