Align navbar with my logo - html

I'm trying to align my navbar vertically so that it lays in the center next to my logo. I tried just adding some margin-top to the bar div element and that works, but it aligns it differently on different screens, I need something consistent. I've been stumped on this for a while, and if anyone can help that'd be great. Also if any of my CSS or HTML is bad practice let me know as well! Thank you
Here is what it looks like as of right now
.row {
height: 20%;
}
.logo {
width: 20%;
float: left;
}
.bar {
display: inline-flex;
padding: 20px;
font-size: 14px;
text-transform: uppercase;
width: 600px;
justify-content: center;
}
.bar-auth {
display: inline-flex;
padding: 20px;
font-size: 14px;
text-transform: uppercase;
width: 300px;
}
.icon {
padding: 15px;
}
.icon-auth {
padding: 15px;
}
<div class="row">
<img src={{ URL::asset( 'images/logo_opt.png')}} alt="Logo" class="logo">
<div class="bar">
<div class="icon icon-1"><a href="{{ url('index') }}">Home</a </div>
<div class="icon dropdown">What's New
<div class="dropdown-content">
Calendar
Events
</div>
</div>
<div class="icon icon-3">Legacy</div>
<div class="icon icon-3">Get Involved</div>
<div class="icon icon-3">Gallery</div>
<div class="icon icon-3">Contact</div>
<!-- Authentication Links -->
</div>
<div class="bar-auth">
#if (Auth::guest())
<div class="icon-auth">Login</div>
<div class="icon-auth">Register</div>
#else
<div class="icon-auth">{{"Welcome, " . Auth::user()->first_name }}</div>
<div class="icon-auth">
<a href="{{ url('/logout') }}" onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</div>
#endif
</div>
</div>

You can use flex to parent of logo and navbar and set align-items to center to achieve your result
.parent {
display: flex;
align-items: center;
}
Note: the .parent class here is the parent of logo and navbar. this is just for example. use your class instead.
remove the margin that you have given to set vertical alignment.

You can use line-height to align your navbar. You can use like :
.bar{
line-height:20%;
}

Related

HTML Hover icon

I'm designing a very basic website only with HTML and CSS.
In the design, I added some icons, which are images. These images I've added them in my HTML. I want to create a hover effect with another image. Any thoughts?
Here is my HTML and CSS
.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.view-icon,
.edit-icon,
.delete-icon {
width: 50px;
height: 50px;
display: inline-block;
padding: 10px;
}
<div class="card one">
<img class="avatar" src="images/avatar-01.jpg" alt="Foto Felipe Kaiser">
<p class="name">Felipe Kaiser</p>
<p class="position">Periodista</p>
<hr>
<div class="icon-group">
<div class="view-icon">
<a href="#">
<img src="images/view-icon.png" alt="Icono ver">
</a>
</div>
<div class="edit-icon">
<a href="#">
<img src="images/edit-icon.png" alt="Icono editar">
</a>
</div>
<div class="delete-icon">
<a href="#">
<img src="images/delete-icon.png" alt="Icono delete">
</a>
</div>
</div>
</div>
To add a different behaviour of css while hovering any item, you have to define this behaviour and add :hover to the container id/class. In your exemple, it may be :
.icon-group {
width: 100%;
margin: 0 auto;
text-align: center;
padding-bottom: 15px;
}
.icon-group:hover {
background-color: grey;
}
for exemple

Float div left and button right

