I am using the materialize CSS library and creating a nav bar the following way:
<div class="navbar-fixed">
<nav>
<div class="container">
<div class="nav-wrapper">
<p><img src="public/images/logo.png" /></p>
<span class="btn-open"></span>
<ul class="right hide-on-med-and-down">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
<li>Link4</li>
</ul>
</div>
</div>
</nav>
</div>
However the image is not vertically aligned. I did try use the helpers of materialize CSS but still no success.
Any ideas what is wrong?
Materialize doesn't provide a helper class in this case, so just add your own:
.logo {
display: inline-block;
height: 100%;
}
.logo>img {
vertical-align: middle
}
Demo: http://www.codeply.com/go/466ZvBYbG2
Related
anyone know how to keep the footer at the bottom of a reactive component when the component view changes? I currently have set the content to 100vh for the height CSS property, which works on first load. However, when I change the state which then changes the view, the footer stays in the same place, while the component's height grows as I add more elements. So then the footer is in the middle of the page again. Here is the component template:
<template>
<div id="app">
<div class="title-bar" data-responsive-toggle="navbar" data-hide-for="medium">
<button class="menu-icon" type="button" data-toggle="navbar"></button>
<div class="title-bar-title">Menu</div>
</div>
<div class="top-bar" id="navbar">
<div class="top-bar-left">
<ul class="menu">
<li class="brand">
NAME
</li>
</ul>
</div>
<div class="top-bar-right">
<ul class="menu" v-if="this.$cookies.get('user')">
<li><router-link class="link align-left" to="/sentences">Home</router-link></li>
<li #click="logout"><a>Logout</a></li>
</ul>
</div>
</div>
<div class="content-wrapper">
<router-view></router-view>
</div>
<!-- WHERE I AM HAVING THE ISSUE -->
<footer>
<p>© 2017</p>
</footer>
</div>
</template>
CSS:
footer {
background-color: #333;
height: 65px;
padding: 20px;
}
footer > p {
margin: 0;
}
Thanks for any ideas of how to solve this problem!
You can use nextTick that allows you to do something after you have changed the data and VueJS has updated the DOM based on your data change
method:{
this.$nextTick(() => {
this.scrollToEnd();
});
scrollToEnd: function () {
var messages = this.$el.querySelector(your component)
messages.scrollTop = messages.scrollHeight
}
}
Please try this methods to keep footer in the bottom in here
I am working on visual studio express 2013 and create a default project based on webform with default template as shown in link http://codepen.io/anon/pen/dPWzRd
For some reason Header & footer elements appear our their main wrapper as it is show in the codepen example. I tried to play around with few css properties but it breaks the design.
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
</div>
</header>
How can ii fix this so that Logo and menu items show inside the Header Wrapper (basically inside the red box) and same for the footer section
You can just use in CSS
display: inline-block;
instead of
float: left;
Full example:
.float-left {
display: inline-block;
}
It's because style float makes element "invisible" for parent. Style display: inline-block acts similar to float but is "visible".
when you have to element inside in other div and two div's are floating after that you need to add clear.
forked example
http://codepen.io/anon/pen/mymMMz
<header>
<div class="header-wrapper">
<div class="float-left">
<p class="site-title"> logo here</p>
</div>
<div class="float-right">
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>Test</li>
</ul>
</nav>
</div>
<div class="clear"></div>
</div>
</header>
.clear {
clear: both;
}
or add overflow hidden to .header-wrapper
I want to create fluid layout using LESS and without using Bootstrap grid clasess like .span6 on html code. How can I do this?
When I wrote without LESS I create layout like this:
<div class="container-fluid">
<div class="row-fluid" id="header">
<div class="span4 block">
<h1 class="title">Sample Site</h1>
<h2 class="sub-title">Powered by Twitter Bootstrap</h2>
</div>
<div class="span6 block">
<ul class="nav nav-pills">
<li class="active">Home</li>
<li>Pages</li>
<li>Typography</li>
<li>UI</li>
<li>Calendar</li>
<li>Tables</li>
</ul>
</div>
<div class="span2 block">
<div class="btn-group open">
<button class="btn">Dropdown</button>
<button class="btn dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Change password</li>
<li>Log in with another user</li>
<li>Change token</li>
<li>Log out</li>
</ul>
</div>
</div>
</div>
<div class="row-fluid" id="slider">
<div class="span12 block">
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
Now, my layout looks next way:
<div id="wrap">
<div id="header">
<div id="logo">SiteLogo</div>
<div id="top-menu">
<ul>
<li>Home</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</div>
<div id="logout">
Logout
</div>
</div>
<div id="slider">
and what I should write on my .less file if I want to make div#wrap -> .container-fluid,
div#header -> .row-fluid, div#logo -> .span4, div#top-menu -> .span6, div#logout -> .span2
without writting this clasess on html code?
First, this wouldn't really be semantic, at least, no more so.
The semantic form of <div id="top-menu"> is <nav> or <nav id="top">
The semantic form of <div id="header"> is <header>
In any case, there are instructions on doing this here:
Please stop embedding Bootstrap classes in your HTML
Honestly, though, it's not as simple as the author makes it look. Just because you have a <nav> inherit the styles of .nav from Bootstrap doesn't mean its children will inherit inherited styles as well.
So if I define a style from .nav ul, a <ul> element will not receive this style if it's in a <nav>.
This worked for me.. posting in case it helps anyone else.
Mixins for semantic fluid grid:
.makeFluidRow(){
width: 100%;
.clearfix();
}
.makeFluidCol(#span:1,#offset:0){
float: left;
#grid > .fluid .span(#span);
#grid > .fluid .offset(#offset);
&:first-child {
margin-left: 0;
.offsetFirstChild(#offset);
}
}
Use them just like the non-fluid mixins:
div#header{
.makeFluidRow();
div#logo {
.makeFluidCol(4); //Spans 4 cols
}
div#top-menu {
.makeFluidCol(6); //Spans 6 cols
}
div#logout {
.makeFluidCol(2); //Spans 2 cols
//Or you could have span1, offset1 using .makeFluidCol(1,1);
}
}
I've tried a few option but i can't manage to get 4 links to span across the navbar. I thought it would be quite easy to add the span3 class to each <li>.
Here's my HTML:
<div class="navbar center">
<div class="navbar-inner">
<div class="container row">
<ul class="nav span12">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
To center the links I've used the solution described here: Modify twitter bootstrap navbar
Here's the CSS:
.navbar-inner {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.center.navbar .nav,
.center.navbar .nav > li {
float:none;
display:inline-block;
*display:inline; /* ie7 fix */
*zoom:1; /* hasLayout ie7 trigger */
vertical-align: top;
}
.center .navbar-inner {
text-align:center;
}
All I've managed to get is this:
How can I get those four links spanned on the same row?
Using spanX is not the best solution here (unless you're using bootstrap-resonsive.css, see below). You can uses percentages, as long as you're willing to modify you CSS when the number of items in the navbar changes.
You can make this work with default navbar markup:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav">
<li>Home</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
</div>
And two CSS rules. The first removes the margin on the <ul class="nav">, removes the float and sets its width to be 100% of its container (in this case, the <div class="container"> within <div class="navbar-inner">.
The second rule sets the width of each <li> to be a certain percentage of the width of the <ul>. If you have four items, then set it to 25%. If you have five, it'd be 20%, and so on.
.navbar-inner ul.nav {
margin-right: 0;
float: none;
width: 100%;
}
.navbar-inner ul.nav li {
width: 33%;
text-align: center;
}
jsFiddle DEMO
UPDATE
If you are using the responsive bootstrap CSS, you CAN use the built-in spanX classes, like so:
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul class="nav row-fluid">
<li class="span4">Home</li>
<li class="span4">Link</li>
<li class="span4">Link</li>
</ul>
</div>
</div>
</div>
Then, all the CSS you need is:
.navbar-inner ul.nav li {
text-align: center;
}
jsFiddle DEMO
You did a good start but your markup doesn't reflect the real grid :
You don't put .spanX in a .span12
.container and .row might have conflicting properties
It seems to work with this :
<div class="navbar center">
<div class="navbar-inner">
<div class="container">
<div class="row">
<ul class="nav">
<li class="active span3">
Home
</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
<li class="span3">Link</li>
</ul>
</div>
</div>
</div>
</div>
Demo (jsfiddle) and fullscreen
i need
at this moment code look
Css
ul#content {height:1%;overflow:hidden;list-style:none;margin:0;padding:0;max-width: 1020px;}
ul#content li{vertical-align:top;display:inline-block;margin:0 2% 26px 0;width:auto;}
* html ul#content li{display:inline;}
*+ html ul#content li{display:inline;}
Html
<ul id="content" >
<li>
<div style="height: 420px;width: 740px;" ></div>
</li>
<li>
<ul>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
<li>
<div style="min-width: 220px;">
text
</div>
</li>
</ul>
</li>
</ul>
Maybe css media queries are something you want to look in to:
http://css-tricks.com/6731-css-media-queries/
This specific tutorial explains how to make changes to the layout/styles based on screen width.
Basically it allows to conditionally set styles on elements, in this case you could make seperate styles for the ul depending on screen width. Browser support is pretty decent, and as a fallback you could supply some pretty simple js code to handle the not supporting browsers.
I'm guessing you need something like the following for it to look like the second image...
html:
<div id="content"></div>
<ul id="contentList">
<li>Text</li>
<li>Text</li>
...
</ul>
css:
#content {width:740px; height:420px}
#contentList {margin:10px 0; overflow:hidden}
#contentList li {min-width:220px; float:left; list-style:none}