I have a nav bar with an image and a ul. I want to text in the ul to align to the bottom of the div but it at the top right now. How can i achieve this?
http://jsbin.com/otitaf/1/
<nav>
<div class="logo">
<img src="img/logo.jpg" id="logo">
</div>
<div class="nav">
<ul>
<li class="bottom">
Luigi's ♨ Pizzeria
</li>
<li>
Menu
</li>
<li class="bottom">
Map
</li>
<li>
About
</li>
<li>
Contact
</li>
<li>
Praises
</li>
</ul>
</div>
</nav>
css
.logo{
width: 30%;
float: left;
}
.nav{
float: right;
}
#logo{
height: 100%;
margin-left: 25%;
}
.bottom{
position: relative;
vertical-align: bottom;
}
use below css to achieve your dream
#side-bar{ position:relative; }
#side-bar ul{position: absolute; bottom: 0;} /* this will apply to all ul available in side-bar
insted this, you can also add class or id to ul to select it specifically, like:
.sidebar-ul{position: absolute; bottom: 0;}
Try adjusting your ul and the positioning, something like this:
#side-bar section ul {
position: absolute;
bottom: 30px;
}
Related
I am trying to follow a tutorial on YouTube to create a toolbar, but I am using Vuejs instead of regular HTML like on the video and the content of the views (.vue files) goes beside the toolbar instead of below it and another thing, I try to make center the toolbar.
<template>
<div id="app">
<div class="toolbar">
<ul>
<li>
Home
</li>
<li>
About
<ul>
<li>
<a href>Our Team</a>
</li>
<li>
<a href>Camp Sites</a>
</li>
<li>
<a href>Mission & Vision</a>
</li>
<li>
<a href>Resources</a>
</li>
</ul>
</li>
<li>
Things to do
<ul>
<li>
<a href>Activities</a>
</li>
<li>
<a href>Parks</a>
</li>
<li>
<a href>Shops</a>
</li>
<li>
<a href>Events</a>
</li>
</ul>
</li>
<li>
Contact
<ul>
<li>
<a href>Map</a>
</li>
<li>
<a href>Directions</a>
</li>
</ul>
</li>
<li>
News
</li>
</ul>
</div>
<div>
<router-view/>
</div>
</div>
</template>
#app {
margin: 0;
padding: 0;
}
body {
background-color: black;
background-size: none;
margin-left: 10%;
}
.toolbar ul {
margin: 0px;
padding: 0px;
list-style: none;
font-family: arial;
}
.toolbar ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: 0.8;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.toolbar ul li a {
text-decoration: none;
color: white;
display: block;
}
.toolbar ul li a:hover {
background-color: green;
}
.toolbar ul li ul li {
display: none;
}
.toolbar ul li:hover ul li {
display: block;
}
Whatever what I tried today, either the view was correctly below the toolbar but then the submenus were unclickable, or the views were below and centered but with a big margin-top to make the menu clickable or just beside the toolbar.
I am trying to replicate this kind of toolbar with the views right below it.
I guess the problem is 'float'. You will need a div with clear:both style after the toolbar and before the div containing router-view.
...
div class="toolbar"
...
/div
div style="clear:both"/
div
router-view
...
In my footer I have paragraph and I want to change background of her div tag, but I can't.
I want to change background of div "bgdf", I tried using background-color: yellow;
HTML
<div class="container-fluid footer">
<div class="row">
<div class="col-xs-12">
<img src="img/Gallery/fb.png" alt="">  
<img src="img/Gallery/twitter.png" alt="">  
<img src="img/Gallery/youtube.png" alt="">  
<img src="img/Gallery/myspace.png" alt="">
<ol class="breadcrumb">
<li><a class="active">Home</a></li>  
<li>Gallery</li>  
<li> FAQ</li>  
<li> Contact</li>
<li> Blog</li>
</br>
<li><a class="active">Service</a></li>  
<li>Forum</li>  
<li> Portfolio</li>  
<li> About</li>
</ol>
<div class="bgdf">
<p><small>Copyright <span class="glyphicon glyphicon-copyright-mark"></span> All Right Reserved | Testing Website </small></p>
</div>
</div>
</div>
</div>
CSS
.col-xs-12 .breadcrumb{
background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
content: none;
}
.breadcrumb li a {
color: white;
font-family: TW Cen MT;
font-size:17px;
}
.container-fluid p{
bottom: 0;
position: absolute;
margin-left: 34em;
}
.breadcrumb {
margin-bottom: 50px;
}
.bgdf{
background-color: yellow;
}
Try to remove position: absolute; and watch what happens. You p inside .container-fluid is absolute against bottom 0 positioned and so there is nothing to display right now. At least when I try it.
Instead of setting the p absolute, set the .bgdf absolute against the bottom and it seems to work fine.
See this http://jsfiddle.net/y8pf36bs/
Hope this is what you are asking for.
Here is the final code from the final fiddle:
.col-xs-12 .breadcrumb{
background-color: #2b2b2b;
}
.breadcrumb > li + li:before {
content: none;
}
.breadcrumb li a {
color: white;
font-family: TW Cen MT;
font-size:17px;
}
.breadcrumb {
margin-bottom: 50px;
}
.bgdf{
background-color: yellow;
bottom: 0;
position: absolute;
width: 100%;
}
Hi new to CSS here could anyone help me get the text to move down so it's aligned with my logo image? Also as an extension on that question does anyone know how I can make the text move across so the margins on either side match?
This is what it looks like now:
Here is the html:
<div id="header">
<div class="wrap">
<nav id="topnav"> <!-- This is the top nav bar-->
<ul id="topnavlist">
<li> <!-- Home logo-->
<div class="logo">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
</div>
</li>
<div class="navItems"><!-- Nav items-->
<ul>
<li>UK News</li>
<li>Smartphones</li>
<li>Reviews</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>
And the CSS:
#header, #footer {
background-color:#115279;
float:left;
padding:15px 0;
min-width:100%;
}
.wrap {
position:relative;
margin:0 auto;
width:960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color:#D9330F;
list-style-type: none;
float: left;
display:inline;
padding: 10px;
}
.navItems {
height: 20%;
display: inline;
margin-top:30px;
padding-top: 50px;
padding: 50px;
}
Your HTML is invalid, you can't have div inside li. Replace div with li and wrap their children(lis) in a ul.
To vertically center the lis, give .navItems a height: 50px same as the height of your logo and give it a line-height: 50px(height)
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
float: left;
display: inline;
padding: 10px;
}
.navItems {
display: inline;
height: 50px;
line-height: 50px;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<div class="logo">
<a href="index.html">
<img src="http://dummyimage.com/100x50/000/fff" alt="TechNow Logo" height="70" width="auto">
</a>
</div>
</li>
<li class="navItems">
<!-- Nav items-->
<ul>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
You can't have a div element as a child to a ul element. As for aligning all of your elements. By default, the img and a elements are considered inline elements in css. You can use the vertical-align property on inline elements. So your markup could be a bit more simple like
<nav id="topnav">
<img src="images/TechNow Logo 0.2.jpg" alt="TechNow Logo" height="70" width="auto">
UK News
Smartphones
Reviews
</nav>
and then the css
#topnav a {
vertical-align: middle;
}
Since I don't have the exact size of your image, this won't get you exactly what you're looking for, but it should get you on the right track. The main thing is to make sure you have valid HTML markup. This can cause many headaches and issues with your css if it's not.
As mentioned your current HTML is invalid. limust be children (and the only direct children) of a ul.
In fact there is no need to use divs at all.
#header,
#footer {
background-color: #115279;
float: left;
padding: 15px 0;
min-width: 100%;
}
.wrap {
position: relative;
margin: 0 auto;
width: 960px;
}
#topnavlist li {
font-family: verdana, sans-serif;
color: #D9330F;
list-style-type: none;
display: inline-block;
vertical-align: middle;
padding: 10px;
}
.NavItem {
color: white;
}
<div id="header">
<div class="wrap">
<nav id="topnav">
<!-- This is the top nav bar-->
<ul id="topnavlist">
<li>
<!-- Home logo-->
<a href="index.html">
<img src="http://placehold.it/70x70" alt="TechNow Logo" height="70" width="auto" />
</a>
</li>
<li>UK News
</li>
<li>Smartphones
</li>
<li>Reviews
</li>
</ul>
</nav>
</div>
</div>
I floated a logo image and the title of the page to the left, but then the nav gets in the way along with some of the main content. I tried to clear the nav but then when I want to display my navs inline it will throw it off. So I can't do that.
Anyone know what to do?
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
Add this to your css:
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
* {
margin: 0px;
padding: 0px;
}
header,nav,section,article,aside,footer {
display: block;
}
.container {
width: 960px;
margin: 0 auto;
}
.main_header img {
float: left;
}
.main_header h1 {
float: left;
}
header{clear:both; overflow:hidden;}
nav ul li {display:inline;}
<header class="main_header">
<img src="logo2.jpg" alt="logo pic">
<h1>Title of header</h1>
</header>
<nav>
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact
</li>
</ul>
</nav>
Hi I am trying to create a personal website and am having some problems with the styling at my header, specificaly related to positioning.This is how my header looks now:
The NA in the middles is actually an image circle that should overlap the black borders , but I can not seem to figure out how to do it.This is my markup:
<section class="top-bottom-border overflow">
<div class="center">
<ul id="social">
<li><img src="images/social/FacebookIco.png"></li>
<li><img src="images/social/TwitterIco.png"></li>
<li><img src="images/social/LinkedinIco.png"></li>
<li><img src="images/social/LinkedinIco.png"></li>
</ul>
</div>
</section>
<nav class="center overflow" id="menu">
<ul class="float-left">
<li>Home</li>
<li>About Me</li>
<li>Blog</li>
</ul>
<ul id="logo">
<li><img src="images/Logo.png" alt="logo"/></li>
</ul>
<ul class="float-right">
<li>Skills</li>
<li>Portfolio</li>
<li>Contact me</li>
</ul>
</nav>
<section class="top-bottom-border"></section>
And this is my css:
.center {
margin: 0 auto;
width: 960px;
}
.overflow {
overflow: hidden;
}
.top-bottom-border {
background: url(../images/top-bottom-border.jpg);
height: 37px;
}
ul#social{
float: right;
}
ul#social li {
display: inline-block;
margin-left: 10px;
margin-top: 5px;
}
nav#menu{
position: relative;
height: 50px;
}
nav#menu li{
display: inline-block;
padding-top: 20px;
padding-bottom: 20px;
}
nav#menu .float-left{
padding-left: 150px;
}
nav#menu .float-left li{
margin-right: 25px;
}
nav#menu .float-right{
padding-right: 150px;
}
nav#menu .float-right li{
margin-left: 25px;
}
ul#logo{
position: absolute;
left: 400px;
top:-40px;
}
How can I make the image in the center overlap the two black borders?
<nav class="center overflow" id="menu"> the z-index isn't coming into act because you've overflow: hidden for your #nav so the logo that overflows it is not displayed. Removing overflow class from it will fix display of your logo.
Edit As far as I can understand your layout and the goal, you might also want to add float: left to nav#menu .float-left and float :right to nav#menu .float-right
You could try adding a style="z-index: 5" to the li or ul of the logo