I need help with the navigation, to get it in line with the logo. Basically in between the logo and currency button.
Is there an easy way to achieve it instead of messing around with divs and many css adjustments?
My knowledge of html is pretty basic so seeking for help here. Thanks!
header
<header class="main-header">
<div class="bg" style="display: none;"></div>
<div class="row top">
<div class="columns">
<div class="search-account columns">
</div>
<div class="bottom-row">
<div class="row">
</div>
<div class="main-menu-dropdown-panel">
<div class="row"> </div>
</div>
<div class="mobile-menu">
<div class="row">
</header>
Here is a basic template you can use.
header h1,
ul,
li {
display: inline-block;
}
ul {
float: right;
}
body {
margin: 0;
padding: 0;
}
h1 {
margin: 0 0 0 10px;
font-family: verdana;
font-weight: 100;
}
a {
text-decoration: none;
color: black;
margin-right: 10px;
font-family: arial;
font-weight: 100;
}
a:hover {
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<header>
<img src="logo.png" alt="logo">
<h1>Heading</h1>
<ul>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
</ul>
</header>
</body>
</html>
Related
I'm new to coding world. I have problem with my Navbar, on 100% zoom on browser it's everything okay,but when i zoom in 150% scale everything will be messed. How can i fix everything to be on the same size when somebody zoom in and zoom out? Thank you in advance.
ZOOM WITH 100%
ZOOM WITH 150%
ZOOM WITH 200%
* {
margin: 0;
padding: 0;
}
.pre-header {
background-color: #111618;
height: 60px;
color: #fff;
padding-top: 15px;
}
.pre-header .secondary-menu {
list-style: none;
}
.pre-header .secondary-menu li {
display: inline-block;
margin-left: 15px;
}
.pre-header .secondary-menu li a {
color: #787374;
text-transform: uppercase;
}
.main-nav .main-menu {
list-style: none;
margin-top: 15px;
}
.main-nav .main-menu li {
display: inline-block;
margin: 10px;
}
.main-nav .main-menu li a {
color: #767676;
text-transform: uppercase;
}
.main-nav img {
margin-top: 10px;
}
.main-nav .main-menu .free-quote-btn a {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" href="probaferomotosajta.css">
<title>Feromoto - Hidraulicna creva</title>
</head>
<body>
<header>
<div class="pre-header">
<div class="container">
<div class="row">
<div class="col-md-6">
<p>UNDER ATTACK? - S.O.S LINE 880.000.800</p>
</div>
<div class="col-md-6">
<ul class="secondary-menu">
<li>Login</li>
<li>Contacts</li>
<li>Presale Service</li>
<li>Whitepapers</li>
</ul>
</div>
</div>
</div>
</div>
<div class="main-nav">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="slika1.png" width="120" height="120" alt="">
</div>
<div class="col-md-8">
<ul class="main-menu">
<li>Home</li>
<li>News</li>
<li>Blog</li>
<li>Shop</li>
<li>Courses</li>
<li>Rating</li>
<li>Team</li>
<li>Job</li>
<li class="free-quote-btn">Free Quote</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</body>
</html>
I think it is because window width decreases when you zoom in your browser.
So you can fix it by using #media query.
I want to understand CSS basics for my initial website.
How can I position following divs so I would have this structure.
Logo, Call, and Message are just text (or images)
Bellow them is navigation bar (I guess unordered list)
Here is my code:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #a4afc1;
}
#container {
width: 1080px;
margin-top: 10px;
margin-right: auto;
margin-bottom: 10px;
margin-left: auto;
position: relative;
background-color: #EEE;
}
<div id="container">
<header>
<div id="branding">
<h3>logo</h3>
</div>
<div id="callme">
<h3>Call me</h3>
</div>
<div id="msgme">
<h3>Message me</h3>
</div>
</header>
</div>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.left {
float:left;
}
.right {
float:right;
}
.clear {
clear:both;
}
ul {
margin:0;
padding:0;
}
li {
list-style-type:none;
}
</style>
</head>
<body>
<div class="container">
<div class="left">Logo</div>
<div class="right">
<span>Call</span>
<span>Message</span>
</div>
<nav class="clear">
<ul>
<li class="left">
link A
</li>
<li class="left">
link B
</li>
<li class="left">
link C
</li>
</ul>
</nav>
</div>
</body>
</html>
I am trying to have a navigation bar that doesn't have any extra space on the sides and on the top and bottom. However nothing seems to be. Is there a way I can fix this. An example of how I would like my navigation bar to look is dootrix.com
Here is an image to illustrate what the problem is: image
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
You have to disable the margin (https://www.w3schools.com/css/css_margin.asp) of your body tag. You can do this in your css. Look at what I did at the top of this css file. That should work.
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: mediumblue;
text-align: center;
object-position: fixed;
width: 100%;
top: 0;
}
li {
display: inline-block;
}
li a {
display: block;
color: white;
padding: 14px 50px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: darkblue;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- Navigation Bar -->
<ul>
<li>
ABOUT
</li>
<li>
PRODUCTS
</li>
<li>
COUPONS
</li>
<li>
FEEDBACK
</li>
</ul>
<div id='about'>
<a id="about" name='about'></a>
<img src="https://image.ibb.co/ft1bSv/cover.jpg" alt="cover">
<div id='about.container'>
<h2>About:</h2>
<p>We are a small family owned convenience store! We have operating since the early 2000s.</p>
</div>
</div>
<div id='products'>
<a id="products" name='products'></a>
</div>
<div id='coupons'>
<a id="coupons" name='coupons'></a>
</div>
<div id='feedback'>
<a id="feedback" name='feedback'>
</a></div>
</body>
</html>
I am really new to coding. Formatting is always an issue with me and I spend lots of time looking at similar questions in here and reading tutorial etc and tried different things. I have the exact same code on one page and it seems center. However I can't get my items centered here or replicate. Once I have my header centered I would like my nav bar to be centered underneath. PLease help.
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left:auto;
margin-right:auto;
width: 470px;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
To center the title: make .box width:100% and the h2 text-align:center.
To center the ul menu I followed the solution three: align ul to center of div
html,
body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
width: 100%; // NEW WIDTH
padding: 10px;
display: inline-block;
}
.box h2 {
text-align: center; // CENTER TITLE
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align: middle;
border-radius: 0px;
background-color: white;
display: inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left: auto;
margin-right: auto;
text-align: center;
display: table; // SOLUTION 3
margin: 0 auto; //
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-4 col-centered">
<div class="box">
<h2>lewis <br><span>Designs</span></h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<ul class="nav nav-pills">
<li>Home
</li>
<li>About
</li>
<li>Gallery
</li>
<li>Contact
</li>
</ul>
</div>
</div>
</div>
I see that you're using Bootstrap. You can do what you want with a lot less markup.
.nav-pills > li {
float: none;
display: inline-block;
}
<div class="container text-center">
<h2>lewis <br><span>Designs</span></h2>
<ul class="nav nav-pills text-center">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</div>
Demo JSFiddle
You can make use of better semantic code to make it clear how this section is functioning and then simplify the code with built-in classes in Bootstrap, e.g., text-center.
<header class="header text-center" id="header">
<h1>lewis Designs</h1>
<nav>
<ul class="nav nav-pills">
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contact</li>
</ul>
</nav>
</header>
The only CSS needed to center the nav is this:
nav {
display: inline-block;
}
I'd definitely recommend familiarizing with documents pertaining to things like utility classes in Bootstrap. You may not be able to do everything you want, but you can minimize the need to go markup heavy and create a bunch of classes that Bootstrap already has covered in various ways.
Is this good for you? (please look at the snippet)
html, body {
margin: 0 auto;
padding: 0;
}
.container {
max-width: auto;
margin: 0 auto;
}
.box {
text-align: center;
border: 2px white dotted;
border-radius: 15px;
margin-top: 30px;
width: 100%;
padding: 10px;
display:inline-block;
}
.nav-pills li a {
color: black;
border-radius: 10px;
margin: 3px;
font-size: 20px;
font-weight: 589px;
vertical-align:middle;
border-radius:0px;
background-color: white;
display:inline-block;
}
.nav-pills {
position: relative;
margin-top: 20px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
.center-box{
margin-left: auto;
margin-right: auto;
width: 391px;
}
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.2.0" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script data-require="bootstrap#*" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link data-require="bootstrap-css#3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="header" id="header">
<div class="container">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class="box">
<h2>lewis <br />
<span>Designs</span>
</h2>
</div>
</div>
</div>
<div class="menu">
<div class="row row-centered">
<div class="col-md-6 col-centered">
<div class='center-box'>
<ul class="nav nav-pills">
<li>
Home
</li>
<li>
About
</li>
<li>
Gallery
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
In my header, I'm having an issue where if I put regular text in, the lineheight is fine, but if I use a list, I get a good amount of padding on the top and the bottom.
Below is all relevant HTML and CSS as well as a fiddle
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
My line-height isn't bad at all!
</div>
</aside>
</div>
</header>
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
<ul>
<li>My line-height is huge!</li>
</ul>
</div>
</aside>
</div>
</header>
CSS
header
{
background-color: #eee;
}
.clearfix
{
overflow: auto;
}
header #title-container
{
font-size: .7em;
}
header aside .nav
{
padding-right: 4px;
float: right;
}
header aside .nav
{
background-color: red;
}
Reset the margin and padding on your ul and li.
http://jsfiddle.net/PSeFe/3/
ul {
margin: 0;
padding: 0;
}
li {
margin: 0;
padding: 0;
}
Adding style="display: inline; padding: 0;" to your <ul>-tag fixes the problem. The second part of your html would look like this then:
<header class="clearfix">
<div class="content-wrapper">
<aside>
<div class="nav">
<ul style="display: inline; padding: 0;">
<li>My line-height is huge!</li>
</ul>
</div>
</aside>
</div>
</header>