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
Related
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>
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>
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.
How can the background be changed to the exact same color when the tab is clicked on? Currently, it just remains the same color. Also would it be possible to have the first tab colored the same as the background color of the content area when the page is loaded?
<!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=iso-8859-1" />
<title>CSS-TABS | CSS-Only "DOM TABS"</title>
<style type="text/css">
#pagewidth { width: 760px; margin: 0 auto 0 auto; }
#navigation { margin: 0 10em 0 0; background: #000000; color: #FFFFFF; }
#navigation li { display: inline; padding: 0 2em 0 2em; }
.content { background: #CCCCCC; height: 20em; padding: 1em;}
a { color: #0066FF; }
a:hover { color: #00CCFF; }
a:active { font-weight:bold; }
#container { height: 20em; overflow: hidden; }
</style>
</head>
<body>
<div id="pagewidth">
<ul id="navigation">
<li>Content Block 1</li>
<li>Content Block 2</li>
<li>Content Block 3</li>
</ul>
<div id="container">
<div class="content">
<a name="c1" id="c1"></a>
<h1>Heading 1</h1>
<p>Here is some content, I hope that you like it!</p>
</div>
<div class="content">
<a name="c2" id="c2"></a>
<h2>Heading 2</h2>
<p>Now that you have read content block 1, you can learn more in this block</p>
</div>
<div class="content">
<a name="c3" id="c3"></a>
<h3>Heading 3</h3>
<p>In conclusion, content blocks are fun</p>
</div>
</div> <!-- end container -->
</div> <!-- end pagewidth -->
</body>
</html>
You just need a little more HTML, and a little more CSS, like so:
CSS Added:
.content .sub{ height: 20em; padding: 1em; }
...
#sub1{ background: blue; }
#sub2{ background: green; }
#sub3{ background: yellow; }
And:
<div class="sub" id="sub1">...</div>
... as wrappers for the tab contents.
The final page would look like this:
<!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=iso-8859-1" />
<title>CSS-TABS | CSS-Only "DOM TABS"</title>
<style>
#pagewidth { width: 760px; margin: 0 auto 0 auto; }
#navigation { margin: 0 10em 0 0; background: #000000; color: #FFFFFF; }
#navigation li { display: inline; padding: 0 2em 0 2em; }
.content { background: #CCCCCC; }
.content .sub{ height: 20em; padding: 1em; }
a { color: #0066FF; }
a:hover { color: #00CCFF; }
a:active { font-weight:bold; }
#container { height: 20em; overflow: hidden; }
#sub1{ background: blue; }
#sub2{ background: green; }
#sub3{ background: yellow; }
</style>
</head>
<body>
<div id="pagewidth">
<ul id="navigation">
<li>Content Block 1</li>
<li>Content Block 2</li>
<li>Content Block 3</li>
</ul>
<div id="container">
<div class="content">
<a name="c1" id="c1"></a>
<div class="sub" id="sub1">
<h1>Heading 1</h1>
<p>Here is some content, I hope that you like it!</p>
</div>
</div>
<div class="content">
<a name="c2" id="c2"></a>
<div class="sub" id="sub2">
<h2>Heading 2</h2>
<p>Now that you have read content block 1, you can learn more in this block</p>
</div>
</div>
<div class="content">
<a name="c3" id="c3"></a>
<div class="sub" id="sub3">
<h3>Heading 3</h3>
<p>In conclusion, content blocks are fun</p>
</div>
</div>
</div> <!-- end container -->
</div> <!-- end pagewidth -->
</body>
</html>
Here is a JSFiddle showing how it works: http://jsfiddle.net/fDk3z/
This is a pure html/css Question, here it goes..
I have a floating div to the right of my page layout, I need it to disappear if my screen size is too small (or if resize the browser window to a smaller setting). Let's say it's something as simple as this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Layout test</title>
<link href="simple.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<h1>Welcome</h1>
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</body>
</html>
let's say it has this simple CSS too:
#main {
border: 1px solid black;
width: 800px;
height: 500px;
padding: 7px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 10;
}
#right-div {
border: 1px solid black;
float: right;
width: 200px;
position: relative;
z-index: 9;
}
As of now, if I reduce window size, the div with id of right-div starts to overlap with the "main" div. I need to know how to make it disappear or hide if the screen size is small (or getting smaller).
How can I accomplish this?
Thank you all in advance for your help,
J.
Use Media Queries. Example:
#media all and (max-width: 300px) {
.floated_div { display: none; }
}
jsFiddle Example. Resize the output area until it is smaller then 300px to see the effect.
See this answer for IE compatibility.
Here is a solution if you have a fixed width layout. http://jsfiddle.net/uMVMG/
<div id="container">
<div class="inner">
<div id="right-div">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
</div>
<div id="main">
<p>Some content goes here!</p>
</div>
</div><!-- .inner end -->
</div><!-- #container end -->
#container {
overflow: hidden;
max-width: 500px;
min-width: 300px;
}
#container .inner {
width: 500px;
}
#right-div {
float: right;
width: 200px;
background: green;
}
#main {
width: 300px;
height: 200px;
background: red;
}