Hi guys I'm starting to build my first site in html5+css3 beign responsive as a goal but I have a problem trying to add a video after the header. Thing is I need my video fills the total website width. I try with "width:100%" it doesn't works.
It works when I remove "display:flex;" of #body, but I think I will need this property since I'm planning to add flexible boxes inside of #body, and if I want put flexible boxes inside #body I need set it to "display:flex" right? Im new in html5&css3 so please correct me if I'm wrong.
If anybody could help me that would be great. Thanks!
HTML:
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Patua+One' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<div id="logo">
<img src="imagenes/logo.png"/>
</div>
<nav id="menuP">
<ul>
<li>ALL PRODUCTS</li>
<li>SERVICES</li>
<li>ABOUT</li>
<li>SAMPLES</li>
<li>QUOTE</li>
</ul>
</nav>
<nav id="menuS">
<ul>
<li id="account">ACCOUNT</li>
<li id="shop">SHOP</li>
<li id="contact">CONTACT</li>
</ul>
</header>
<section id="body">
<section id="slide">
<video loop id="videoSlide">
<source src="eu4_ost.webm" type="video/webm">
</video>
</section>
</section>
<footer>
</footer>
</body>
</html>
CSS
* {
margin:0px;
padding:0px;
}
header, section, footer, aside, nav, article, hgroup{
display:block;
}
html{
width:100%;
background:white;
height:100%;
font-family:Helvetica;
}
body {
display:flex;
background:gray;
justify-content:center;
max-width:2000px;
flex-direction:column;
}
/* -------------------------------- HEADER ------------------------------------ */
header{
width:100%;
background:#fabe06;
display: flex;
justify-content: center;
height:70px;
}
header nav ul{
list-style:none;
}
/* ----------------------------------- LOGO ------------------------------------- */
#logo{
margin:0px 0px 0px 32px;
width:260px;
display:flex;
align-items:center;
}
#logo img{
width:100%;
}
/* ----------------------------- MENU PRINCIPAL ---------------------------------- */
#menuP{
display:flex;
font-family:Patua One;
font-size:17px;
flex:2;
margin:0 50px;
justify-content:center;
align-items:center
}
#menuP ul li{
display:inline-block;
margin:0 15px;
}
#menuP ul li a{
text-decoration:none;
color:black;
}
/* ----------------------------- MENU SECUNDARIO ---------------------------------- */
#menuS{
flex:1;
display:flex;
justify-content:flex-end;
}
#menuS ul{
display:flex;
}
#menuS ul li a{
height:70px;
width:70px;
display:inline-block;
border-left:solid 1px;
border-color:#eab309;
text-indent:-99999px;
/*background:yellow;*/
}
#menuS ul li a{
}
header nav ul li#account a{
background-image:url(imagenes/account.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-size:20%;
}
header nav ul li#shop a{
background-image:url(imagenes/shop.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-size:25%;
}
header nav ul li#contact a{
background-image:url(imagenes/contact.png);
background-repeat:no-repeat;
background-size:contain;
background-position:center;
background-size:25%;
}
/*---------------------------- BODY -------------------------*/
#body {
width:100%;
background:yellow;
display:flex;
flex-grow:1;
}
#videoSlide{
width:100%;
}
Alright, so pretty simple, the thing is that even though the video has the width: 100% property, its parent does not. The percentage unit is used based on the parent's width or height, so if the parent is not full page width it won't work.
Just add this to your style.css:
#slide
{
width: 100%;
}
Also, just noticed you never closed the <nav> element .menuS so I'd do that if I were you to avoid further trouble.
Good luck.
Use two divs in the body and remove flex from body.
First div is video
Second is flex with main content
Related
I am trying to do fixed menu using flexbox. In my navigation bar I created 2 divs. First should contain logo, and second menu(with display:flex property). I've got problem, when I want to postion the li element of my menu. I want horizontal menu, but when I add justify-content:space-between my first element should be situated in left edge of menu's div but it has a small margin and I don't know why.
https://jsfiddle.net/4Lmu08yc/
header {
height:100vh;
background-color:yellow;
width:100vw;
max-width:100%;
}
.navbar {
width:100vw;
background-color:grey;
height:7vh;
max-width:100%;
position:fixed;
border-bottom:5px solid white;
z-index:2;
}
.flex_row {
display:flex;
flex-direction:row;
}
.container{
height:100%;
width:100vw;
max-width:100%;
background-color:green;
display:flex;
}
#logo {
height:100%;
background-color:white;
flex-grow:1;
}
#menu {
height:100%;
background-color:yellow;
flex-grow:1;
}
#menu ul {
list-style-type:none;
justify-content:flex-start;
align-content:flex-end;
}
#menu ul li {
border:1px solid black;
line-height:40px;
}
<header>
<div class="container">
<div class="navbar flex_row">
<div id ="logo"></div>
<div id ="menu">
<ul class="flex_row">
<li>text1</li>
<li>text2</li>
<li>text3</li>
<li>text4</li>
</ul>
</div>
</div>
</div>
</header>
You have to add margin:0; to '#menu ul'.
HTML automatically adds a margin to unorderded lists.
#menu ul {
margin:0;
}
I'm trying to place an image behind my navigation bar and I want it fixed on the top right side of the page but I'm having a hard time trying to do so.
Here's what I want the page to look like:
This is my HTML:
<div class="navbarcn">
<div class="navbar">
<img src="bamboo.png">
<nav class="header">
<a class="active" href="javascript:;">HOME</a>
<a class="headl" href="menu.html">MENU</a>
<a class="headl" href="about.html">ABOUT</a>
</nav>
</div>
The CSS:
.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
}
.navbar{
float:right;
text-align:right;
width:100%;
height:200px;
}
.navbar img{
width:250px;
float:right;
}
.navbar a{
padding:10px;
text-decoration: none;
font-size:1.4em;
font-weight: bold;
}
First, you should not use an img for this kind of styling. Use CSS. (Here I have commented out the image).
<div class="navbarcn">
<div class="navbar">
<!-- <img src="bamboo.png"> -->
<nav class="header">
<a class="active" href="javascript:;">HOME</a>
<a class="headl" href="menu.html">MENU</a>
<a class="headl" href="about.html">ABOUT</a>
</nav>
</div>
Next, add some background properties to target your navbar.
.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
}
.navbar{
float:right;
text-align:right;
width:100%;
height:200px;
background-image: url(https://placekitten.com/100/50);
background-repeat: no-repeat;
background-position: top right;
}
/*.navbar img{
width:250px;
float:right;}
*/
.navbar a{
padding:10px;
text-decoration: none;
font-size:1.4em;
font-weight: bold;
}
Fiddle: https://jsfiddle.net/Lf4exsv7/
Using IMG vs CSS background-image: When to use IMG vs. CSS background-image?
Give .navbarcn background image
.navbarcn{
margin:0;
height:120px;
position:fixed;
width:100%;
background-image:url('bamboo.png');
}
.navnarcn's parent must explicitely have the css property position defined.
There are two solutions
Best way
.navbarcn{
background: url('path to your image')
}
Alternative way
.navbar img{
height: 35px
}
.navbarcn{
margin-top: -35px
}
using background would be a better solution but this is also fine
use absolute position for the image
.navbar{
position:relative;
}
img{
position: absolute;
top:5px;
right:5px;
display block;
z-index:-1;
}
HTML
<!--Head-->
<div class="header_image">
<!-- <div class="leftImage"> -->
<img class="center_image" src="Final_Logo.png"/>
<!-- </div> -->
<!-- <div class="rightText"> --> <!-- I have commented these div so as to see if by chance they work in one div but i Both case problem is occurring.-->
<p>text<br>Contact Us</p>
<!-- </div> -->
</div>
<!--Navigation Bar-->
<div class="header" id="change">
<ul>
<li>Home</li>
<li>How It Works</li>
<li>Experts</li>
<li>Ask</li>
<li>Blog</li>
<li>Login</li>
<li>Register</li>
</ul>
</div>
CSS Code
body
{
background-image:url("LivingRoom.jpg");
background-repeat:no-repeat;
background-attachment:fixed;
width:100%;
}
.header
{
display:inline-block;
background-color:#000000;
width:100%;
height:6%;
position:fixed;
top:0;
left:0;
z-index:99;
margin:4% auto;
text-align:center;
white-space:nowrap;
}
#change.header2 /*this css is used for scrolling purpose. Its code is in javascript*/
{
display:inline-block;
background-color:#000000;
width:100%;
height:6%;
position:fixed;
top:0;
left:0;
z-index:99;
margin:0 auto;
text-align:center;
white-space:nowrap;
}
ul
{
list-style:none;
display:inline-block;
width:100%;
margin:0 auto;
white-space:nowrap;
}
li
{
padding-top:.5%;
display:inline-block;
text-align:center;
white-space:nowrap;/*When I add width then when browser is resized text in menu overlaps*/
}
a:link, a:visited
{
display:inline-block;
width:150px;
text-align:center;
padding-left:1.5%;
padding-right:1.5%;
text-decoration:none;
color:white;
font-size:150%;
margin:0 auto;
}
a:hover,a:active
{
background-color:white;
color:black;
}
.header_image/*This is the header above menu when browser is resized the menu scrolls to the top of header*/
{
float:left;
top:0;
left:0;
right:0;
background-color:white;
height:8.5%;
width:100%;
}
When I resize the browser windows the navigation bar moves upwards overlapping with the logo and other information in the header.Also I am facing one problem that when I resize the browser the text gets overlapped with one another if I add width to <li> tag. How to avoid overlapping by using width? Please suggest.
I made a header with a nav inside of it and set the width to 100%. I kept it out of the container so only the header can take the entire page and the other content will be 960px. Now my site title and nav are too much to the left and i tried to center it and match the 960px container with margin:0 auto but that didn't work. How can i get my site title to match right where the 960px container starts and the nav as well? I want to space the nav more to the right.
jsfiddle - http://jsfiddle.net/wphkyhw8/
<!DOCTYPE html>
<html lang="en">
<head>
<title>Rafael Caba</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="main_header">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<ul>
<li>Portfolio</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
<div class="container">
<section class="main_content">
<article>
first article
first article
first article
first article
first article
first article
</article>
</section>
<footer>
copyright 2014
</footer>
</div> <!-- end of container -->
</body>
</html>
*{
margin:0;
padding:0;
list-style-type:none;
}
header,nav,section,article,aside,footer{
display:block;
}
.container{
width:960px;
border:1px solid black;
margin:0 auto;
}
.main_title{
float:left;
padding:20px;
font-size:25px;
}
.main_header{
background-color:#000000;
color:#ffffff;
width:100%;
height:80px;
}
.main_nav{
float:left;
}
.main_nav ul li{
float:left;
padding:30px 10px;
}
.main_nav ul li a{
text-decoration:none;
color:#ffffff;
}
You could simply achieve that by wrapping the content of the header by an additional div having a class of .container
Example Here
<header class="main_header">
<div class="container">
<p class="main_title">Rafael Caba</p>
<nav class="main_nav">
<!-- Navigation -->
</nav>
</div>
</header>
It is better to use another class name to apply the border to the content container.
.container {
width:960px; margin:0 auto; /* Removed the border from this selector */
}
<div class="container border"> <!-- Content --> <div>
.border { border:1px solid black; /* Added here */ }
Is this what you're trying to do:
http://jsfiddle.net/wphkyhw8/4/
.main_header{
background-color:#000000;
color:#ffffff;
width:960px;
height:80px;
margin: 0 auto;
}
This is what my page currently looks like: Here
I want the social icons to position in line with the rest of the navigation content. At the moment they are beneath the content. I thought float right would fix things. Is it because of my browser size? How can I fix this then? Here is my code:
HTML:
<div id="Nav">
<div id="NavContent">
<ul>
<li id="Title">PavSidhu.com</li>
<li>Home</li>
<li>Web Design</li>
<li>Graphic Design</li>
<li>How it Works</li>
<li>Pay</li>
<li>Contact</li>
</ul>
<img src="Images/Twitter.png" class="Social"/>
<img src="Images/Pinterest.png" class="Social"/>
</div>
</div>
CSS:
#Nav {
position:fixed;
width:100%;
background-color:#f26522;
}
#NavContent {
margin:0 auto;
width:90%;
}
ul {
margin:0;
padding:0;
}
li {
font-family: Bebas;
color:#FFF;
list-style-type:none;
margin:0;
padding:0 1%;
display:inline;
vertical-align:middle;
font-size:20px;
}
#Title {
font-size: 35px;
}
.Social {
height:35px;
float:right;
}
Thanks guys :)
The <ul> is a block element, so it wants to be 100% width by default. If you make it an inline element with display: inline; instead, there will be space for the icons to sit next to the rest of the nav bar.
ul {
margin:0;
padding:0;
display: inline;
}
You mean you want the social-media-icons higher? Next to the menu-items instead?
Try using
display: inline-block;
for your ul.
set ul to display: inline-block
As explained earlier, ul is a block element that will take 100% of the width of the parent element, so the floated elements will start on the next line.
To fix this, you can use:
ul {
margin:0;
padding:0;
border: 1px solid blue; /*for demo only */
display: inline-block;
width: inherit;
}
See demo at: http://jsfiddle.net/audetwebdesign/tAjW8/
You need to set width: inherit or else the computed width will be narrower than you might expect.