When I hover over the li, theres a gap to the left and I can't find anything in developer console that explains it.
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
Bootstrap makes the list items inline elements, and inline elements are sensitive to white space. Just remove the white space between them:
.custom-nav>li {
padding: 1.5em 1em;
border-right: 0.1em solid #ccc;
}
.custom-nav>li>a {
padding: 1.5em 1em;
}
.custom-nav>li:hover {
background: #777;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav">
<li>Link</li><li>Link</li><li>Link</li>
</ul>
</div>
</div>
</div>
You can also use HTML comments to occupy the white space instead:
<li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li>
Line break between inline elements creates a whitespace. There are several ways to fight it: to set font-size of parent to 0px, to remove line breaks, to comment
line breaks like that:
<div class="container">
<div class="row">
<div class="col-md-12">
<ul class="list-inline custom-nav"><!--
--><li>Link</li><!--
--><li>Link</li><!--
--><li>Link</li><!--
--></ul>
</div>
</div>
</div>
Fiddle demo
I would suggest you to add these CSS options (and then go further with editing CSS):
.list-inline > li {
display: block;
float: left;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
Related
I am working on making my own website in my spare time. I want to have three columns of text running down the page, however I cannot get rid of the blank space above the center column of text. Also, I am having trouble wrapping the text on the right column(when I add more text) and so have resorted to making seperate p tags which leave undesirable space between text.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My first webpage</title>
<style>
.outer {
width: 1410px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
.b {
text-align: left;
float: left;
}
.n {
text-align: right;
float: right:
}
.c {
margin-left: 505px;
margin-right: 505px;
}
.s {
text-align: center;
}
</style>
</head>
<body>
<div class="outer">
<h1 class="s">Thank you for visiting my webpage!</h1>
</div>
<nav class="b">
<h1>My Favorite Websites</h1>
<ul>
<li>YouTube</li>
<li>Google</li>
<li>Reddit</li>
<li>Gamebuino</li>
<li>Netflix</li>
<li>Twitch</li>
<li>Amazon</li>
<li>Ebay</li>
</ul>
</nav>
<article class="n">
<h1>ABC</h1>
<p>123</p>
<p>do re mi</p>
<p>xyz</p>
<p>easy as</p>
<p>456</p>
<p>hello world</p>
</article>
<article class="c">
<h2>The Official Homepage of Ian Witkowski</h2>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
</body>
</html>
You simply have a typo:
.n {
text-align: right;
float: right: /* <- */
}
You need to notate a semicolon here ;.
In general make sure, that your markup and CSS is vaild.
.outer {
width: 1410px;
color: navy;
background-color: pink;
border: 2px solid darkblue;
padding: 5px;
}
.b {
text-align: left;
float: left;
}
.n {
text-align: right;
float: right;
}
.c {
margin-left: 505px;
margin-right: 505px;
}
<div class="outer">
<h1 class="s">Thank you for visiting my webpage!</h1>
</div>
<nav class="b">
<h1>My Favorite Websites</h1>
<ul>
<li>YouTube</li>
<li>Google</li>
<li>Reddit</li>
<li>Gamebuino</li>
<li>Netflix</li>
<li>Twitch</li>
<li>Amazon</li>
<li>Ebay</li>
</ul>
</nav>
<article class="n">
<h1>ABC</h1>
<p>123</p>
<p>do re mi</p>
<p>xyz</p>
<p>easy as</p>
<p>456</p>
<p>hello world</p>
</article>
<article class="c">
<h2>The Official Homepage of Ian Witkowski</h2>
<dl>
<dt><h3>Ian Witkowski</h3></dt>
<dd>A cool dude</dd>
</dl>
<p>Reasons Ian is cool;</p>
<ul>
<li>He is nice</li>
<li>He rides bikes</li>
<li>He likes computers</li>
<li>He can code his own website</li>
</ul>
<p>Here is a link for my arbitrary code test page;</p>
<ul>
<li>Ian2</li>
</ul>
</article>
Im using bootstrap grid to build a responsive menu and a section that has a search form.But I dont understand why there are some issues in the layout relative to margins and paddings as you can see here: http://jsfiddle.net/ya08jsfy/1/.
In the header area the logo h1 is not aligned vertically at center.
Then there is a white space between the header area and the search section, do you know why? Adding some padding to the .Search div seems to solve this, but why the padding is needed? Why the .Search div by default dont appears next to the header?
Then in the search form I want the input next to the button wihout any space but its not working and also, even with box-sizing:border-box, the input is not occupying the full width because the yellow background appears.
Do you know how to fix this in a way that work in another sections so the content is aligned at center with the same padding in all sections.
html:
<header>
<div class="container">
<div class="row">
<div class="header_nav">
<div class="col-xs-6 col-sm-3">
<h1 class="header__logo">Logo</h1>
</div>
<div class="col-xs-6 col-sm-9">
<a class="nav_mobile_btn hidden-sm hidden-md hidden-lg"><i class="fa fa-bars" aria-hidden="true"></i></a>
<ul class="nav hidden-xs">
<li class="nav__item">Item 1</li>
<li class="nav__item">Item 2</li>
<li class="nav__item">Item 3</li>
<li class="nav__item">Item 1</li>
<li class="nav__item"> Item 4</li>
</ul>
</div>
</div>
</div>
</div>
</header>
<section class="Search">
<h1>Search</h1>
<form action="/signup" method="post">
<div class="row">
<p class="col-xs-10" style=background:yellow;>
<input type="text" name="first_name">
</p>
<p class="col-xs-2">
<button type="submit">Search</button>
</p>
</div>
</form>
</section>
CSS:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
input,textarea,select{
display: block;
padding: 15px;
width: 100%;
outline: 0;
border: 0;
}
header{
border-bottom: 1px solid red;
background-color:orange;
}
.header_nav {
display: flex;
align-items: center;
}
.header__logo{
color:green;
}
.nav {
display: flex;
align-items: center;
justify-content: flex-end;
}
.nav__item {
padding: 0 15px;
a {
font-weight: 600;
font-size: em(15px);
color: brown;
&:hover {
text-decoration: none;
}
}
&:last-of-type{
padding-right: 0;
}
}
.nav_mobile_btn{
font-size: em(30px);
color:$greypp;
float: right;
}
.Search{
background-color: green;
h1{
color: #fff;
text-align: center;
font-size: 1em;
}
}
button{padding:15px;}
Bootstrap css comes with some default margins and paddings to tags like h1 to h6 and p. In your case h1 has a margin top of 20px and bottom of 10px thats why logo is not vertically aligned. You can set headings and paragraphs margin to 0 and override bootstrap styles.
For proper alignment and sizing of buttons inside inputs use this code instead.
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
It causes that h1(Logo) to have a different margin on top and bottom. The solution is simple, just set the same margin for both.
h1{
margin-top:0px;
margin-bottom:0px
}
The gap between header area and search section comes from the margin of h1(Search). The solution is to set the margin of that h1(Search) to zero.
h1{
margin-top:0px;
}
It causes bootstrap to set every column to have a padding of 15px on both left and right side. The solution is to override bootstrap style:
[class*="col-"]{
padding:0px;
If you don't want to override all bootstrap columns, create your own class then.
I have floated two elements right in the header of my website which are <div id="twitter"> and <div id ="navbar>, but there appearance becomes skewed when I view them in IE6 and IE7. I believe that I either need to clear the floated elements or apply a clearfix but I am unsure as to where.
here is an image of the issue in IE6 and IE7:
This is the desired result as it would appear in modern browsers.
Here is a link to the web page: http://www.bestcastleintown.co.uk/pg/
CSS:
#twitter {
background: red;
float: right;
height: 40px;
margin-bottom: 40px;
width: 200px;
}
#navbar {
font-size: 2.2em;
float:right;
}
HTML:
<div id="main_header">
<div id="inner_main_header">
<div>
<div id="main_logo">
<div class="home_page_logo left">
<img src="PG_awards_logo.gif">
</div>
</div>
<div>
<div id ="twitter" class="padall">
Follow us
</div>
<div id ="navbar" class="right">
<ul class="nav NG">
<li>home</li>
<li>enter</li>
<li>categories</li>
<li>judging</li>
<li>sponsorship</li>
<li>contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
Change #navbar style to this:
#navbar{
font-size: 2.2em;
float: right;
width: 60%;
overflow: auto;
}
Just give the #navbar some width and overflow other than visible.
I am using Bootstrap's Navbar and Bootsrap's grid to display a Navbar with a image immediately underneath the Navbar. However, for some reason there is whitespace between this Navbar and the image. When I use firebug to investigate the location of the whitespace, it looks like the Navbar is top-aligned within its containing . I have tried to fix this by using CSS to bottom-align the navbar, to no avail.
How can I eliminate this whitespace?
<!-- Top Navigation Bar -->
<div class="row" id="rowTopLinkNavBar">
<div class="span6 offset3" id="divTopLinkNavBar">
<div class="navbar" id="topLinkNavBar">
<div class="navbar-inner" style="font-size: 16px;">
<ul class="nav">
<li class="active">Home</li>
<li class="divider">PROJECTS</li>
<li class="divider">ABOUT US</li>
<li class="divider">THE TEAM</li>
<li class="divider">EVENTS</li>
<li class="divider">MEETINGS</li>
<li>RESOURCES</li>
</ul>
</div>
</div>
</div>
</div>
<!--Background Image-->
<div class="row" id="rowBackgroundImg">
<div class="span6 offset3" id="backgroundImg">
<!-- background image is set in CSS -->
</div>
</div>
Here is my desperate attempt at fixing this issue using CSS:
#backgroundImg
{
color: #ff0000;
background-color: #000000;
/*width: 709px;
height: 553px;*/
background: url('../images/someImage.jpg') no-repeat;
background-size: 100%;
height: 700px;
border-radius: 0px;
background-position: center;
vertical-align: top;
background-position: top;
}
#divTopLinkNavBar
{
vertical-align: bottom;
}
#topLinkNavBar
{
padding-bottom: 0px;
}
#rowBackgroundImg
{
padding-top: 0px;
}
.navbar
{
vertical-align: bottom;
}
You may want to override the margin-bottom: 20px from navbar :
.navbar {
margin-bottom: 0;
}
Something like that : http://jsfiddle.net/q4M2G/
(the !important is here just to override the style of the CDN version of bootstrap I'm using in the jsfiddle but you should not need to use it if your style correctly overrides bootstrap styles)
Why you put classes: span12 offset3 ?
Bootstrap has 12 columns default. so if you didn't changed it try to put:
span9 offset3 or just span12.
I am developing an events page using jquery mobile. I have a stylish way of showing the date. It currently works flawlessly on my desktop, yet when I view it on my iphone 3gs, I get a blurry Image. The text seems as though it is duplicated on itself just slightly to look like this: help please.
link to the page : here
Here is the css:
.caldate2 { background: url(http://www.fsb.muohio.edu/fsb/templates/images/calpage-red.gif) no-repeat;
width:38px;
height:38px;
text-align:center;
margin-right:8px;
float: left; }
.caldate2 .day {
color: #fff;
margin-top:4px; }
.month { text-transform:uppercase;
color:#d5b549;
font-size:9px; }
and the Markup:
<body>
<div data-role="page" data-theme="a">
<div data-role="header">
<a data-rel="back" data-icon="back" data-direction="reverse">Back</a>
<h1>Events</h1>Home
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-dividertheme="a" data-inset="true">
<li data-role="list-divider">Divider</li>
<li>
<div class="caldate2">
<div class="day">
28
</div>
<div class="month">
MAR
</div>
</div>This is a test
</li>
</ul>
</div>
</div><!-- /page -->
</body>
mumis,
looking into it, it would appear the class:
.ui-btn-up-a {
color: #000000;
font-weight: bold;
text-shadow: 0 1px 1px #EEEEEE;
}
is causing an extra "#EEE" text-shadow on the text.
Try removing that from the fsb.min.css file!
Oh and btw,
I'm from around SWOhio area (noticed the MUOhio)