I want to make one navbar on the top of the page hold both a logo and some menu items, like seen on www.adidas.se. However I dont want to use an image as logo, just plain text will do. So basically on the right of the navbar there will be a logotext and from the left side there will be an unordered list that will hold the menu items. I need the logo text to be larger than the other text.
This is my code so far:
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.container {
width: 100%;
}
.header {
background: red;
color: white;
position: relative;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>TITLE TEXT</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>LOGO</h1>
</div>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</div>
</body>
</html>
What I suggest is using display:inline-block for most of your positioning. Check the snippet below and let me know if it helps, and if you need more help or clarification :)
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.container {
width: 100%;
}
.header {
background: red;
color: white;
position: relative;
}
.nav {
display: inline-block;
}
.nav ul li {
display:inline-block;
list-style:none;
}
.header h1{
display: inline-block;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>TITLE TEXT</title>
</head>
<body>
<div class="container">
<div class="header">
<h1>LOGO</h1>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</div>
</div>
</body>
</html>
Make the header a fixed-width container with position: relative, and the list and h1 absolutely positioned inline-blocks inside the header, with bottom and left/right values as below:
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.header {
position: relative;
height: 80px;
background: red;
color: white;
padding: 5px;
}
.header h1 {
position: absolute;
right: 5px;
bottom: 0;
}
.nav ul {
position: absolute;
bottom: 0;
}
.nav ul li {
display: inline-block;
}
.nav ul li a {
text-decoration: none;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8" />
<title>TITLE TEXT</title>
</head>
<body>
<div class="container">
<div class="header">
<div class="nav">
<ul>
<li>ITEM 1
</li>
<li>ITEM 2
</li>
<li>ITEM 3
</li>
<li>ITEM 4
</li>
</ul>
</div>
<h1>LOGO</h1>
</div>
</div>
</body>
</html>
I guess the ideal would be to put all your header info in a div or a header and then float the information inside.
header {
background: red;
color: white;
position: relative;
width: 100%;
height: 80px;
}
.header, .nav {
float: left;
}
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.container {
width: 100%;
}
.header {
background: red;
color: white;
position: relative;
}
<body>
<div class="container">
<header>
<div class="header">
<h1>LOGO</h1>
</div>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</header>
</div>
</body>
But after that, you would still have to style a lot of things, like your nav. There is still a lot of work to do.
Maybe something like this?
* {
margin: 0;
padding: 0;
}
body {
background: yellow;
font-family: 'Josefin', sans-serif;
}
.header-container {
width: 100%;
position:fixed;
background:#acacac;
}
.header-text {
display: inline-block;
background: red;
color: white;
font-size:2em;
}
.nav {
display:inline-block;
}
.nav ul {
list-style: none;
}
.nav ul li{
display:inline-block;
}
<html lang="sv-se">
<head>
<link href='http://fonts.googleapis.com/css?family=Josefin+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css">
<meta charset="utf-8"/>
<title>TITLE TEXT</title>
</head>
<body>
<div class="header-container">
<div class="header-text">
LOGO
</div>
<div class="nav">
<ul>
<li>ITEM 1</li>
<li>ITEM 2</li>
<li>ITEM 3</li>
<li>ITEM 4</li>
</ul>
</div>
</div>
</body>
</html>
Related
I am trying to put nav and img elements next to each other on top of the page.
I am putting both elements in the top_bar container.
I have tried setting the top_bar to display: inline-block;, reducing the width of nav and floating it to left and also floating the img to right. Then I have tried combinations of those, but nothing gives me the result I want. Either the elements start to jump around or the logo is put below the top_bar border.
How can I have nav and img inline and both above the top_bar bottom border?
EDIT: I also want the nav element to be positioned left-most of the page, and img right-most.
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
Add display: flex; to #top_bar
#top_bar {
border-bottom: 1px solid silver;
display: flex;
justify-content: space-between;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
<!DOCTYPE HTML>
<html>
<head>
<style>
#top_bar {
border-bottom: 1px solid silver;
display: flex;
flex-direction: row;
align-items: center;
}
nav ul li {
display: inline-block;
}
img {
width: 130px;
height: 30px;
}
</style>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<img src="cs_logo.png" alt="Image not found"></img>
</div>
</body>
</html>
We can use CSS flex properties to achieve this. But please make sure that you are using vendor prefixes for cross browser compatability.
Your code is missing some declarations.
At first your class #top_bar should have a width declaration.
To make things easyier you could use a class instead of only declare
the image size.
Here´s a fiddle of your code that i´ve modified: https://jsfiddle.net/Thorske/nyv6mwgz/
Modified css:
* {
margin : 0:
padding : 0;
}
#top_bar {
margin : 0 auto;
width : 100%;
border-bottom: 1px solid silver;
}
.clear {
clear : both;
}
nav {
float : left;
width : 80%;
}
nav ul li {
display: inline-block;
}
.img_container {
float : right;
width : 20%;
}
.img_conatiner img {
width: 130px;
height: 30px;
}
Modifed html:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div id="top_bar">
<nav>
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
</nav>
<div class="img_container">
<img src="cs_logo.png" alt="Image not found" />
</div>
<div class="clear"></div>
</div>
</body>
</html>
There only simple changes:
the #top_bar has now a defined width.
nav has now a defined width and float.
added the class "img_container" with defindet width and float
which contains the image.
the class clear keeps everything were it is supposed to be.
Since i don´t know if you want to make your code "responsiv" you´ve
to set your values for "width" yourself.
My logo is not resizing on mobile devices and therby my menu overlaps the logo. I've hard coded the css property for my logo for desktop screen since I want my logo to appear big on desktop but i want it to resize on mobile devices and I have set setting for it but it does not work, kindly please tell me what is the best solution or what i'm doing wrong, how can i fix it.
.logo {}
#logoimg {
width:250px; height:70px; transition: all .3s ease;
}
/*============= media query max-width: 768px; =============*/
#media only screen and (max-width:768px) {
/* start query */
.header { padding-top: 5px; padding-bottom: 5px;}
.logo img {width:auto;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
img {
width: auto ;
max-width: 100% ;
height: auto ;
}
/*============= media query max-width: 768px; =============*/
#media only screen and (max-width:768px) {
/* start query */
.header {
padding-top: 5px;
padding-bottom: 5px;
}
.img {
width:100%;
height:auto;
}
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<!-- logo -->
<div class="col-md-12">
<img src="https://upload.wikimedia.org/wikipedia/en/9/91/National_Film_and_Television_School_Logo.jpg" alt="logo"> </div>
<!-- logo -->
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="navigation"> <!-- navigation start-->
<ul>
<li class="active">Home</li>
<li>Menu 1</li>
<li>Menu 2 </li>
<li>Menu 3</li>
<li>Menu 4</li>
<li>Menu 5</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
use class img-responsiv
It will help you
i tried to make a top nav bar. why my version is different from the w3s version, I cant find my mistake.
this is the css code and the html code
.logo {
padding-right: 30px;
color: #ffffff;
}
.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #a80664;
border-color: transparent;
background-color: #a80664;
}
.topnav-menu {
float: left;
}
.topnav-menu a {
display: block;
color: #ffffff;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.topnav-menu a:hover:not(.active) {
background-color: #ff0094;
}
.topnav-menu a.active {
{
color: #a80664;
background-color: #f3f3f3;
}
}
<!DOCTYPE html>
<html>
<head>
<!-- BOOTSTRAP CSS STYLESHEET LINK -->
<!-- MY CUSTOM CSS -->
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<title></title>
</head>
<body bgcolor="#000000">
<li>
<div class="logo"><a>LOGO</a></div>
</li>
<ul class="topnav-menu">
<li><a class="active" href="#Home">HOME</a></li>
<li>KATEGORI</li>
</ul>
</body>
</html>
With those code I can't make a top nav bar like this
this is what i want
what kind of mistake did i do?
You have to put your logo before tag and you have to wrap in
and you have to wrap your all code in side
<nav>
<div class="logo">
<img src="imagepath">
</div>
<div class="wrapper">
<ul>
<li>Home</li>`enter code here`
**strong text**<li>About</li>
</ul>
</div>
</nav>
my sample code below, works in all browsers apart from ie9, in ie9 the leftcolumn is actually nearer the middle of the page for some reason! (im sure if you copy paste you will be able to replicate)
anyone help me out as to why? the css seems fine to me?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>TEST</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<style type="text/css">
body, html, form {
padding:0;
margin:0;
}
body {
font-family:"Segoe UI",Tahoma,Helvetica,Sans-Serif;
font-size:12px;
color:#333333;
}
#container {
min-width:1200px;
}
#horizontal-nav {
background: #1AA2DE;
width: 100%;
height:41px;
}
#left-column {
margin-top:10px;
width:210px;
float:left;
}
#center-column {
float:left;
width:180px;
margin-top:10px;
}
#right-column {
margin-top:10px;
float:left;
margin-left:10px;
}
/* TOP NAV */
.hmenu,
.hmenu ul {
list-style: none;
margin:0;
padding: 0 0 0 20px;
}
.hmenu {
font-size: 16px;
float: left;
}
.hmenu > li {
float: left;
}
.hmenu li a, .hmenu li span {
display: block;
padding: 10px 20px;
text-decoration: none;
color: #fff;
}
.hmenu > li:hover > a {
background: #5EBEE8;
}
</style>
</head>
<body>
<div id="container">
<div id="horizontal-nav">
<ul class="hmenu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="left-column">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
<div id="right-column">
Right Content
</div>
</div>
</body>
</html>
http://jsfiddle.net/isherwood/Wgtcy/
The positioning of the horizontal-nav div is throwing off your subsequent floats in the container div in IE9. Give your horizontal-nav div a float: left; to fix.
Unless you plan on creating a fixed header you should always have block-level elements playing by the same positioning rules. Since you are using float:left; for the other block elements then this will fix on ALL machines, regardless of weird configs people are running in random browsers.
Currently I have the following code...
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="UTF-8" />
<link href="verna.css" type="text/css" rel="stylesheet" />
</head>
<body>
<section id="devices">
<h1>Gruppen</h1>
<div class="group">
<h2>Gruppe 1</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
<div class="group">
<h2>Gruppe 2</h2>
<ul>
<li class="device">Schalter 1</li>
<li class="device">Schalter 2</li>
<li class="device">Schalter 3</li>
</ul>
</div>
</section>
</body>
</html>
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
#devices {
background-color: yellow;
}
#devices .group {
background-color: gray;
}
#devices .group ul {
text-align: center;
}
#devices .group .device {
background-color: green;
display: inline-block;
margin: 5px;
max-width: 200px;
width: 100%;
}
... which looks like this:
But I want that the green <li>-elements floats in columns. It should look like this:
Please note: The number of the green <li>-elements is variable, there can be more or less than three elements and there can be more than two columns! I want to order the <li>-elements "column-wise" and center them...
Thanks for help :-)
The thing that is centering "Schalter 3" is text-align: center;. We can fix this by removing
#devices .group ul {
text-align: center;
}
and adding:
#devices .group ul {
margin-left: 50px;
}
#devices .group li {
text-align: center;
}
in its place. This centers the text in the li element, instead of centering the li element inside the ul. And it adds the margin to the left to get the indent you wanted.
Working Fiddle.
Restructure your html so that each "column" is it's own container (div) which has an appropriate width. Alternatively, if you hate yourself, use a table.
Check out this fiddle.
The trick was to turn the lis back into block-level elements so that they could have width. Then set width: 40%; (40% leaves a little room for the 5px margin) and float: left;. Also adding overflow: auto; to the ul so that it would contain its floated lis.