I have a list that I want to fill the width of the container but there seems to be a small gap at the end for some reason.
The CSS is lengthy so here is the html
<div class="line clearfix no-margin">
<div class="container">
<header>
<div class="logo col-4">
<img src="#" />
<h1 class="logo">Name</h1>
</div>
<div class="nav clearfix">
<ul>
<li><span id="head-icon"></span>About Us</li>
<li><span id="wrench-icon"></span>Services</li>
<li><span id="email-icon"></span>Contact</li>
</ul>
</div>
</header>
</div>
</div>
Demo
I can't seem to figure out where that gap is coming from.
It's because of the margin-left: -3px; in .nav li!
See the updated Fiddle: http://jsfiddle.net/VRtnA/18/
Try removing margin-left: -3px; in .nav li.
Related
my html page has this unwanted white patch in the bottom and I don't know why. I don't want to be able to scroll down that long. It stays there regardless by default. it dissapears when I hover on the left(front) element but reappears when I hover on the right(behind) element.
here is the codepen : https://codepen.io/aronnora/pen/ExjJrag
<nav class="nav_bar">
<img src="580b57fcd9996e24bc43c4f8.png" alt="logo" class="logo" id="logo">
<div class="trans" id="trans"> trans energy solutions </div>
<ul class="ul">
<li class="li1">Home</li>
<li class="li2">About Us</li>
<li class="li3">Products</li>
<li class="li4">Services</li>
<li class="li5">Facility</li>
<li class="li6">Testing</li>
<li class="li7">Clients</li>
<li class="li8">Contact</li>
</ul>
</nav>
<div class="white">
</div>
<div class="pro">
<div class="text">
PRODUCTS
</div>
</div>
<div class="total">
<div class="one">
<img src="liquid-immersed-distribution-transformers-768x784.png" alt="kakashi" class="Kakashi" height="300rem"></img>
<div class="downtextone">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不注更ルモト点究サトケ別意マワ抜博写ミ元
</div>
</div>
<div class="two">
<img src="transtech-2.png" alt="madara" class="Madara" height="300rem"></img>
<div class="downtexttwo">
時メユ郎護ヲテ写藤くクッル起稲ロチ製資ヌ米更ナ池天ワア由時テ栃94探容ケニ災逮はぴ氷可難智む。能ざラくな静盟ごぼじ不
</div>
</div>
</div>
your div takes a default height as it's content. so just add overflow:hidden; to class (.tow)
.two {
height: 58.29rem;
width: 45rem;
transition: opacity 1s;
background-color: black;
position: absolute;
z-index: 10;
overflow: hidden;
}
I'm using Bootstrap and my issue is that the content (ul) within the "forecastDiv" is not inside the "forecastDiv" border. The content stays inside the border once I remove Bootstrap's grid system but I need to align my content properly so I need to be using the grid system. Below is the code I have in a codepen (go to "6-day forecast" comment in HTML). Any help is appreciated. Thank you.
HTML
<div id="forecastDiv">
<div class="col-md-1" id="boxInfo0">
<p id="forecast0">0
</p>
<p id="forecast0TempC">0
</p>
<p id="day0">Test
</p>
</div>
<div class="col-md-1" id="boxInfo1">
<p id="forecast1">0
</p>
<p id="forecast1TempC">0
</p>
<p id="day1">Test
</p>
</div>
<div class="col-md-1" id="boxInfo2">
<ul id="forecast2">0
</ul>
<ul id="forecast2TempC">0
</ul>
<ul id="day2">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo3">
<ul id="forecast3">0
</ul>
<ul id="forecast3TempC">0
</ul>
<ul id="day3">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo4">
<ul id="forecast4">0
</ul>
<ul id="forecast4TempC">0
</ul>
<ul id="day4">Test
</ul>
</div>
<div class="col-md-1" id="boxInfo5">
<ul id="forecast5">0
</ul>
<ul id="forecast5TempC">0
</ul>
<ul id="day5">Test
</ul>
</div>
</div> <!-- end forecastDiv -->
CSS
#forecastDiv {
width: 100%;
border: solid black;
margin: 0 auto; }
https://codepen.io/mcmaster-99/pen/ybWvyy
add a "container" or "container-fluid" class to your <div id="forecastDiv">. "container" is a bootstrap class that will keep everything inside the div.
<div class="container" id="forecastDiv">
How to make the image overlap the navbar(nav-pills) below it?Here it the link to fiddle http://jsfiddle.net/arpittomar/5Ledeorr/
To summarize:
<div class="container">
<div class="row" id="overlap">
<div class="col-md-10 col-md-offset-1">
<img src="http://placehold.it/200x100" class="img-thumbnail">
</div>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="internal_navbar">
<ul class="nav nav-pills">
<li>Timeline</li>
<li>About</li>
<li>Friends</li>
<li>Photos</li>
</ul>
</div>
</div>
</div>
</div>
Here i want to make the image overlap the ul elements below it.
You can use position: absolute for the <ul> and the <img> and z-index: 1 for the <img>:
.nav-pills, .img-thumbnail {
position: absolute;
}
.img-thumbnail {
z-index: 1;
}
JSFiddle
You need to use absolute position for the image tag and whichever component you want on top just add z-index:1 to it
.img-thumbnail{
position:absolute;
z-index:1;
}
I think this wil work for you for demo check http://jsfiddle.net/5Ledeorr/5/
I'm trying to have my container divs background color extend to the full width of the browser. Right now I am unable to bypass the container styling set up by default in bootstrap, despite adding my own class to the container. The only styling that works is the background-color. I have also tried the following CSS, but it didn't make any change.
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
background-color: #FDDC00;
Here is my HTML:
<div class="container selection-section">
<div class="row pattern-choice">
<div class="col-md-12">
<h2><i>Choose a pattern</i></h2>
<ul>
<li class="button-border">
<h3 class="button-choice" >SOLID</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="stripe-choice">STRIPE</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="plaid-choice">PLAID</h3>
</li>
</ul>
</div>
</div>
</div>
Here is my CSS:
.selection-section {
margin-right: auto;
margin-left: auto;
padding-left: 0px;
padding-right: 0px;
background-color: #FDDC00;
}
Use container-fluid instead of container if you want the container to extend to the full-width of your webpage.
If it's only the color that's a concern surrounding the container with another div might work for you.
.selection-section {
background: #FDDC00;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="selection-section">
<div class="container">
<div class="row pattern-choice">
<div class="col-md-12">
<h2><i>Choose a pattern</i></h2>
<ul>
<li class="button-border">
<h3 class="button-choice">SOLID</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="stripe-choice">STRIPE</h3>
</li>
<li class="button-border">
<h3 class="button-choice" id="plaid-choice">PLAID</h3>
</li>
</ul>
</div>
</div>
</div>
</div>
<hr>
<div class="container">
<div class="well">Outside Div</div>
</div>
been trying to align the logo in the middle between menus trying to make it using foundation zurb.
something like [menu1] [menu2] --[logo]-- [menu3] [menu4].
Sure it might work using the grid system:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-4 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-4 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
Haven't tried any CSS yet apart from this simple one, don't mind the top-nav class but.
ul li{
list-style: none;
display: inline-block;
padding: 15px;
background: #ccc;
}
I would use display: inline-block and vertical-align: middle
DEMO http://jsfiddle.net/AA49p/1/
.large-4 {
display: inline-block;
vertical-align: middle;
}
Your are having this problem because Foundation grid columns have a certain width which does not depend on the content.
Currently you logo is actually exactly in the center, but of course it doesn't look like it is. That's because the content is justified to the left and your navs are much narrower than their parents ("large-4"s)
It's easier to show.
You will find that this code brings you much closer the desired result:
<div class="panel hide-for-small-down">
<div class="row">
<div class="large-3 columns">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
</ul>
</nav>
</div>
<div class="large-5 columns">
<img src="http://placehold.it/350x150">
</div>
<div class="large-4 columns">
<nav>
<ul>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
All I did was change the first column to "large-3" and the second to "large-5".
Now it looks like it is centered.
May be this result will satisfy you. But know that it's just not the best way to center a logo using grid-columns.
Another easy solution is to "float: right" the right nav.