I am trying to build a nav-bar that stays on top, fixed and in the middle. But if the screen size is large enough some unused space can be used left and right according to my needs and also there's a bit of space in the middle.
Now, if someone resizes the browser window, I need to start stripping off the unused space from the screen and keep only the essential divs of the parent div.
For reference have a look at Facebook's Desktop navbar.
How do I achieve this with html and css?
Also, if someone resizes so much that the objects will be affected anyway, I would want them to just getting cut off the screen without altering their positions.
<html>
<head> <style>
.navbar {
position:fixed;
background: #000;
height: 30px;
width: 100%}
.logo_div{
margin-left:7%;
float:left;
width:32px;
display:inline-block;
height:32px;
}
.search_div {
width: 450px;
display: inline-block;
margin-left:15px;
float:left;
}
#search_box {
width:100%;
border-radius:5px;
border:1px solid #819597;
padding:4px;
border-bottom-right-radius:0px;
border-top-right-radius:0px;
border-right:none;
height:24px;
font-family: Arial;
font-size:16px;
font-weight:lighter;
outline:none;
}
#search_box:focus {
border-right:none;
background-color:#FCFCDA;
}
li {
text-decoration:none;
padding:5px;
padding-bottom:0px;
margin:1px;
margin-top:0px;
list-style:none;
display:inline-block;
}
.menu {
padding:3px;
float:left;
display:inline-block;
padding-left:10px;
}
ul {
margin-top:0px;}
#static_head{
width:1024px;
margin:0 auto;
position:absolute;
text-align:center;
}
.user_controller {
display:inline;
margin:0 auto;
height:100%;
width:auto;
}
</style>
</head>
<body>
<div class="container">
<div class="navbar" id="dHeaderfixed">
<div id="static_head">
<div id="logo_div" ></div>
<div class="search_div">
<form action="search.php" method="get" id="search_form" name="livesearch">
<input type="text" id="search_box" name="query"></form>
</div>
<div class="menu">
a list of things
</div>
<div id="ui_user_control">some stuff</div></div>
</div></div></div>
Now, the blank unused spaces should be in the navbar at the left of the logo div, this will be as long as required according to screen size. Again there will be unused space between the search box and the menu div and another unused space at the right of the menu div, so when the user resizes the browser window, all of those elements stay in the middle,and if resized further, the screen just cuts them out instead of altering their positions. Thanks!
https://jsfiddle.net/xhzxduz2/2/
CSS
nav {
position: fixed;
left: 0;
top: 0;
background: red;
height: 48px;
min-width: 320px;
width: 100%;
}
.content {
max-width: 960px;
margin: 0 auto;
color: white;
background: blue;
height: 100%;
}
HTML
<nav>
<div class='content'>
YOUR MENU HERE
</div>
</nav>
Related
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Vertically align text next to an image?
(26 answers)
Closed 2 years ago.
I am currently working on a navigation bar for my website, and am super new to CSS and HTML.
I have a header split up into two divs, one for the top half displaying the logo, title, and login page, and another for the navigation buttons. I am running into issues, where my p tag leaves the div that it is inside of, and gets in the way of my navigation buttons. Here is an image of the issue:
[1]: https://i.stack.imgur.com/MoSsk.png
What you are looking at is the inspect element view of a p tag next to an image tag, both within a div.
Here is some html:
header{
background-color: #B71C1C;
color: #FFFFFF;
position:fixed;
top:0;
left:0;
width:100%;
height:150px;
margin-left: 0px;
margin-right: 0px;
}
#bar_logo{
max-height:90px;
max-width:90px;
height:auto;
width:auto;
margin:0;
padding:0;
}
.upper_banner{
width:100%;
height:60%;
margin: 0;
padding: 0;
}
#title_banner{
margin:0;
padding:0;
display: inline;
height:60%;
font-size: 45px;
font-family: Helvetica;
text-align:center;
top: -20;
}
#login{
float: right;
margin:10px;
}
.lower_banner{
width: 100%;
height: 40%;
margin:0;
padding:0;
}
<header>
<div class="upper_banner">
<img id="bar_logo" src="https://picsum.photos/100/100" alt="Title">
<p id="title_banner">
Title of Website
</p>
<a id="login" href="login.html">login</a>
</div>
</header> <!-- added by Rickard -->
I am having some troubles working out this issue, as when I do highlighting over the div "upper_banner" it doesn't highlight past my image on the far right. As you can see, I was attempting to use
top: -20;
in an attempt to move it up 20 px, but no difference. I have a feeling that this issue is because my p tag is starting at a certain point, and because my height is set to a fixed pixel count, it is going down that number of pixels, which leads to it overflowing into the div below.
Apologies for the wicked beginner question, super new to all of this.
Try adding the following in .upper_banner class element's CSS.
display:flex;
justify-content: center;
For more clarity, do search around and study flex boxes and flex alignments. It could help you a lot!
All elements have position: static as default. If you want to move elements around with top or left, you need to change the positioning to relative, absolute or fixed.
Elements align normally at the bottom. If you want a different alignment, you can use vertical-align. It's today better to use display: flex and then control where the elements are with align-items: center or justify-content: center.
You should rarely use float or position: absolute because that makes the elements loose their height, and can mess up the rest of the design.
Inline-elements adjust their width and height to the content, so it doesn't make any sense to give them a height (like your #title_banner).
Here is the code I added, where I target all (*) elements that are children (>) to .upper_banner.
.upper_banner > * {
vertical-align: middle;
}
header{
background-color: #B71C1C;
color: #FFFFFF;
position:fixed;
top:0;
left:0;
right:0;
height:150px;
margin-left: 0px;
margin-right: 0px;
}
#bar_logo{
max-height:90px;
max-width:90px;
height:auto;
width:auto;
margin:0;
padding:0;
}
.upper_banner{
width:100%;
margin: 0;
padding: 0;
}
/* ADDED */
.upper_banner > * {
vertical-align: middle;
}
#title_banner{
margin:0;
padding:0;
display: inline;
font-size: 45px;
font-family: Helvetica;
}
#login{
float: right;
margin:10px;
}
.lower_banner{
width: 100%;
height: 40%;
margin:0;
padding:0;
}
<header>
<div class="upper_banner">
<img id="bar_logo" src="https://picsum.photos/100/100" alt="Title">
<p id="title_banner">
Title of Website
</p>
<a id="login" href="login.html">login</a>
</div>
</header>
Here is an example, where I used flex. Comments are within the code:
header{
background-color: #B71C1C;
color: #FFFFFF;
position:fixed;
top:0;
left:0;
height:150px;
margin-left: 0px;
margin-right: 0px;
/* ADDED */
right: 0;
}
#bar_logo{
max-height:90px;
max-width:90px;
height:auto;
width:auto;
margin:0;
padding:0;
}
.upper_banner{
/*width:100%;*/
margin: 0;
padding: 0;
/* ADDED */
display: flex;
align-items: center;
}
#title_banner{
margin:0;
padding:0;
/*display: inline;*/
font-size: 45px;
font-family: Helvetica;
/* ADDED */
flex: 1 1 auto /* fill up all excessive space, pushing #login to the right */
}
#login{
/*float: right;*/
/*margin:10px;*/
/* ADDED */
padding: 10px; /* margin messes up spacing for flex layout */
align-self: flex-start;
}
/*.lower_banner{
width: 100%;
height: 40%;
margin:0;
padding:0;
}*/
<header>
<div class="upper_banner">
<img id="bar_logo" src="https://picsum.photos/100/100" alt="Title">
<p id="title_banner">
Title of Website
</p>
<a id="login" href="login.html">login</a>
</div>
</header>
On our website, we have a container, with a DIV box inside which leaves a space along the right hand side so we can add some more boxes with images / text.
I got as close as the boxes to the right hand side but underneath the "main" div.
http://jsfiddle.net/Ug5pz/2/
Thanks!
CSS:
#container {
position: relative;
width: 600px;
height: 400px;
margin: 0 auto 0;
background: #FFF;
border-style:solid;
border-width:2px;
}
#main {
position:relative;
width: 450px;
height: 300px;
border-style:solid;
border-width:2px;
}
#sidebox {
position:relative;
width:120px;
height:50px;
float:right;
border-style:solid;
border-width:2px;
}
HTML:
<div id="container">
<div id="main">Welcome to our website!</div>
<div id="sidebox">Sidebox</div>
</div>
Try adding float:Left to the #main CSS
Alternatively you could modify the #sidebox CSS as follows:
position:absolute;
right:0px;
top:0px;
I'm trying to create a fluid element for a site i'm working on, Check out this JS fiddle and make your browser a bit wider, you will see a grey line, a black box, and then a grey line.
When the browser's width is lower the right side line breaks down to the next line, but i want this to stay together no matter how wide the browser is. I generally use float's but have tried a few things, as you can see some css is commented out cause i'm playing with it.
Does anybody have some cool tricks to show me? Any help would be greatly appreciated! Let me know if you need any info.
http://jsfiddle.net/r8Xka/
CSS
header .lower{
overflow:hidden;
width:95%;
margin:40px auto 0 auto;
}
header .lower .line{
/*float:left;*/
display:inline-block;
background:#eaebeb;
width:35%;
height:8px;
/*display:block;*/
position:relative;
top:18px;
}
header .lower a{
/*float:left;*/
display:inline-block;
margin:0 20px;
/*display:block;*/
background: #000;
width: 141px;
height: 42px;
}
HTML
<header data-behavior="randomHeader">
<div class="lower">
<div class="line"></div>
Play Video
<div class="line"></div>
</div>
</header>
You have 3 column: left - fluid, middle - fixed, right - fluid. You would need some js to make it work.
Or some html/css trick like this:
<header data-behavior="randomHeader">
<div class="lower">
<div class="line"></div>
<div class="center">
Play Video
</div>
</div>
</header>
Css:
header .lower{
width:95%;
margin:40px auto 0 auto;
position: relative;
}
header .lower .line{
background:#eaebeb;
height:8px;
}
.center{
text-align: center;
position: absolute;
top: -20px;
left: 0;
width: 100%;
}
header .lower a{
border: 10px solid #FFF;
display:inline-block;
background: #000;
width: 141px;
height: 42px;
}
See working fiddle
When I change the resolution of my navigation bar it glitches. Here is my HTML;
<!--Start header-->
<div id="header">
<div id="nav_header">
<ul id="list-nav">
Troll Happy
<li>iPhone Fail</li>
<li>Forever Alone</li>
<li>Rage Comics</li>
<li>Derpina</li>
<li>Okay face</li>
<li>Forums</li>
</ul>
</div>
</div>
<!--End header-->
And my CSS;
#header {
height:66px;
background-color:#000;
position: absolute;
width: 100%;
left:0;
}
#nav_header {
height:50px;
margin-left:100px;
}
ul#list-nav {
list-style:none;
margin:20px;
padding:0;
}
ul#list-nav li {
display:inline;
font-family: Century Gothic, sans-serif;
font-size:13px;
font-weight:bold;
}
ul#list-nav li a {
text-decoration:none;
padding:15px 0;
width:110px;
color:#eee;
float:left;
text-align:center;
border-right:1px solid #353535;
}
You can see what is happening here;
trollhappy.co.uk
As you can see, if you change the resolution the navigation bar goes very glitchy!
Thanks again guys and girls
you just small mistakes, it follows;
u remove the margin-left:100px, insted margin:0px auto; and set width:840px;
#nav_header {
height: 50px;
margin: 0 auto;
width: 840px;
}
ok i understand the misstake, u set the body tag then work perfectly,,,,
body{
margin:-18px 0px 0px 0px;
}
ok friend on small changes do this,u add the min-width:1000px;
#header {
background-color: #000000;
height: 70px;
left: 0;
min-width: 1000px;
position: absolute;
right: 0;
}
Your <li><a> elements are being floated left, which means they'll overspill their container if they can't all fit in a single line because the container is horizontally too small.
For simplicity's sake you'll want to just hide the links rather than implement some nice graceful degradation for smaller screens (just make sure it looks nice with a browser window 960px wide). Just apply the overflow: hidden; style to #nav_header.
Looking at my attached image, I am trying to get the darker rectangle shape, containing an image (with red border), to be aligned at the bottom center of the lighter grey square.
I have tried setting the dark rectangle to position:absolute with a 0px bottom but then I lost my center alignment using margin:0 auto. I've also tried just using a vertical-align:bottom but still won't play ball!!!
What is the CORRECT way of doing this? One thing to bare in mind is that where I have used the sizes 170 x 105, these are actually unknown as they are dynamically produced elements, size is variable.
This is my code so far:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; vertical-align:bottom; }
.item_preview_img_wrap img { margin:0 auto; border:solid 5px #FF0000; }
<div class="gallery_item">
<div class="item_preview">
<div class="item_preview_img_wrap">
<img src="asf.jpg">
</div>
</div>
<div class="item_options">
options
</div>
<div class="item_info_header">
<div class="date">Date</div>
<div class="item">ID</div>
<div class="clear"></div>
</div>
<div class="item_info_main">
<p class="caption">Caption here</p>
<p class="subject"><strong>People:<strong> People here</p>
</div>
</div>
If you want to display image at bottom of light grey box then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; position:relative; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Note: -halfofimagewidth is half of size of your image for example if your image is 100px and border is 5px then it should be -55px
If you want to display image at bottom of dak grey box at center then use CSS below:
.item_preview { width:220px; height:200px; text-align:center; background:#EEE; }
.item_preview_img_wrap { width:170px; height:105px; margin:0 auto; background:#CCC; position: relative; }
.item_preview_img_wrap img { border:solid 5px #FF0000; position: absolute; left: 50%; bottom: 0px margin-left: -halfofimagewidth }
Let me know if you still find any issue
Is the width of the inside box always going to be relative to the outer box? If so you could use a percentage for your left value like so...
http://jsfiddle.net/hcharge/zYprr/
Write like this:
.item_preview_img_wrap {
width:170px;
height:105px;
position:absolute;
left:50%;
margin-left:-85px;
bottom:0;
background:#CCC;
}