Please note: I have looked at several SO posts and various suggestions for floating 2 divs side by side, however none of them seemed to work for me.
A summary of suggestions are:
display: inline-block
float: left
others refer to overflow: hidden, overflow: auto with various implementations.
One had worked, required me to set the right div:
position: absolute;
right: 0px
This was undesireable since the button would attach itself the the right side, ignoring all parent container constraints.
Above is that what I want to achieve.
The left div has the blue background. The right div contains the button.
My code:
Html
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src=""images/icons/edit.png">
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
Css
Note:using a basis of bootstrap for most of my css needs
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
Help would be very much appreciated
Without any changes to css, purely using bootstrap:
Few key things: ensure you add columns (<div class="col-md-12">) after specifying <div class="row">
You can use the pull-left & pull-right classes to float the content:
<div class="row">
<div class="col-md-12"><!-- define columns in bootstrap -->
<div class="pull-left"><!-- use pull-left -->
<h1>
Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png">
</a>
</h1>
</div>
<div class="pull-right"><!-- use pull-right -->
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
</div>
Fiddle
This has better overall browser support than display:flex which is not supported in older versions of Internet Explorer.
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
.display-inline-block {
display: inline-block;
}
.schedule-heading {
position: relative;
}
.small-image {
width: 30px;
height: 30px;
margin-bottom: 5px;
}
.button-status {
width: 120px;
height: 50px;
font-weight: bold;
font-size: 18px;
}
<div class="row">
<div class="display-inline-block float-left">
<h1>Your Order Schedule
<a id="editScheduleName" onclick="changeScheduleName()">
<img class="schedule-heading small-image" src="images/icons/edit.png"/>
</a>
</h1>
</div>
<div class="display-inline-block float-right">
<input id="btnScheduleStatus" type="button" class="btn button-status btn-success" value="my button">
</div>
</div>
.row{
display: flex;
justify-content: space-between;
align-items: center;
}
Try to use display: flex!
You can search in Google, you can learn display: flex easily.
First, you need to create a container div for both your buttons, and then have them inside as 2 divs. Then you can write in your CSS:
.button_container {
display: flex;
justify-content: space-between;
align-items: center;
}
You don't need to write anything for the other 2 divs.

Align Img Vertically within Div HTML and CSS

I have found the following solution for aligning an img vertically within a div
https://stackoverflow.com/a/7310398/626442
and this works great for a basic example. However, I have had to extend this and I want a row with two bootstrap col-md-6 columns in it. In the first column I want a 256px image, in the second I want a h1, p and a button. I have to following HTML:
<div class="home-costing container">
<div class="row">
<div class="frame">
<span class="helper"></span>
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" />
</div>
<div class="col-md-6">
<h2>Header</h2>
<p>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA<br /><br/>
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
and the following CSS:
.home-costing {
color: #fff;
text-align: center;
padding: 50px 0;
border-bottom: 1px solid #ff6500;
}
.home-costing h2 {
text-transform: uppercase;
font-size: 60px;
}
.home-costing p {
font-size: 18px;
}
.home-costing .frame {
height: 256px;
width: 256px;
border: 0;
white-space: nowrap;
text-align: center;
margin: 1em 0;
}
.home-costing .helper {
display: inline-block;
height: 100%;
vertical-align: middle;
}
.home-costing img {
vertical-align: middle;
max-height: 256px;
max-width: 256px;
}
The problem is that now the second column is no longer contained and the text does not wrap and goes off to the right.
How can I center align my image in the first column with the text in the right column and still get the correct wrapping in the second column?
Fiddler: https://jsfiddle.net/Camuvingian/1sc40rm2/2/
Your HTML needed updated, in Bootstrap, the div order should ALWAYS go .container > .row > .col- * - *, your code however went .container > .row > .frame > .col- * - *. I have corrected your HTML and now your code works.
HTML:
<div class="home-costing container">
<div class="row">
<div class="col-md-6">
<img src="http://www.nijmegenindialoog.nl/wp-content/uploads/in.ico" height="256" width="256" class="center-block" />
</div>
<div class="col-md-6">
<h2>UserCost</h2>
<p>Hello, I'm a paragraph</p>
<a class="btn btn-default"
href='#Url.Action("Index", "Products")'
role="button">
Learn More
</a>
</div>
</div>
</div>
</div>
Link to finished code example:
Codepen - Updated & working code
This fixes the word wrap issue also on the p tag.
CSS:
p {
font-size: 18px;
word-wrap: break-word;
}

ul with images doesn't center properly

