I am trying to make a NavBar but whenever I have a dropdown I need to add I need to decide whether to put it right or left. Can anyone help me with a way to make it center.
I have tried to use the float element but it doesn't really do anything
HTML:
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Products
</a>
<div class="dropdown-menu dropdown-menu-doors-windows">
<div class="row">
<div class="col-md-6">
<img class="pic-align" src="img/products/doors/doors_3.png" />
</div>
<div class="col-md-6">
<img class="win-align" src="img/products/windows/windows_2.png" />
</div>
</div>
</div>
</li>
CSS:
.win-align {
text-align: center;
height: 250px;
width: 190px;
margin-bottom: 20px;
}
.dropdown-menu-doors-windows {
width: 900px;
height: 400px;
border-top-right-radius: 15px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
border-top-left-radius: 15px;
opacity: 0.97;
}
.pic-align {
text-align: center;
height: 250px;
width: 140px;
margin-bottom: 20px;
}
I don't see code. your parent element class {display: flex; justify-content: center}
floats don't work flex, bootstrap is built on flex
Related
I have a container where i store 2 div's. ".logo" and ".navbar-list" how can I move my ".navbar-list" to the right edge of container.
Previously everything worked but when I switched bootstrap to version 4.3.1 my div's overlapped .I've tried float:right but is not working.
container {
font-family: sans-serif;
height: 100%;
margin-left: auto;
margin-right: auto;
float: none;
padding: 0;
}
.logo {
width: 380px;
margin-right: 0;
position: absolute;
height: 100%;
margin-left: 10px;
}
.navbar-list {
color: white;
width: 300px;
height: 100%;
}
<div class="container">
<div class="logo">
<a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
<h1>WITAJ W <span>DOMU!</span></h1>
</div>
<div class="navbar-list ">
<ul>
<li>
<span class=" glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
</li>
</ul>
<ul>
<li> <button type="button" class="btn btn-danger btn-md ">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
</button></li>
</ul>
</div>
</div>
There are lots of methods of achieving your desired result! In my opinion, Flexbox would be your best option. You should add display: flex to your .container. You can add the flex to the .logo container as well, if you want the logo and h1 to sit side by side.
You should also avoid using float, as this often makes HTML behave unexpectedly. You can replace this with justify-content: space-between.
I've amended your example above to incorporate my amends:
.container {
font-family: sans-serif;
padding: 0;
height: 80px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
width: 380px;
/*margin-right: 0; */
/*position: absolute; */
height: 100%;
margin-left: 10px;
display: flex;
align-items: center;
}
.navbar-list {
color: white;
width: 300px;
height: 100%;
}
<div class="container">
<div class="logo">
<a class="navbar-brand" href="#"><img src="img/640px-HSV-Logo.png" /></a>
<h1>WITAJ W <span>DOMU!</span></h1>
</div>
<div class="navbar-list ">
<ul>
<li>
<span class=" glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> Sklep
</li>
</ul>
<ul>
<li> <button type="button" class="btn btn-danger btn-md ">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span> Zaloguj się
</button></li>
</ul>
</div>
</div>
From a high level, the go-to method for this situation is using flexbox instead of floats. Not sure about Bootstrap in your case or why you had that change happen.
.container {
display: flex;
justify-content: flex-end; /* and many more positioning options */
}
just add float: right; to your .navbar-list css then you can move your div to right side
.navbar-list {
color: white;
width: 300px;
height: 100%;
float: right;
}
I cant figure out why the red buttons are not displayed properly in firefox. In chrome it looks good.
Here is the fiddle:
Fiddle
That is my chrome:
That is my firefox:
My HTML:
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
My CSS:
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
}
Well I dont know what details to add. I tried to change everything in firefox browser dev tools but could never achieve the same behaviour as in chrome.
https://jsfiddle.net/7vz89t4d/2/
.img-element-del {
position: relative; /* this is new */
padding-bottom: 40px;
display: inline-block;
}
.deletebtn {
border-radius: 0;
width: 155px;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
position: absolute;
bottom: 0; /* this is new */
left: 0; /* this is new */
}
Short explanation:
If using position:absolute; do also set position:relative; to the parent. Then absolute is always from the parent.
This picture might help:
the picture is from css-tricks.com/absolute-positioning-inside-relative-positioning which explains it even a little further.
The above picture in code would look like:
.parent {
position: relative;
width: 400px;
height: 300px;
border: solid 3px CHOCOLATE;
}
.absolute-one,
.absolute-two,
.absolute-three {
position: absolute;
background-color: CHOCOLATE;
color: white;
padding: 10px;
width: 100px;
height: 100px;
}
.absolute-one {
top: 0;
left: 0;
}
.absolute-two {
bottom: 5px;
left: 10px;
}
.absolute-three {
top: 30%;
right: -25px;
}
<div class="parent">
<div class="absolute-one">
top: 0;
left: 0;
</div>
<div class="absolute-two">
bottom: 5px;
left: 10px;
</div>
<div class="absolute-three">
top: 30%;
right: -25px;
</div>
</div>
I've updated your fiddle here -> https://jsfiddle.net/7vz89t4d/3/
/* Latest compiled and minified CSS included as External Resource*/
/* Optional theme */
#import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
body {
margin: 10px;
}
.bilder_bearbeiten img {
width: 155px;
height: 100px;
margin-bottom: 5px;
border-radius: 2px;
opacity: 1;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.img-element-del {
padding-bottom: 40px;
display: inline-block;
position: relative;
margin-bottom: 20px;
}
.deletebtn {
border-radius: 0;
width: 155px;
position: absolute;
color: white;
text-align: center;
text-decoration: none;
padding: 5px 0;
bottom: 0;
left: 0;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css" rel="stylesheet"/>
<div class="bilder_bearbeiten col-lg-12">
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete7"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete8"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete9"> Entfernen </a>
</div>
<div class="img-element-del">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg"/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete10"> Entfernen </a>
</div>
</div>
Try adding "Left:0;" and "bottom:0;" in your deletebtn css
Here I have craeted a new one. You do not have to use position absolute or something similar.
jsfiddle
I have just put each "image" and "a" in a div
<div class="bilder-row">
<img src="..."/>
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
and style:
.bilder-row{width:160px;float:left;}
this will solve the problem.
When styling a page with markup, generally avoid absolute positioning within your layout. Absolutely positioned items make for very brittle layouts which make responsive design very very challenging. Only use it as a last resort. I'd recommend you fully utilize Bootstrap. It's a very powerful tool but is opinionated about your markup. I've refactored your example into something more responsive while taking full advantage of the Bootstrap grid: http://getbootstrap.com/css/#grid
Here's the full Codepen example: http://codepen.io/toddsby/pen/pRLQem
Viewed on Firefox 51 (macOS)
HTML
<div class="row gutter-5">
<div class="img-element-del col-xs-3">
<img src="http://ghk.h-cdn.co/assets/cm/15/11/54ff82285cf02-lving-room-green-gold-modern-de.jpg" />
<div class="deletebtn-container">
<a class="btn btn-danger deletebtn" href="/user/logged_in/edit_room/22/delete6"> Entfernen </a>
</div>
</div>
</div>
CSS
/** custom Bootstrap grid gutter **/
.row.gutter-5 {
margin-left: -10px;
margin-right: -10px;
}
.gutter-5 > [class*="col-"], .gutter-5 > [class*=" col-"] {
padding-right: 5px;
padding-left: 5px;
}
I've moved the items into a col-3 (12/4) grid. Then styled the image and button to take up 100% of their containers. This allows for a flexible and responsive layout. You can then use Bootstrap breakpoints to target different devices. ie <div class="img-element-del col-xs-1 col-md-2 col-lg-3">
Note: This layout would be very simple with Flexbox. As of 2016, Flexbox is supported by all major browsers! You can learn more about Flexbox here: https://medium.freecodecamp.com/understanding-flexbox-everything-you-need-to-know-b4013d4dc9af
Try add position: relative; to .img-element-del
and to .deletebtn add this properties:
z-index: 1;
left: 0;
bottom: 10px;
I've been struggling with this simple and basic problem for the last day and can't seem to find a solution for it nowhere.
I'm having a container div on my website, in which there are four social network buttons, and what I'm trying to achieve is vertically align them in to the middle
of the container, so there's equal amount of free space on top of them and underneath them.
Please note, that I've linke normalize.css and reset.css to my html.
Muh code:
HTML
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0"><img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0"><img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0"><img src="socialicons/google.png" alt="GO"><a/>
<a href="#0"><img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
CSS
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a{
display: inline-block;
vertical-align: middle;
height: 100%;
float: right;
padding: 2px;
margin: 0 3px;
}
Any help will be much appreciated.
All you need to add is clear
.social-line-container {
width: 66%;
height: inherit;
margin: 0 auto;
}
.social-line-buttons-group a {
display: inline-block;
/*vertical-align: middle;*/
height: 100%;
float: right;
clear: both; /* add */
padding: 2px;
margin: 0 3px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<a href="#0">
<img src="socialicons/facebook.png" alt="FB"><a/>
<a href="#0">
<img src="socialicons/twitter.png" alt="TW"><a/>
<a href="#0">
<img src="socialicons/google.png" alt="GO"><a/>
<a href="#0">
<img src="socialicons/youtube.png" alt="YT"><a/>
</div>
</div>
.social-line-container{
border:2px solid black;
}
.social-line-buttons-group{
display:flex;
align-items: center;
justify-content: center;
height:100%;
}
.social-line-buttons-group a{
padding: 2px;
margin: 0 3px;
}
img{
width:50px;
height:50px;
}
<div class="social-line-container">
<div class="social-line-buttons-group">
<img src="http://lh3.googleusercontent.com/-ElsaNCI_yKg/VcXI_VFictI/AAAAAAAAINA/MeFjL1Ymaac/s640/StylzzZ%252520%252528289%252529.png" alt="FB">
<img src="https://upload.wikimedia.org/wikipedia/it/archive/0/09/20160903181541!Twitter_bird_logo.png" alt="TW">
<img src="http://www.userlogos.org/files/logos/annyella/google3.png" alt="GO">
<img src="http://logok.org/wp-content/uploads/2014/08/YouTube-logo-play-icon-219x286.png" alt="YT">
</div>
</div>
I have two divs inside of a navbar, and when attempting to display them inline, they show up like this rather than side by side:
Here's the HTML:
<!--Nav starts here-->
<nav class="navbar">
<div class="navbar-item-set">
<div class="navbar-item">
<a href="index.html" class="navbar-text">
<img src="images/sad_robot.png" alt="" width="45" height="45"/>
<br>
ID2 Games
</a>
</div>
<div class="navbar-item">
<a href="index.html" class="navbar-text">
<img src="images/sad_robot.png" alt="" width="45" height="45"/>
<br>
Fizz + Hummer
</a>
</div>
</div>
</nav>
<!--Nav ends here-->
And the respective CSS:
.navbar{
height: 80px;
text-align: center;
font-size: 1.7rem;
background-color: black;
}
.navbar-item-set{
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
}
.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
What's causing this strange layout?
Change
.navbar-item{
display: inline;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
To
.navbar-item{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 150px;
color: white;
}
Removing the <br/> elements in the HTML should do the trick.
Its pretty hard to recreate this in jsfiddle so I'm going to go ahead and paste a screenshot, HTML and CSS:
I'm having problem displaying the dropdown in the image above.
HTML and CSS:
<div class="row-fluid profile-gallery-image-container">
<div class="span12">
<img src="#"/>
<div class="image-options">
<div class="dropdown">
<i class="icon-cog icon-white"></i>
<ul class="dropdown-menu">
<li>test</li>
</ul>
</div>
</div>
<div class="delete-image">
<a href="javascript:void(0);"/></a>
</div>
</div>
</div>
.profile-gallery-image-container {
max-width: 130px;
max-height: 110px;
margin-bottom: 0px;
display: inline-block;
position: relative;
border: 2px solid rgba(140,140,140,1);
z-index: 0;
}
.image-options {
float: right;
top: 0px;
right: 0px;
position: absolute;
padding-top: 2px;
border-left: 2px solid rgba(255,128,64,1);
border-bottom: 2px solid rgba(255,128,64,1);
width: 15px;
height: 15px;
}
What am i doing wrong?
This could be to do with z-index levels or could be overflow settings.
Setting the parent container to have "overflow:visible;" would be a start - but then I'd look at position: relative on the menu CSS - that often helps matters.
But ultimately without seeing a working demo I can't figure it out.