I started to write my code as always and I got this strange vertical spacers between header and section as seen below. This is something very noobish but cant deal with it.
CSS
.container {
background:#000;
}
.pos-center {
background:#000;
width:1080px;
margin: 0 auto;
}
.slider {
background:url(slider.jpg) no-repeat;
height:338px;
width:1080px;
border-bottom:#ff5300 3px solid;
}
.nav {
background:#F00 ;
height:40px;
}
.nav li {
display:inline-block;
list-style:none;
}
HTML
<body>
<header>
<div class="container">
<div class="pos-center">
<div class="slider">
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="pos-center">
<div class="nav">
<ul>
<li>Zadaj Pytanie</li>
<li>Komentarze</li>
<li>Dodaj do Ulubionych</li>
<li>Nasze Aukcje</li>
<li>O Nas</li>
</ul>
</div>
</div>
</div>
</section>
</body>
It's because your ul inside .nav has a margin-top.
Set it to margin-top: 0 and you should be fine.
.container {
background:#000;
}
.pos-center {
background:#000;
width:1080px;
margin: 0 auto;
}
.slider {
background:url(slider.jpg) no-repeat;
height:338px;
width:1080px;
border-bottom:#ff5300 3px solid;
}
.nav {
background:#F00 ;
height:40px;
}
.nav ul {
margin-top: 0; //Here
}
.nav li {
display:inline-block;
list-style:none;
}
<body>
<header>
<div class="container">
<div class="pos-center">
<div class="slider">
</div>
</div>
</div>
</header>
<section>
<div class="container">
<div class="pos-center">
<div class="nav">
<ul>
<li>Zadaj Pytanie</li>
<li>Komentarze</li>
<li>Dodaj do Ulubionych</li>
<li>Nasze Aukcje</li>
<li>O Nas</li>
</ul>
</div>
</div>
</div>
</section>
</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>
I can not find the right solution. There are cards with goods, go in rows on the Flex. When you hover over them, the information block is added to the card and the block increases in height. And when this happens it pushes the lower blocks, which should not be. How to win in this situation?
Poked through absolute, but all past..
Here is an example code:
.wrapper {
border:1px solid black;
width: 200px;
}
ul {
display: flex;
flex-wrap:wrap;
list-style:none;
}
li {
margin-right:5px;
background-color:#efefef;
border:1px solid red;
}
.btn {
width: 10px;
height: 10px;
background-color: green;
}
.hover {
display: none;
}
li:hover .hover {
display:block;
}
<div class="wrapper">
<ul>
<li>One
<p class="hover">Contant</p>
<div class="btn"></div>
</li>
<li>Two
<p class="hover">Contant</p>
<div class="btn"></div> </li>
</li>
<li>Tree
<p class="hover">Contant</p>
<div class="btn"></div> </li>
<li>Four
<p class="hover">Contant</p>
<div class="btn"></div> </li>
<li>Five
<p class="hover">Contant</p>
<div class="btn"></div> </li>
</ul>
</div>
Instead of using a list, try nested divs like below:
.wrapper {
border:1px solid black;
width: 200px;
}
.parent {
display: flex;
flex-wrap:wrap;
}
.child {
margin-right:5px;
background-color:#efefef;
border:1px solid red;
min-height: 5rem;
min-width: 3rem;
}
.btn {
width: 10px;
height: 10px;
background-color: green;
}
span {
display: none;
}
.child:hover .hover > span {
display:block;
}
<div class="wrapper">
<div class="parent">
<div class="child">One
<p class="hover"><span>Contant</span></p>
<div class="btn"></div>
</div>
<div class="child">Two
<p class="hover"><span>Contant</span></p>
<div class="btn"></div> </li>
</div>
<div class="child">Tree
<p class="hover"><span>Contant</span></p>
<div class="btn"></div> </div>
<div class="child">Four
<p class="hover"><span>Contant</span></p>
<div class="btn"></div> </div>
<div class="child">Five
<p class="hover"><span>Contant</span></p>
<div class="btn"></div> </div>
</div>
</div>
Option 1: Using visibility to hide elements means they still take up the same amount of space, unlike display:none; which collapses the space
.hover {
visibility:hidden;
}
li:hover .hover {
visibility:visible;
}
Option 2: Fixing the width and height on the li so that the content inside doesn't expand them. You can play around with the height and width of the li that you want
li {
margin-right:5px;
background-color:#efefef;
border:1px solid red;
height:100px;
width:50px;
}
.hover {
display: none;
}
li:hover .hover {
display:block;
}
How I solved this problem. I duplicated all the content in the hover box. When hover, I hide all the content and show the new one in absolute.
.wrapper {
border:1px solid black;
width: 400px;
}
ul {
display: flex;
flex-wrap:wrap;
list-style:none;
}
li {
margin-right:5px;
padding: 10px;
background-color:#efefef;
border:1px solid red;
position: relative;
}
.btn {
width: 10px;
height: 10px;
background-color: green;
}
.hover-box {
display: none;
position:absolute;
background-color: #efefef;
width: 100%;
border-right:1px solid red;
border-left:1px solid red;
border-bottom:1px solid red;
left:-1px;
z-index:100;
}
li:hover .hover-box {
display:block;
}
li:hover .btn1 {
display:none;
}
<div class="wrapper">
<ul>
<li>One - sample
<div class="hover-box">
<p class="hover">Contant</p>
<div class="btn"></div>
</div>
<div class="btn"></div>
</li>
<li>Two - sample
<div class="hover-box">
<p class="hover">Contant</p>
<div class="btn"></div>
</div>
<div class="btn"></div> </li>
</li>
<li>Tree - sample
<div class="hover-box">
<p class="hover">Contant</p>
<div class="btn"></div>
</div>
<div class="btn"></div> </li>
<li>Four - sample
<div class="hover-box">
<p class="hover">Contant</p>
<div class="btn"></div>
</div>
<div class="btn btn1"></div> </li>
<li>Five - sample
<div class="hover-box">
<p class="hover">Contant</p>
<div class="btn"></div>
</div>
<div class="btn"></div> </li>
</ul>
</div>
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 want to make a navigation bar. I supposed a big block would be shown when i hover a the nav bar. However, it didn't work.
This is my html code.
<div id="outerContainer">
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">aaa</div>
<div class="selectors">bbb</div>
<div class="selectors">ccc</div>
<div class="selectors">ddd</div>
</div>
</div>
<div id="innerContainer">
<div class="navHidden"></div>
<div class="navHidden"></div>
<div class="navHidden"></div>
<div class="navHidden"></div>
<div id="content"></div>
</div>
And, this is my css.
#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}
.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}
.selectors:hover{border-bottom-color:silver;background-color:silver;}
.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
visibility:hidden;
}
I want the web become as follow:
|.selectors |.selectors | .selectors | .selectors |
| navHidden .....(only shown when hover)......|
I can only allowed to use html and css, because this is homework.
Thanks.
Your code was adapted so now your have desired layout. But it is NOT PERFECT I did not remove excess rules. Do your homework by yourself
HTML
<div id="header">
<a id="logo" href="#"><img src="#"></a>
<div id="nav">
<div class="selectors">
aaa
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
bbb
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
ccc
<div class="navHidden">Lorem ipsum text</div>
</div>
<div class="selectors">
ddd
<div class="navHidden">Lorem ipsum text</div>
</div>
</div>
</div>
CSS
#nav{
position:relative;
float:left;
width:600px;
padding-left:30px;
padding-top:25px;
}
.selectors{
width:150px;
position:relative;
float:left;
margin:0;
z-index:10px;
}
.selectors:hover{
border-bottom-color:silver;
background-color:silver;
}
.navHidden{
width:760px;
height:100px;
background-color:silver;
position:absolute;
z-index:10;
display:none;
top: 100%;
left: 0;
}
.selectors:hover .navHidden {display: block;}
Try this way to create your navigation.
<style>
ul, li {list-style: none; padding: 0; margin: 0; float: left;}
li a{display: block; width: 100px; height: 40px;}
li a:hover{display: block; width: 100px; height: 40px; background: red;}
li ul {display: none;}
li:hover ul {display: block;}
</style>
</head>
<ul id="nav">
<li class="selectors">aaa</li>
<li class="selectors">bbbb
<ul id="innerContainer">
<li class="navHidden">222</li>
</li>
</ul>
</li>
</ul>
i created a style called "topbar" using css.
The code are as follows:
.topbar:hover ul{ display: inline;}
.topbar {
float: left;
margin-left: 20px;
margin-right: 20px;
font-family:"Georgia";
}
.topbar ul {
display: none;
top:30px;
position: absolute; border-style:solid;
border-width:1px; background-color:white;}
}
.clear {
clear: both;
}
then i went to create a ul "grid" and allows mouse hover enlarge of images
ul.grid, ul.grid > li {
margin: 0;
padding: 0;
}
ul.grid {
}
ul.grid > li {
float: left;
list-style-type: none;
text-align: center;
font-family:"Georgia", serif;
padding-top:50px;
padding-bottom:25px;
padding-right:25px;
padding-left:0px;
}
ul img:hover { width: 200px; height: 250px; }
my html code:
<body>
<div class="topbar">
<p>Title</p>
<ul>
<li>A-Z</li>
<li>Z-A</li>
</ul>
</div>
<div class="topbar">
<p>Genre</p>
<ul>
<li>Action</li>
<li>Comedy</li>
<li>Animation</li>
<li>Horror</li>
<li>Drama</li>
</ul>
</div>
<div class="clear"></div>
<br />
<div id="videos">
<ul class="grid">
<li>
<p class="image"><img src="http://3.bp.blogspot.com/-AGAaic1-yrM/TcWmj77lHzI/AAAAAAAAAkQ/K6zzSk1WgUY/s1600/thor-movie-poster-1.jpg" alt="Thor" width="175" height="200" /></p>
<p class="name">Thor</p>
<p class="genre">Action</p>
<p class="format">DVD</p>
<p class="year">2011</p>
</li>
<li>
<p class="image"><img src="http://www.galacool.com/wp-content/uploads/2010/02/hangover2.jpg" alt="Hangover" width="175" height="200" /></p>
<p class="name">Hangover</p>
<p class="genre">Comedy</p>
<p class="format">DVD</p>
<p class="year">2009</p>
</li>
</ul>
</div>
</body>
Why do i have a left unwanted space beside my "thor" movie image?
The left space must be the indentation of the List where you are putting them. Ideally, to remove this left-indentation, you should set both padding and margins to "0" for the "UL".
This small piece of code works perfectly in this context:
CSS
#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
}
HTML
<div id="navcontainer">
<ul>
<li>Milk
<ul>
<li>Goat</li>
<li>Cow</li>
</ul>
</li>
<li>Eggs
<ul>
<li>Free-range</li>
<li>Other</li>
</ul>
</li>
</ul>
</div>