Actually my logo size is large. And i want to fit it in the left side div of navbar. But it is going outside the div. Don't know what the issue is?
index.js
<div class="navbar-brand" >
<img class="logo-Image" src="./assets/images/kwikModelLogo.png" alt="KiwiModel" />
</div>
style.css
header.navbar .navbar-brand {
display: inline-block;
width: 250px;
height: 60px;
margin-right: 0;
padding: .8rem 1.5rem;
background-color: #fff;
}
I want the div to be adjust within the left div of navbar.
I think this style will help you
img.logo-Image {
width:100%;
height:auto;
padding: 0px 0px;
}
also you can adjust width and padding value as per your requirement to position the brand logo.
Related
This page http://alsotoday.com/roemerstrasse/ has a fixed bootstrap navbar, which should stay fixed, so the video in the background can shine through it. When scrolling the content all the way up, it will go beneath the navbar, which is not favourable. Anybody know, how to create an upper margin for the content, so it will scroll only just beneath the navbar without changing the navbar to not-fixed?
Edit 1:
main-area-video and panel_container (meanwhile called main-area) are both height 100%, because each, the video and the tiles should fill a screen.
Something like this ? In this snippet, the articles will not go behind the navbar, and only the content is scrollable. This is how SPA are supposed to work, for instance.
EDIT I added an opacity to the navbar so you can see, nothing is behind it.
body {
margin: 0;
height: 100%;
overflow: hidden;
}
.navbar {
position: fixed;
top: 0;
height: 50px;
line-height: 50px;
font-weight: bold;
font-family: Helvetica;
font-size: 30px;
background: darkcyan;
width: 100%;
padding: 0 20px;
color: white;
opacity: 0.2;
}
.content {
margin-top: 50px;
background: #ddd;
height: calc(100vh - 50px);
overflow: auto;
padding: 12px;
box-sizing: border-box;
}
.article {
height: 200px;
width: 100%;
background: #ccc;
margin: 12px 0;
}
<div class="navbar">Navbar</div>
<div class="content">
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
<div class="article"></div>
</div>
Since your page is always at 100% height and the only thing getting scrolled is the content you could just make it absolute instead of fixed.
But since you asked for a solution with a fixed position just add an margin to the content wrapper.
So to be clear: add margin-top: {MENU_HEIGHT}px to the content div, replacing {MENU_HEIGHT} with the actual height of your menu or the desired distance from it.
I have an responsive Owl Carousel (v2), each item or slide has an image and below that some text of variable length, see image below:
As can be seen, all the images are bottom aligned to the same baseline, regardless of how much text there is. I've done this by setting the text div to a fixed height. The problem is, if there were to be just one line of text, I'd have unnecessary space below the carousel.
If I allow the div to set its own height, I get this:
So my images are no longer lined up.
HTML
<div>
<img class='a4_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A4 size, this is going on to two lines
</div>
</div>
<div>
<img class='a5_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A5 size
</div>
</div>
<div>
<img class='a6_diary_image' src='sizes/test.png'>
<div class='owl_diary_desc'>
A6 size
</div>
</div>
</div>
CSS
.owl-carousel .owl-item {
display: table-cell;
float: none;
text-align: center;
vertical-align: bottom;
border: 1px dashed grey;
height: 100%;
padding: 0px 10px;
}
.owl_diary_desc {
font-size: 19px;
border: 1px dashed red;
margin-top:10px;
}
.a4_diary_image {
max-width: 100%;
max-height: 100%;
margin-left: auto;
margin-right: auto;
}
.a5_diary_image {
max-width: 70%;
max-height: 70%;
margin-left: auto;
margin-right: auto;
}
.a6_diary_image {
max-width: 50%;
max-height: 50%;
margin-left: auto;
margin-right: auto;
}
Straight HTML and CSS won't allow you to set equal heights based off siblings. Using a little jquery this can be achieved though.
$maxDesc;
function equalize(){
$('.owl_diary_desc').each(function(i){
if ($(this).height() > $maxDesc) { $maxDesc = $(this).height();}
});
$('.owl_diary_desc').each(function(i){$(this).height($maxDesc);});
}
When I use something like this, I generally move the variable holder to the beginning of the script. Then I call the function on document ready. Sometimes I'll even call it on the window resize function. If you choose to do that, you must call an each function on your object and reset the height to auto before recalling the equalize function.
Fiddle: http://jsfiddle.net/rg3w8kxc/2/
I have a fixed bar on top and an element below it. Since the top bar is fixed, I need to add some padding to the top of the element below it so that the whole height of that element shows. However, when I add something like padding-top:40px for example, it doesn't move the element down; rather it creates space below the element. Same goes with margin.
I feel like I'm missing something obvious. What's the issue here?
Here's my HTML:
<div id="top-bar">
<div class="section-wrap">
Win a [name of phone]!
</div><!-- .section-wrap -->
</div>
<div id="top-section-page">
<div class="section-wrap">
<span>⇦</span> Back to the mix
</div>
</div>
<p>Some text here</p>
Here's my CSS:
#top-bar {
background: #FAFAFA;
height: 60px;
line-height: 60px;
padding: 0 20px;
position: fixed;
width: 100%;
z-index: 999;
}
#top-section-page {
background: url("http://i.imgur.com/KNYV8j2.jpg") repeat center top #69C9CA;
border-bottom: 10px solid #FFF;
line-height: 185px;
margin-bottom: 100px;
}
You can add add the padding-top on the body and then you need a top 0px on the #top-bar
Add this to your css code:
body{
padding-top: 40px;
}
#top-bar {
top: 0px;
}
I'm working on a chat module for a project, everything is working but the css. I have a global container for the chat elements, this div has fixed position. Inside I have two divs, one for the chat windows and one for the contacts list, both the chat window and the contact list are floating to the right and can be "minimized" by clicking on the title (this hides the body and only leaves the title visible). The problem is if I minimize just one of the divs it remains on the top at the same height as the other div (see the image).
This is what I'm getting:
This is what I want:
Relevant code:
<body>
<!--boring code-->
<div class="chat_container">
<div class="contactos show">
<div class="titulo">contactos</div>
<div class="container">
<div class="contacto online" id="contacto_3">juan an orozco</div>
</div>
</div>
<div class="chat_wdow_container">
<div class="chat_wdow " id="chat_wdow_3">
<div class="title_area">juan an orozco</div>
<div class="container">
<div class="msg_area"></div>
<input type="text" name="msg">
</div>
</div>
</div>
</div>
</body>
and css
div.chat_container
{
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
border: 1px dashed gold;
}
div.chat_container > div
{
float: right;
}
div.chat_container div.contactos div.titulo
{
text-align: center;
}
div.chat_container div.contactos
{
min-width: 150px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
}
div.chat_container div.contactos div.container
{
display: none;
min-height: 145px;
padding: 10px;
}
div.chat_container div.contactos.show div.container
{
display: block;
}
div.chat_container div.chat_wdow
{
margin: 0 5px;
min-width: 190px;
background: dimgrey;
padding: 5px;
border-radius: 10px 10px 0 0px;
float: left;
}
div.chat_container div.chat_wdow div.title_area
{
text-align: center;
}
div.chat_container div.chat_wdow div.container div.msg_area
{
background-color: white;
height: 120px;
padding: 10px;
}
div.chat_container div.chat_wdow div.container
{
display: none;
}
div.chat_container div.chat_wdow.show div.container
{
display: block;
}
.chat_wdow input[type="text"]
{
width: 186px;
}
To collapse the window I toggle via mootools the class .show. When this class is missing the container area of the windows has display:none and when it gets applied it has display:block.
What I have tried so far:
setting the fixed parent to a height of 0 and overflow visible
seting the inner container to position relative and the child to absolute
using clear and overflow hacks
changing margins to auto values
changing vertical sizes and minimun heights of the inner containers and childs
changing display to inline and inline block
changing chat container to absolute and inner containers to relative
I have been searching for a while on google and SO but I have only found the options that I have already tried, I also looked at facebook's chat css but I can't find anything to help me, so I am looking for new ideas to bring down the collapsed div.
One solution is to use display:inline-block or display:inline instead and then set the vertical-align:bottom.
Ex: http://jsbin.com/uhubeh/1/edit
If you know the widths of both, however, you could also just use absolute positioning.
I am using CSS to skin a scroll bar that is created using JavaScript.
.scrollbar-track{
background: black;
height: 10px;
}
.scrollbar-thumb{
cursor: default;
border: 1px red solid;
width: 50px;
padding: 0;
}
.scrollbar-thumb-first{
display: inline-block;
background: green;
width: 5px;
height: 10px;
}
.scrollbar-thumb-middle{
display: inline-block;
background: red;
height: 10px;
width: 20px;
}
.scrollbar-thumb-last{
display: inline-block;
background: blue;
width: 5px;
height: 10px;
}
<div class="scrollbar">
<div class="scrollbar-track" style="width: 970px;">
<div class="scrollbar-thumb">
<span class="scrollbar-thumb-first"></span>
<span class="scrollbar-thumb-middle"></span>
<span class="scrollbar-thumb-last"></span>
</div>
</div>
</div>
And this is the fiddle: http://jsfiddle.net/w27wM/8/
Why is the inner div somehow larger than the parent div? Even with margin and paddings set to 0, the issue still remain.
Issue resolved by changing all the display: inline-block to float: left.
The problem may be related to this question, but removing all the whitespace didn't fix it for me. This might be due to the node being created in javascript.
Its a simple problem. By default the span line-height is 20px. An inline-block element read line-height to vertical-align.
So solution is either specify
line-height: 10px; or float: left;
Eg:
.scrollbar-thumb span{
line-height: 10px;
}
or
.scrollbar-thumb span{
float: left;
}
The .scrollbar div is not given an explicit width so it assumes the default = 100% of the width given by its parent.
The .scrollbar-track is given an explicit width of 970px which is beyond the width of the parent and the parent's parent. Thus, .scrollbar ends up thinner than its wide child .scrollbar-track.
Why are you setting the scrollbar-track explicitly but not doing the same for the .scrollbar (parent)?