I have a <ul> with images that I want to be displayed horizontally centred, inline but it keeps floating a little to the right and gets my window size to be a little over 100% width. Here's a FIDDLE, you might need to scroll out a little to see it.
Here's the ul:
<div class="row graybackground margin-top-60">
<section id="menuimages" class="margin-top-60">
<ul class="margin-top-60">
<li class="col-md-4 col-sm-6">
<div class="menubg" style="background-image: url({{ URL::asset('img/training/18911510_m.jpg'); }})">
<span>{{ link_to('index/#training', 'TRAINING') }}</span>
</div>
</li>
<li class="col-md-4 col-sm-6">
<div class="menubg" style="background-image: url({{ URL::asset('img/taste/20360155_m.jpg'); }})">
<span>{{ link_to('index/#eat', 'TASTE') }}</span>
</div>
</li>
<li class="col-md-4 col-sm-6">
<div class="menubg" style="background-image: url({{ URL::asset('img/relax/14824877_s.jpg'); }})">
<span>{{ link_to('index/#relax', 'RELAX') }}</span></div>
</li>
</ul>
</section>
</div>
and here the CSS:
.graybackground {
background: rgba(0,0,0,0.15);
padding: 50px;
}
.margin-top-60 {
margin-top:60px;
}
.menubg a {
margin-top:20px;
margin-left: 20px;
display: inline-block;
font-size: 1.7em;
font-weight: bold;
color: #f5f5f5;
background: rgba(0,0,0,0.5);
border-radius: 5px;
padding:2px 4px;
}
.menubg a:hover {
text-decoration: none;
}
No matter where I add margin or padding or whatever, it doesn't move and fit.
I'm using bootstrap 3.
Can someone assist?
The spilling out over 100% of the page is due to the negative margins on .row - and this is important to how bootstrap's nested grid works. Wrapping the whole thing in a .container will correct this for you (it adds padding to the outside to negate the negative margins).
As for the ul being off-center, just do a simple reset on it and its nested lis before you start adding:
http://jsfiddle.net/8b6trqgj/4/
I solved by removing left padding to the ul and adding the same rule as #Brian:
#menuimages ul {
padding-left: 0;
}
.graybackground {
background: rgba(0,0,0,0.15);
padding: 50px;
margin:0;
max-width: 100%;
}
Fiddle
Just add
max-width: 100%;
margin: 0;
to .graybackground
Fiddle

How to make a div overlap other divs?

The contents below the search bar are meant to be shown after the users enter some text. Currently the style is down to what I'm aiming for.
However when I display the search results, it pushes the container following the search bar, as illustrated by my picture:
What can I do that the search results display and just overlap everything below it without pushing other elements downwards?
Here is my HTML:
<div id="search-bar" class="box">
<h1 class="horizontal-header">SEARCH THE DATABASE</h1>
<div id="search-wrapper">
<input name="query" id="name" class="big-search" placeholder="champion, item, spells..." />
<div id="search-results">
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
<a href="#">
<div class="item">
<img src="http://images4.wikia.nocookie.net/__cb20091218194710/leagueoflegends/images/0/0f/JaxSquare.png" alt="" />
<div class="info">
<p class="name">Jax</p>
<p class="description">Champion</p>
</div>
</div>
</a>
</div>
</div>
</div>
And my CSS (written with LESS):
#search-bar {
width: 636px;
height: 35px;
#search-wrapper {
float:left;
margin-left: 13px;
#search-results {
z-index:999;
position:relative;
a {
display:block;
.item:hover {
background-color:#282828;
}
.item {
overflow: hidden;
background-color: #171717;
padding: 2px;
cursor:pointer;
margin-bottom:1px;
img {
float: left;
width: 35px;
}
.info {
float: left;
margin-left: 8px;
.name {
color: white;
margin: 0;
}
.description {
color: white;
margin: 0;
}
}
}
}
}
}
}
Use CSS's Absolute Positioning. Unlike Relative Positioning, Absolute Positioning removes the item from the flow of the document (ie keeping it from pushing other things down.)
Just remember, something that's absolutely positioned is positioned relative to it's nearest positioned parent - so whatever container the absolute positioned items are in (in your case) should be set to position:relative;
Info on all kinds of positioning: http://www.w3schools.com/css/css_positioning.asp
Give position:absolute to your .item DIV. Write like this:
.item {
position:absolute;
}