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>
Related
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>
How to remove extra margin from the div tag.
I have already added margin and padding to 0px. Does positioning also matters in margin? Even if I want to give margin in this div, so in which unit should I give like in vw or percentage? Please help to resolve this issue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
This is happening because of browser defaults. Add the following to your stylesheet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar a{
text-decoration:none;
color: white;
}
#menubar ol {
margin:0;
padding:0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
You have to specify the margin and padding of the HTML doc, and * (everything). See snippet below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery-3.2.1.min.js"></script>
<style type="text/css">
/* FROM HERE */
*,
html {
padding: 0;
margin: 0;
}
/* TO HERE */
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
</style>
</head>
<body>
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
</body>
</html>
Hope this helps!
Try This:
ol {
margin: 0;
padding: 0;
}
body {
padding: 0;
margin: 0;
}
#menubar {
margin: 0;
}
#menubar ol li {
color: white;
float: left;
list-style: none;
padding: 0.5em 0.3em;
background-color: #007ac2;
padding-top: 1em;
padding-right: 45px;
}
ol {
margin: 0;
padding: 0;
}
<div id="menubar">
<ol>
<li id="abouthover">ABOUT US
<div class="arrow-up">
</div>
</li>
<li id="innovationhover">INNOVATION
<div class="arrow-up2"></div>
</li>
<li id="capabilitieshover">CAPABILITIES
<div class="arrow-up3"></div>
</li>
<li id="careerhover">CAREER
<div class="arrow-up4">
</div>
</li>
<li id="investorhover">INVESTOR RELATIONS
<div class="arrow-up5"></div>
</li>
</ol>
</div>
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 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>
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;
}