I'm confused how to center vertically a search bar div area, I've used margin auto and it didn't worked.
Here's the full code
.search{
float: right;
width: 200px;
padding: 15px 15px;
margin: auto 0;
background-color: green;
}
Here's the problem
How do I vertical center the search bar div within the navbar?
I made with flexbox. You should learn flexbox
body{
font-family: sans-serif;
margin: 0;
padding: 0;
}
.navbar{
background-color: #343D46;
position: absolute;
width: 100%;
text-align: center;
display:flex;
align-items:center;
justify-content:space-between;
}
.navbar a{
display: inline-block;
float: left;
font-size: 19px;
text-decoration: none;
padding: 15px 15px;
}
.navbar a:hover{
background-color: green;
}
.dropdown{
}
.search{
float: right;
width: 200px;
padding: 15px 15px;
margin: auto 0;
background-color: green;
}
.search input{
float: right;
border: none;
outline: none;
background: none;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="navbar">
<div>
Lorem
Ipsum
Dolor
</div>
<div class="dropdown">
</div>
<div class="search">
<input type="text" name="search" placeholder="search">
</div>
</div>
</body>
</html>
Related
I'm trying to re-create Google's home page to try and improve my very basic skills. I'm trying to apply word spacing to the links in the navbar (Gmail & Images) but I can't get it to work. Can anyone point out where I'm going wrong?
I've just realised list-style-type: none; hasn't altered anything either.
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border: 1px solid lightgray;
outline: none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166, 166, 166, 0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight: bold;
}
.divider {
width: 10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
list-style-type: none;
word-spacing: 30px;
}
<nav>
<div class="nav-wrapper">
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="googlemain.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
padding-left would work fine.
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Google</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
width: 100%;
padding: 0;
margin: 0;
}
.mainSection {
text-align: center;
margin-top: 10%;
}
input {
display: block;
margin-right: auto;
margin-left: auto;
margin-top: 1%;
border: none;
padding: 10px;
width: 500px;
border:1px solid lightgray;
outline:none;
font-size: 20px;
font-weight: lighter;
box-shadow: 0px 0px 18px -1px rgba(166,166,166,0.93);
}
button {
outline: none;
margin-top: 3%;
display: inline-block;
width: 150px;
height: 35px;
border: 1px solid #eaeaea;
outline: none;
background-color: #f2f2f2;
color: #636363;
font-weight:bold;
}
.divider {
width:10px;
display: inline-block;
}
.nav-wrapper {
margin: 0;
padding: 0;
overflow: hidden;
}
.nav-wrapper a {
float: right;
order:1;
text-decoration:none;
padding-left:10px;
}
</style>
</head>
<body>
<nav>
<div class="nav-wrapper">
<ul>
Gmail
<div class="dividerTwo"></div>
Images
<!-- Add sign-in button here -->
</ul>
</div>
</nav>
<main>
<div class="mainSection">
<img id="googleImg" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="Google" draggable="false">
<div id="search">
<input type="text">
<button id="Search" href="#">Google Search</button>
<div class="divider"></div>
<button id="Lucky" href="#">I'm Feeling Lucky</button>
</div>
</div>
</main>
</body>
</html>
Don't Required:
word spacing
<div class="dividerTwo"></div>.
Do only :
Apply some padding around .nav-wrapper a
.nav-wrapper a {
float: right;
list-style-type: none;
padding:0 .5em;
}
In this scenario you should use margin CSS property instead of word-spacing. The end CSS rule would look as follows:
.nav-wrapper a {
float: right;
list-style-type: none;
margin-left: 15px;
}
I want to create a homepage where you see an image at first with the actual navigation bar on the bottom of the browser. When you scroll down the navigation should stick to the top when it reaches the top of the browser.
I got 1 Logo on the left of the screen and the navigation on the right. The navigation should have a background as a bar across the screen and the logo should overlap this. When I scroll down i first want the logo (which is for example 250px high) to stick to the top and then when i further scroll down i want the navigation + background (about 100px) also to stick to the top. I don't know why the white space is generated either. Between the first and the second picture there should only be about 100px (the height of the grey bar(navigation bar). With this code everything except the background bar works..
#charset "utf-8";
*{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.top-container{
position: absolute;
width: 100%;
}
.stopleft{
padding-top: 34%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: left;
}
.stopright{
padding-top: 44.2%;
width: 50%;
margin: 0px 0px 0px 0px;
border: solid 0px #000;
float: right;
}
.whiteBarSmall{
width: 100%;
padding-top: 5%;
background-color: #fff;
position: absolute;
}
.logo{
position: sticky;
top: 0;
width: 50%;
float: left;
}
.navigation{
margin: 0px 0px 0px 0px;
border: solid 0px #000;
position: sticky;
top: 0;
width: 50%;
float: right;
}
.navigation ul{
height: 100px;
}
.button{
list-style: none;
margin: 25px 20px 25px 20px;
float: right;
}
.navBackground{
border: solid 0px #000;
position: sticky;
top: 0;
width: 100%;
padding-top: 5%;
background-color: #a7a7a7;
float: right;
z-index: -1;
}
.whiteBarLarge{
width: 100%;
padding-top: 10%;
background-color: #fff;
}
.indexImage{
width: 100%;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
footer{
width: 100%;
padding-top: 2.5%;
background-color: #a7a7a7;
}
.navigation a:link {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:visited {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:focus {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:hover {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
.navigation a:active {
color: #000;
display: block;
text-align: center;
text-decoration: none;
font-family: 'Volkhov', sans-serif;
font-size: 30px;
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Test</title>
<meta name="description" content="…." />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="icon" href="pics/favicon.ico" />
<link rel="stylesheet" href="styles/basics.css" type="text/css" />
<link rel="stylesheet" href="styles/index.css" type="text/css" />
<link rel="stylesheet" href="styles/links.css" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Volkhov" rel="stylesheet">
</head>
<body>
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="stopleft"></div>
<div class="stopright"></div>
<div class="logo"><img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" width="50%" /></div>
<div class="navigation">
<ul>
<li class="button">Über uns</li>
<li class="button">Kontakt</li>
<li class="button">Preise</li>
<li class="button">Blog</li>
<li class="button">Galerie</li>
</ul>
</div>
<div class="navBackground"></div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</body>
</html>
I am having a lot of trouble with this bar...
Hope someone can help me. Thanks!
Is that what you want?
#charset "utf-8";
body {margin:0;}
.navbar {
overflow: hidden;
background-color: #808080;
position: fixed;
top: 0;
width: 100%;
}
.navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.navbar a:hover {
background: #ddd;
color: black;
}
.main {
padding: 16px;
margin-top: 30px;
/* height: 1500px; */ /* Used in this example to enable scrolling */
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="navbar">
<img src="https://png.icons8.com/ios/1600/external-link-squared-filled.png" alt="Logo" class-="logo" height=50 width=50 style="float: left">
Galerie
Blog
Preise
Contact
Über uns
</div>
<div class="main">
<div class="top-container">
<img src="https://pre00.deviantart.net/e893/th/pre/i/2006/132/b/4/widescreen_dreamy_world_6th_by_grafixeye.jpg" alt="Test header" width="100%" />
</div>
<div class="indexImage">
<img src="http://www.hdwallpapery.com/static/images/dual-monitor-wallpapers-hd_dJyDicr.jpg" alt="" width="100%" />
</div>
<div class="whiteBarLarge">
</div>
<div class="indexImage">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRUPqqyzvnT6JVdDUeUgzDvX9tUpwjKv59spOBgVdYtf-2EaLhD" alt="" width="100%" />
</div>
<div class="whiteBarLarge"></div>
<footer></footer>
</div>
</body>
</html>
I have just started learning html and css3. trying to create a login page but when I am trying to add once check box its not inline with label. When I run the same code only for check box its inline. not able to understand what is the exact issue.
HTML Code is
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
CSS code is
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
}
When I include the same in my complete html code and css code the check box and label are not perfect.
Complete HTML code is.
<!doctype html>
<head>
<title>Dchamps-Signin</title>
<style>
body {
background-image: url("bg_signin.jpg");
background-repeat: no-repeat;
}
</style>
<link rel="stylesheet" type="text/css" href="signin.css">
</head>
<body>
<header>
<div class="header">
<div>
</header>
<div id="wrapper">
<div class="logo">
<img src="Logo_FF.gif">
</div>
<div class="heading">
Sign in to your account
</div>
<div id="subwrapper">
<div class="un">
Username
</div>
<input type="text" size="60">
<div class="pw">
Password
</div>
<input type="text" size="60">
<div class="signin">
<button class="button">Sign in</button>
</div>
<div class="checkbox1">
<input type="checkbox" id="cb">
<label for="cb">Stay signed in</label>
</div>
<div class="needhelp">
Need Help?
</div>
</div>
</div>
<footer>
<div class="footer">
<ul>
<li>Help</li>
<li>Terms</li>
<li>CompanyInfo</li>
</ul>
</div>
</footer>
</body>
</html>
and My complete CSS Code
.header {
width: 100%;
height: 50px;
margin-bottom: 25;
}
#wrapper{
width: 800px;
margin: 0 auto;
float: center;
text -align: center;
}
#wrapper .logo{
margin-top: 25px;
text-align: center;
}
#wrapper .heading{
padding-top: 20px;
font-size: 45px;
color: #e94324;
text-align: center;
}
#wrapper #subwrapper {
width: 400px;
margin: 0 auto;
}
#wrapper #subwrapper .un {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper .pw {
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
float: left;
padding-left: 5px;
}
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px;
}
#wrapper #subwrapper .signin{
padding-top: 15px;
color: #f6ec28;
font-size: 25px;
}
#wrapper #subwrapper .button{
background-color: #f26534;
height: 65px;
width: 380px;
font-size: 35px;
/*-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;*/
color: #ffffff;
top: 55%;
}
#wrapper #subwrapper form {
}
#wrapper #subwrapper .checkbox1{
display: inline-block;
float: left;
font-size: 20px;
color: #ffffff;
position: relative;
}
#wrapper #subwrapper .needhelp{
float: right;
color: #f6ec28;
padding-bottom: 80px;
}
.footer{
height: 20px;
clear: both;
border-top: 1px solid #254A73;
}
.footer ul li{
float: right;
display:inline-block;
margin-right: 20px;
color: #ffffff;
}
I am not sure why the check box is not in line.
Regards,
KJ
Here is a fiddle with the fixed checkbox alignment issue, it is just a quick fix but you should try to think about your structure and how you style: http://jsfiddle.net/n2b93zaz/2/
#wrapper #subwrapper .checkbox1 {
display: inline-block;
float: left;
font-size: 20px;
color: #000000;
position: relative;
}
/*Added this css rule to override the input properties set earlier*/
#wrapper #subwrapper .checkbox1 input{
height:auto;
}
Your problem this:
#wrapper #subwrapper input{
padding-top: 5px;
background-color: transparent;
height: 50px; //This is your problem. Change height to auto or without value.
}
Weebly Menus and logos
So I have been reading everywhere that I can think of online to fix an issue with logo and navigation being on the same line. And yes I have attempted the other articles on Stackoverflow.
I have changed lines of code, added lines of code and it moves things around but refuses to put them on the same lines.
The code is this:
/* LOGO & MENU */
#header{
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.navContainer{
width: 500px;
height: auto;
background: url('navbg.jpg') repeat;
text-align: right;
display: inline;
overflow: hidden;
}
.logo {
width: 200px;
min-height: 20px;
height: auto;
margin: none;
float: left;
display: inline;
}
span.wsite-logo {line-height: 1;}
#logo, #logo a, #wsite-title {
color: #2a2a2a !important;
text-decoration: none !important;
font-family: "Open Sans", sans-serif;
font-size: 44px;
font-weight: lighter;
font-weight: 300;
line-height: 1;
}
/* Navigation Menu */
#navigation{
float: right;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
height: 100px;
display:inline;
overflow: hidden;
}
#navigation a, #icontent #navigation li:last-child a{
display:inline-block;
text-decoration:none;
line-height: 1;
padding: 20px 16px;
border-right: 1px solid #eee;
}
#navigation li:last-child a, #icontent #navigation span:last-child li a{border-right: none;}
#navigation ul{margin: 0; list-style: none;}
#navigation li{display:inline;}
#weebly-menus .weebly-menu-wrap { z-index: 5000; margin: 0; }
#weebly-menus .weebly-menu { padding: 0; margin: 0; list-style: none; }
#weebly-menus .weebly-menu li { width: 162px; text-align: left; margin-top: 2px;}
#weebly-menus .weebly-menu li a {
border: none;
display: block;
background-color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: normal;
line-height:1;
padding: 5px 0px;
color: #000;
font-family: Helvetica, sans-serif;
width: 160px;
height: auto;
border: 1px solid #eee;
}
#weebly-menus .weebly-menu-wrap, #wsite-menus .wsite-menu-wrap {
z-index: 5000;
margin: 0;
postiion: relative !important;
}
Please help. I am wanting to learn more but do you ever get to the point where your brain is just fried from trying different what you hope are solutions, and it turns out not to work. THAT IS WHERE I AM RIGHT NOW!!!!
The link to the site is this :Site preview
Also I am having trouble putting simple text to the right of the navigation.
The HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1024">
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700' rel='stylesheet' type='text/css'>
<!-- JS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body class='tall-header wsite-theme-light'>
<div class="note" style="text-align: center;"><p>This gap is here to allow you to see the text tool bar for the header bar below. When site is published, the gap will disappear</p></div>
<div id="wrapper">
<div id="bar">
<div class="frame clearfix">
<div class="bar-text"><p>{call:text}</p></div>
<div id="search-button"><i class="af-search"></i></div>
<div class="social-frame">{social}</div>
<div class="search-bar">{search}</div>
</div>
</div>
<header id="header">
<div class="navContainer clearfix">
<div class="logo med-padding">{logo}</div>
<nav><div id="navigation">{menu}</div></nav>
</div>
<div class="sliderContainer">
<div id="tall-header-image" class="wsite-header"></div>
</div>
</header>
<div id="main" role="main">
<div class="frame">
<div class="content large-padding">{content}</div>
</div>
</div>
<footer>
<div id="footer" class="large-padding clearfix">
<div class="frame">
<div class="note" style="text-align: center;"><p>Drag & drop footer content here</p></div>
<div id="footer-content" class="med-padding">{bottom:content} </div>
<div id="footer-content" class="med-padding" style="display:none;">{footer}</div>
</div>
</div>
<div id="footer-bottom" class="feature small-padding">
<div class="frame">
<div class="copyright"><p>{copyright:text}</p></div>
</div>
</div>
</footer>
</div>
<script type="text/javascript" src="/files/theme/basic-header.js"></script>
</body>
</html>
Place the span.wsite-logo class directly under the nav tag, after that change the span class in a div class and add a float: left to the class .wsite-logo.
remove logo div class logo med-padding.
Some advice that worked!!
Line 120 of css, in the #navigation, change text align right to center to move it horizontally, or add margin-top: 3%; to move it vertically, or both, or various other combinations.
navigation {
text-align: center;
border-bottom: 1px solid #eee;
border-top: 1px solid #eee;
float: none;
margin-top: 3%;
I'm having issues with clearing floats (could be something else?). I want to make the #newsbar div cleared from the previous floats. So, it's width can expand 100% across the page/browser
I think I've done what I can, and am becoming real frustrated with this. This is what it looks like currently:
Current output:
http://postimg.org/image/l2rxf4603/
If someone can look over my HTML and CSS, I'd much appreciate it. Thanks!
HTML & CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rob's BBC</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1" />
<style type="text/css">
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#topbar {
background-color:#7A0000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
.fixedwidth {
width: 1050px;
margin: 0 auto;
/* background-color: green; */
}
/* BBC Logo */
#logodiv {
padding-top: 8px;
float: left;
border-right: 1px solid #990000;
padding-right: 15px;
}
/* Sign In Text */
#signindiv {
font-weight: bold;
font-size: 0.9em;
float: left;
padding: 5px 50px 8px 8px;
border-right: 1px solid #990000;
}
/* Sign In Image */
#signindiv img {
position: relative;
float: left;
margin: 6px 0 0 2px;
}
#signindiv p {
float: left;
margin: 10px 0 0 4px;
}
#topmenudiv {
float: left;
}
#topmenudiv ul {
float: left;
margin: 0;
padding: 0;
}
#topmenudiv li {
list-style-type: none;
font-weight: bold;
font-size: 0.9em;
border-right: 1px solid #990000;
height: 100%;
padding: 15px 20px 10px 20px;
text-align: center;
float: left;
}
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
#searchdiv input {
height: 25px;
border: none;
font-size: 0.9em;
padding-left: 5px;
padding-right: 22px;
background-image:url('images/magnifyglass.png');
background-repeat: no-repeat;
background-position: right center;
}
.break {
clear: both;
}
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
}
</style>
</head>
<body>
<div id="container">
<div id="topbar">
<div class="fixedwidth">
<div id="logodiv">
<img src="images/bbclogo.png" alt="bbclogo" height="28" />
</div> <!-- logodiv -->
<div id="signindiv">
<img src="images/signinlogo.png" alt="signinlogo" />
<p>Sign In</p>
</div> <!-- signindiv -->
<div id="topmenudiv">
<ul>
<li>News</li>
<li>Sports</li>
<li>Weather</li>
<li>iPlayer</li>
<li>TV</li>
<li>Radio</li>
<li>More...</li>
</ul>
</div> <!-- topmenudiv -->
<div id="searchdiv">
<input type="text" placeholder="search" />
</div> <!-- searchdiv -->
<div class="break"></div>
<div id="newsbar">
<div class="fixedwidth">
</div>
</div> <!-- newsbar -->
</div> <!-- fixedwidth -->
</div> <!-- topbar -->
</div> <!-- container -->
</body>
</html>
JsFiddle: http://jsfiddle.net/1f030av9/
Ok, no floating problem, you just have to get the <div> outside of it's parent ( another <div> with classname "fixedwidth"). Also removed some paddings in order to make the search bar not go to the 2nd line.
Changed css:
#searchdiv {
float: left;
padding: 7px 0 0 10px;
}
Became:
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed line padding-right: 22px; from #searchdiv input
Here's a fiddle.
Your <div class="fixedwidth"> is set to a width of 1050px; and your div class="newsbar"> is a child of class="fixedwidth". You've set 'newsbar' to 100% but it cannot override the attributes of the parent div class="fixedwidth"
your fiddle
It works for me
It is stretching to 100%
with slight edits not relating to your issue though
#newsbar {
background-color:#990000;
width: 100%;
height: 45px;
color: #FFFFFF;
clear:both;
}
#searchdiv {
float: left;
padding: 7px 0 0 0px;
}
Removed padding-right too from #searchdiv input too