I am having simple cshtml layout like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>#ViewData["Title"] - TDMajstor</title>
<link rel="stylesheet" type="text/css" href="~/css/_Layout.css" />
</head>
<body>
<div id="MainWrapper">
<div id="HorizontalMenuWrapper">
<ul>
#{
string currLink = Context.Request.Path;
}
<li>Pocetna</li>
<li>Termodom</li>
</ul>
</div>
</div>
#RenderBody()
<hr />
</body>
</html>
It's CSS is:
body {
}
#HorizontalMenuWrapper {
/*text-align: center; - ako zelim da mi meni bude centriran*/
background-color: #579cff;
width: 100%;
}
#HorizontalMenuWrapper ul {
list-style-type: none;
overflow: hidden;
background-color: #579cff;
font-weight: bolder;
font-size: large;
display: inline-block;
margin: 0;
padding: 0;
vertical-align: top;
height: 49px;
}
#HorizontalMenuWrapper li {
width: 150px;
float: left;
box-sizing:border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 1px solid;
height: 100%;
}
#HorizontalMenuWrapper li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
#HorizontalMenuWrapper li a:hover {
background-color: white;
color: black;
text-decoration: underline;
}
.Active {
background-color: #ff7f00;
}
#media only screen and (max-width: 600px)
{
#HorizontalMenuWrapper li
{
float: none;
}
}
Now razor page which use this layout is:
#page
#model TDMajstor.Pages.IndexModel
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TDMajstor</title>
<link rel="stylesheet" type="text/css" href="~/css/Null_Body.css" />
<link rel="stylesheet" type="text/css" href="~/css/Index.css?id=3" />
</head>
<body>
<div id="MainWrappers">
TDMajstor
ddd
</div>
</body>
</html>
Css for it is:
#MainWrapper
{
width: 100%;
text-align: center;
background-color: red;
}
Problem is making this text-align (since other i cannot see) but for some reason it also center elements inside my layout (ul, li) plus i targeted ID but still it affects it somehow.
I have tried removing text-align line and it moves layouts elements to normal so i know that this css is affecting it but there is no logic for me.
#MainWrapper is the container of all other elements. So whatever styles you set to it, they will be inherited by it's descendants ( ul, li included ).
If you want to keep that style to #MainWrapper , you need to overwrite it on the elements you don't want to have text-align:center.
See example below
#MainWrapper {
text-align:center;
}
ul li {
text-align:left;
}
<div id="MainWrapper">
<h1>I will inherit and be centered</h1>
<ul>
<li>Some list to the left</li>
<li>Some list to the left</li>
<li>Some list to the left</li>
</ul>
<div class="some-child">
I will be centered
</div>
</div>
Related
Ideally I want to keep the same layout when the browser window shrinks. I don't know if I need media queries to do that. I was trying to use flex-shrink but it wasn't having any effect. I thought flex has a default shrink property? I think part of the problem is I have too many css rules that may be conflicting with one another- I'm trying to get it to look like the wireframe image (below). Here is the codepen.
wireframe-
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: 'Cantarell', sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: 'Cantarell', sans-serif;
font-size: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src="images\ic-logo.svg" alt="logo" />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul>
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
You will have to set media queries for your elements to adjust their size at a certain browser width. See the sample ones I added below:
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
Of course, feel free to change the sizing as you desire. See it working in the snippet below.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-weight: unset;
}
a {
text-decoration: none;
}
header {
background-color: white;
height: 64px;
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
display: fixed;
z-index: 10;
width: 100%;
border-bottom: 1px solid black;
}
.logo {
height: 32px;
display: flex;
align-items: center;
}
.logo img {
height: 50px;
}
.logo h1 {
font-family: "Cantarell", sans-serif;
text-transform: uppercase;
color: gray;
}
.logo .bold {
font-weight: 700;
color: black;
}
nav {
margin-right: 24px;
}
nav ul {
display: inline-flex;
list-style: none;
}
nav ul li {
margin-left: 16px;
}
nav a {
color: black;
font-family: "Cantarell", sans-serif;
font-size: 20px;
}
#media only screen and (max-width: 650px) {
.bold,
.logo > h1,
nav > ul > li > a {
font-size: smaller;
white-space: nowrap;
}
.logo {
max-width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Colmar Academy</title>
<link href="https://fonts.googleapis.com/css2?family=Cantarell:wght#400;700&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="images\ic-logo-white.svg" />
<link href="reset.css" type="text/css" rel="stylesheet" />
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<header>
<div class="logo">
<img src='https://svgshare.com/i/esC.svg' title='' />
<h1><span class="bold">Colmar</span>Academy</h1>
</div>
<nav>
<ul class="nav-links">
<li>On campus</li>
<li>Online</li>
<li>For companies</li>
<li>Sign in</li>
</ul>
</nav>
</header>
</body>
</html>
I am trying to use a single div to make a navbar with image and ul. There is a condition that I can't use flexbox or grid display. I am trying to make it from the basics that I learned till now.
Issues I am getting:
Image is getting aligned to the top. Why it is not coming on the base of its div?
Without making two divs, Can I align ul and image vertically at the center in a single div?
I know there will be much better ways to do this, but I want to get a basic understanding that what is actually happening.
Here is HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://www.qousqazah.com/blog/wp-content/uploads/2018/01/features-of-a-business-logo.png"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
Here is the CSS Code:
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: inline-block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
And Here is JSFiddle
Change
.left img {
display: inline-block;
vertical-align: bottom; << instead of baseline
border:2px solid pink;
width: 200px;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
margin: 0; << added
}
and it works: fiddle
Note that with inline-block also spaces will be displayed. SO
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<<< this will create unwanted whitespace between the elements
<ul>
<li>HOME</li>
The image is aligned to the baseline. But the gap is due to the bottom margin of ul. So, remove the culprit from your code.
ul {
margin-bottom: 0;
}
you can do like this make image block and margin auto
* {
font-family: 'Montserrat', sans-serif;
}
.left {
display: inline-block;
border: 2px solid red;
position: absolute;
left: 10px;
}
.left img {
display: block;
vertical-align: baseline;
border:2px solid pink;
width: 200px;
margin: auto;
}
.left ul {
border:2px solid blue;
display: inline-block;
text-align: center;
}
.left ul li {
display: inline;
text-decoration: none;
margin: 2px;
font-weight: bold;
}
.left ul li a{
white-space: nowrap;
text-decoration: none;
color:black;
}
.right {
position: absolute;
display: inline-block;
border: 2px solid green;
top: 8px;
right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="header">
<div class="left">
<img
src="https://cdn.magenest.com/wp-content/uploads/2018/12/Magento-Logo-768x327.jpg"
alt=""
id="logo"
/>
<ul>
<li>HOME</li>
<li>BLOG</li>
<li>CONTACT US</li>
</ul>
</div>
<div class="right">This is right</div>
</header>
</body>
</html>
I have a nav bar which i cannot centre horizontally. I have a nav tag with a ul tag inside and li tags inside that then some of the li tags have ul's and li's to create dropdown lists.
I cannot get the nav to be centered in the page??
/* Main Header Menu */
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
float: left;
position: relative;
display: inline-block;
}
<!DOCTYPE html>
<html lang="en-gb">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
</html>
Please point out anything that might help with my problem, and an explanation would be awesome to as i am trying to learn the reason why as well as just moving/centering the element.
thanks
James
edit:
Changed code to only display the issue i am asking about.
Remove float: left;
.headermenu>ul>li {
position: relative;
display: inline-block;
}
Since you are already using display: inline-block, it is not needed and leads to your problem. For a detailed explantion on both display: inline-block and float and the difference between them, see this answer for reference: Advantages of using display:inline-block vs float:left in CSS
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
display: inline-block;
text-align: center;
}
.headermenu>ul {
padding-left: 0;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
Try this
.header-menu-wrap {
display: inline-block;
width: 100%;
text-align: center;
}
.headermenu {
padding: 0 10% 0 10%;
overflow: hidden;
}
.headermenu>ul>li>a {
padding: 0 10px;
}
.headermenu>ul>li {
position: relative;
display: inline-block;
}
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<title>Complete Suites</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
<div class="header-menu-wrap">
<nav class="headermenu">
<ul>
<li>Home</li>
<li>ON SALE</li>
<li>Suites</li>
<li>Baths</li>
</ul>
</nav>
</div>
</body>
Your nav is already centered. But if you want to center your middle ul element you should set every ul's width to 33% and set middle ul text align to center.
I want to create a menu bar with a list, but it's all in one place!
If I play with the position of the menu (absolute, fixed, ...), it's good, but I want that the menu will be fixed.
CSS:
img.logo {
max-height: 90px;
width: auto;
position: fixed;
clip: rect(5px, 95px, 90px, 5px);
}
a,
li {
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: fixed;
text-decoration: none;
}
li {
border: 1px solid black;
}
***HTML:***
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li>
<img class="logo" src="img/logo.png" alt="problem">
</li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Run it and you will see what I see...
What is wrong?
PS: Can you say how can I make it all in one line, like a real menu bar
I've made a few changes by simplifying your css content.
You just need to use display: block and float:left to arrange your menu items properly. I've added a few more tweaks to it to suit what you wanted to achieve.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
border: 1px solid #000;
}
li a {
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
<style>
img.logo {
max-height:90px;
width:auto;
position:fixed;
clip: rect(5px,95px,90px,5px);
}
a, li {
list-style: none;
color: inherit;
list-style: none;
text-align: center;
display: inline-block;
padding-right: 10%px;
padding-left: 5%;
padding-bottom: 10px;
font-size: 40px;
font-family: Odin rounded;
vertical-align: text-top;
position: relative;
text-decoration: none;
display: inline;
}
li {
border:1px solid black;
}
***HTML:***
</style>
</head>
<body>
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</body>
</html>
Just changing display:inline-block to inline worked for me. Preview this on full page as this is not responsive example.
Hope This could help. :)
You should remove position:fixed from img-logo, a, li and add position:fixed or position:sticky to their parent container
.navbar{
float: right;
position: sticky /* use can use position:fixed */
}
img.logo{
max-height:90px;
width:auto;
clip: rect(5px,95px,90px,5px);
}
a, li{
color:inherit;
list-style:none;
text-align:center;
padding-right:10px;
padding-left:5px;
padding-bottom:10px;
font-size:16px;
font-family:Odin rounded;
vertical-align:text-top;
text-decoration:none;
display: inline-block;
}
li {
border:1px solid black;
}
<html lang="fr-FR">
<head>
<title>Team NoMaD</title>
<link rel="stylesheet" href="css/styles.css">
<meta charset="UTF-8">
</head>
<body>
<div class="navbar">
<ul class="barre">
<li><img class="logo" src="img/logo.png" alt="problem"></li>
<li>Menu
<li>Membres
<li>Calendrier
<li>Contact
</ul>
</div>
</body>
</html>
I've been trying to create a pretty basic CSS navbar, comprised of a "navbar" container div, and within that a "logo" div and a "menu" div.
However, I seem to have run into some trouble with getting the "menu" div (which contains an unordered list of links) to nest within the "navbar" container div.
Perhaps I'm missing something very simple, but I've tried doing some Googling and can't seem to find a solution to this issue.
I did see a tutorial that showed how to create a similar type of navbar using only an unordered list, but given that I'm also looking to have a logo and potentially other elements in the navbar, I don't think that's what I'm looking for.
Please see below for the HTML and CSS that I've been working with. Any assistance would be greatly appreciated.
Thanks!
body{
padding: 0px;
margin: 0px;
}
.navbar{
height: 50px;
width: 100%;
background: #b4cef7;
}
.logo{
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul{
list-style-type: none;
}
.navbar ul li{
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a{
text-decoration: none;
color: black;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Simple CSS Navbar</title>
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
</body>
</html>
You have a set height on the navbar and a block level element, forcing the navbar to a new line.
There's many ways you could have the elements on the same line, such as floating or displaying inline-block.
Here's a simple demo of using inline-block:
body {
padding: 0px;
margin: 0px;
}
.navbar {
height: 50px;
width: 100%;
background: #b4cef7;
}
.navbar>* {
display: inline-block;
vertical-align: top;
}
.logo {
padding-top: 7px;
padding-left: 10px;
width: 50px;
padding-right: 0px;
margin-right: 0px;
}
.navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.navbar ul li {
float: left;
height: 100%;
width: 50px;
margin: 10px;
background-color: white;
border: 1px solid black;
}
.navbar ul li a {
text-decoration: none;
color: black;
}
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet" />
<div class="navbar">
<div class="logo">
<i class="fas fa-coffee fa-2x"></i>
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</div>
There isn't generally a option you should use, be it inline-block, floating, or flexbox; it really just depends on your preferences and target browsers.