So I'm re-creating a template I've come across and need some help...
I want the nav bar at the top to cover the screen in width, however the way I currently have the code it's putting it inside the container. Any suggestions how I can do this without affecting the rest of the flow?
body {
margin:0;
}
.container {
margin:auto;
width:80%;
}
nav {
background-color:black;
color:white;
font-size:25px;
height:50px;
opacity:0.5;
}
nav ul {
margin-top:0;
}
nav ul li {
display:inline;
}
nav ul li a {
padding:30px;
text-decoration:none;
}
nav p {
margin-top:0;
}
.showcase,header {
background-image:url("space.jpg");
background-size:cover;
height:500px;
}
#media (max-width: 1800px) {
h1 {
text-align:left;
}
nav ul {
display:none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Space Prospection</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div class="showcase">
<nav>
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
<div class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</div>
<div class="secondary_content">
<h1>Featured Projects</h1>
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance
.container should be inside <nav> content, or any contents inside website so here's your code:
HTML:
<div class="showcase">
<nav>
<div class="container">
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<div class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</div>
<div class="secondary_content">
<h1>Featured Projects</h1>
</div>
</div>
</div>
.container works to save all website content on the same width but not all backgrounds
Well, you just have to put your menu outside of your div.container. If you want a max-width for your headers content, you could have another wrapper inside.
body {
margin: 0;
background-image:url("https://picsum.photos/1600/900");
background-size: cover;
min-height: 100vh;
}
.container {
margin: auto;
max-width: 800px;
}
nav {
background-color: black;
color: #FFF;
font-size: 25px;
opacity: 0.5;
}
nav .container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
}
nav ul {
margin:0;
}
nav ul li {
display: inline-block;
}
nav ul li a {
text-decoration:none;
display: block;
color: #FFF;
}
nav p {
margin-top: 0;
}
.showcase, header {
background-image:url("https://picsum.photos/1600/900");
background-size:cover;
height:500px;
}
#media (max-width: 1800px) {
h1 {
text-align:left;
}
nav ul {
display:none;
}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Space Prospection</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<nav>
<div class="container">
Space Prospection
<ul>
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div class="container">
<main class="main_content">
<h1>Soyuz TMA-M <span>Spacecraft</span></h1>
<button>Read More</button>
</main>
<aside class="secondary_content">
<h1>Featured Projects</h1>
</aside>
</div>
</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'm working on a site but I'm trying to set the navigator bar at the right and that works good but when I'm trying to give the <ul> a color it doesn't give it the color if I remove float:right; it only works.
Does someone knows how to do this?
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link rel="stylesheet" type="text/css" href="styling.css">
<head>
<body>
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
</body>
</html>
div.navi li {
font-size:30px;
display:inline-block;
width:12%;
float:right;
}
div.navi {
background-color:red;
}
Your div should have some width and height
div.navi li {
font-size:20px;
padding-right:10px;
float:right;
}
.navi {
background-color:red;
width:100%;
height:20px;
}
ul{
list-style:none;
}
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
div.navi {
background: red;
float: right;
width: 12%;
}
div.navi li {
font-size: 30px;
display: inline-block;
}
Please try
Since div.navi only contains floated elements, it doesn't have any height of its own (i.e. height 0), so you don't see any background color.
To avoid this (and let div.navi wrap the lielements), add overflow: auto to div.navi
div.navi li {
font-size: 30px;
display: inline-block;
padding: 0 10px 5px 10px;
float: right;
}
div.navi {
background-color: red;
overflow: auto;
}
<div class="navi">
<ul>
<li>Contact</li>
<li>Portfolio</li>
<li>About</li>
<li>Home</li>
</ul>
</div>
How can I set up the positioning of my nav and header to look like this?
I have been trying search around on google and stack overflow, but couldn't find anything.
Here is my code, thanks.
body
{
background-image: url('bground.png');
text-align: center;
font-family: arial;
}
#wrap { margin: 0 auto; width: 700px; }
#header{
}
ul, li, a{
display: inline;
list-style: none;
font-family: arial;
color: #000000;
text-decoration: none;
font-size: 25px;
}
li, a:hover{
display: inline;
list-style: none;
font-family: arial;
font-size: 25px;
color: #ffdc99;
}
#content{
background: #ffffff;
max-width: 800px;
margin-left: auto;
margin-right: auto;
text-align: center;
vertical-align: bottom;
}
/* Edits */
#header,
#content{ clear: both; }
#header,
#header h1,
#header #nav { float: left; }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Gullible</title>
<link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div id="wrap">
<div id="logo">
<h1>Gullible</h1>
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<h2>Gullible</h2>
<ul>
<li>Home</li>
<li>Shop</li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
</html>
Try Flexbox and justify-content: space-around;
Flex items are evenly distributed so that the space between two adjacent items is the same. The empty space before the first and after the last items equals half of the space between two adjacent items.
ul {
display: flex;
list-style-type: none;
justify-content: space-around;
align-items: center;
border-bottom: 2px solid black;
padding: 0;
}
.logo {
font-size: 30px;
font-weight: bold;
padding: 10px 0;
}
a {
text-decoration: none;
color: black;
}
<ul>
<li>LINK</li>
<li>LINK</li>
<li class="logo">LOGO</li>
<li>LINK</li>
<li>LINK</li>
</ul>
Just place your <h1> inside of a new <li> in the center of the existing ones.
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
Here you will find an example of how you can achieve that https://jsfiddle.net/5czgjkyj/
<!DOCTYPE html>
<body>
<div id="wrap">
<div id="logo">
<ul id="nav">
<li>Home</li>
<li>Shop</li>
<li><h1>Gullible</h1></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</div>
<div id="content">
<h1></h1>
</div>
</div>
<footer>
<ul>
<li>Home</li>
<li>Shop</li>
<li><h2>Gullible</h2></li>
<li>Visit</li>
<li>Contact</li>
</ul>
</footer>
</body>
css
ul {
text-align: center;
}
ul li {
display: inline-block;
}
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
</head>
<title>Main Page</title>
<body>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav nav-pills-justified">
<li><a href "#">about</a></li>
<li><a href "#">blog</a></li>
<li><a href "#">portfolio</a></li>
<li><a href "#">contact</a></li>
</ul>
</div>
</div>
</div>
<script src="js/bootstrap.js">
</script>
</body>
</html>
I want the text in the navbar to be centered-fixed-top.
Here i've posted simple navigation bar with centered nav text. you can use this...
HTML
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav-pills-justified">
<li>about</li>
<li>blog</li>
<li>portfolio</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
CSS
.nav-pills-justified
{
text-align: center;
width: 100%;
min-width:980px;
background: #EDEDED;
color: #000000;
height: 50px;
list-style-type: none;
}
.nav-pills-justified li
{
display: inline-block;
}
.nav-pills-justified li a
{
text-decoration: none;
padding: 15px 25px;
display: inline-block;
}
.nav-pills-justified li a:hover
{
background: red;
}
DEMO
.nav-pills-justified {
height:50px;
list-style-type:none;
}
.nav-pills-justified li {
display: inline-block;
margin-bottom:1000px;
margin-left:250px;
width:1px;
font-size: 20px;
}
.nav-pills-justified li a {
display: inline-block;
}