I've been having trouble applying clearfix to a number of divs, I've followed several tutorials, found here and here, but still my div named Bar will not expand to hold both the logo and nav divs.
Here is my markup, any and all advice would be greatly appreciated.
I have made the divs some strange colours to help see where they are ending and help with trying to see what is going on exactly.
<div id="bar" class="group">
<div id="nav">
<ul>
<li>Home</li>
<li>What We Do</li>
<li>Our Work</li>
<li>Our People</li>
<li>Contact Us</li>
</ul>
</div>
<div id="logo">
<img src="images/logo.png" title="" alt="" />
</div><!--Close Logo-->
CSS:
body{
margin:0;
}
.group:after {
content: "";
display: table;
clear: both;
}
#bar{
background-color: #e2871a;
width:100%;
}
/*NAVIGATION */
#nav{
color:#fff;
float:right;
margin-right:50px;
background-color:chartreuse;
}
#nav>ul{
list-style:none;
padding:0;
margin:0;
}
#nav>ul li{
display:inline;
}
#nav>ul a>li {
color:#fff;
padding-bottom:100px;
background-color:blue;
margin-right:15px;
}
#nav>ul a>li:hover{
border-bottom:3px solid white;
}
#logo{
float:left;
width:15%;
margin-left:5%;
background-color:red;
}
Problem is:
#nav>ul li{
display: inline;
}
Top/bottom padding or margin doesn't affect the height of inline elements relative to their parent. Make it block or inline-block
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 2 years ago.
I'm working on a front end project where I have created an "About us" section with some text and an image .
As you can see there is a small white gap under my image that I am trying to remove . I try adjusting margin , padding , height of the div element and the image but I am definitely missing something
My code :
#about-container{
width:100%;
height:auto;
background-color: white;
position: relative;
margin:0;
display:flex;
}
#about-container div{
margin:0;
padding:0;
height:auto;
}
#desc{
width:30%;
background-color:green;
}
#desc ul{
list-style-type: none;
margin:0;
padding:0;
}
#desc li{
padding:10px;
}
#about-img{
width:70%;
}
#about-img img{
width:100%;
height:500px;
}
<div id="about-container">
<div id="desc">
<h1> Our values </h1>
<ul>
<li>We care about our customer needs </li>
<li>We focus on the quality of our products & services offered </li>
<li>We invest in innovation and sustainable development </li>
<li>We care about the needs of society and vulnerable social groups</li>
</ul>
</div>
<div id="about-img">
<img src="IMAGES/about-img.jpg">
</div>
</div>
I would appreciate your help with this small task .
You can align them by using this CSS code:
#about-img img {
width: 100%;
height: 500px;
vertical-align: bottom;
}
Add vertical-align: top; to the image. Or simply add diaplay: block to the image
#about-container{
width:100%;
height:auto;
background-color: white;
position: relative;
margin:0;
display:flex;
}
#about-container div{
margin:0;
padding:0;
height:auto;
}
#desc{
width:30%;
background-color:green;
}
#desc ul{
list-style-type: none;
margin:0;
padding:0;
}
#desc li{
padding:10px;
}
#about-img{
width:70%;
}
#about-img img{
width:100%;
height:500px;
vertical-align: top;
}
<div id="about-container">
<div id="desc">
<h1> Our values </h1>
<ul>
<li>We care about our customer needs </li>
<li>We focus on the quality of our products & services offered </li>
<li>We invest in innovation and sustainable development </li>
<li>We care about the needs of society and vulnerable social groups</li>
</ul>
</div>
<div id="about-img">
<img src="https://www.w3schools.com/bootstrap/sanfran.jpg">
</div>
</div>
SOLUTION :
#about-container div{
margin:0;
padding:0;
height: 500px;
}
#about-img img{
width:100%;
height:100%;
}
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
I have a div floated left, and a div floated right with a variable gap in between the 2 (responsive).
I need to be able to fill the gap in the middle with a colour, but only the gap in the middle (it can not flow behind the other 2 divs, as these divs have transparent backgrounds)
how can I achieve this with html structure like:
html
<div class="nav-wrap">
<ul class="nav">
</ul>
<div class="filler"></div>
<ul class="nav right">
</ul>
</div>
css
.nav-wrap{
float:left;
width:100%;
}
.nav{
float:left;
height:50px;
width:200px;
margin:0;
padding:0;
}
.nav.right{
float:right;
}
.filler{
?????
}
For filler, give it a margin that is equal to the width of the navs:
.filler{
margin: 0 200px;
background-color: blue;
}
To make this work, put both navs before the div in the HTML:
<div class="nav-wrap">
<ul class="nav">
</ul>
<ul class="nav right">
</ul>
<div class="filler">X</div>
</div>
Fiddle: http://jsfiddle.net/yyZz6/1/
You can use table layout of this purpose.
.nav-wrap{
width:100%;
display:table;
table-layout:fixed;
}
.nav{
display:table-cell;
height:50px;
width:200px;
margin:0;
padding:0;
}
.filler{
display:table-cell;
background: ?;
height:50px;
}
Example
You can use the following html:
<div class="nav-wrap">
<ul class="nav left">
</ul>
<div class="filler"></div>
<ul class="nav right">
</ul>
</div>
With the following styles:
.nav-wrap{
padding:0 200px;
overflow:auto;
}
.nav{
height:50px;
width:200px;
margin:0;
padding:0;
}
.nav.right{
float:right;
margin-right:-200px;
}
.nav.left{
float:left;
margin-left:-200px;
}
.filler{
width:100%; float:left;
}
Example
Consider using flex-grow of CSS flexbox
.filler{
background: SaddleBrown; flex-grow: 1;
}
Fiddle
If you are trying to achieve responsive design you should not use fixed width. Instead i suggest you try this:
<div class="nav-wrap">
<ul class="nav">
</ul>
<div class="filler">
</div>
<ul class="nav">
</ul>
</div>
<style type="text/css">
.nav-wrap{
float:left;
width:100%;
}
.nav, .filler{
border: 1px solid black;
}
.nav{
float:left;
height:50px;
width:13%;
margin:0;
padding:0;
}
.filler{
float: left;
width: 64%;
}
<style>
Can anyone help me with aligning my two divs? What did I do wrong? I have two inline blocks as my divs and am trying to align them at the highest point of the element side by side.
<body>
<ul id="navbar">
<li>Skills</li>
<li>Work</li>
<li>Contact<li>
</ul>
<div id="intro">
<p>HELLO</p>
</div>
css:
#navbar {
display:inline-block;
margin-left:25%;
list-style-type:none;
vertical-align:top;
width:12%;
}
#intro {
display:inline-block;
width:40%;
vertical-align:top;
}
Add margin-top: 0 or any other preferred size (ie margin-top: 20px;) to both IDs.
Ex. http://jsfiddle.net/K9K2X/6/
<ul id="navbar">
<li>Skills</li>
<li>Work</li>
<li>Contact</li> <!-- Forgot to close the element -->
</ul>
#navbar li{
display:inline-block;
margin-left:25%;
list-style-type:none;
vertical-align:top;
width:12%;
}
The links are side-by-side now.
http://jsfiddle.net/K9K2X/8/
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.