I have facing some problems with my div container. I want to set standard height on my container. If content inside of the div is large scroll bar should show on the side. Here is example of my CODE:
//In this section I have Navigation bar and HTML included.
<section class="settingsBox">
<nav class="xNavigationSetting">
Menu |
</nav>
<div id="htmlSetting">
<cfinclude template="Includes/hmSettings.html">
</div>
</section>
<div id="settingMain" class="settingsBox">
<div id="settingTesting">
<fieldset>
<legend>Testing</legend>
<ul>
<li>
<span id="location">Test Location</span>
</li>
<li>
<span id="reason">Reason</span>
</li>
<li>
<span id="results">Results</span>
</li>
</ul>
</fieldset>
</div>
<div id="settingEquipment">
<fieldset>
<legend>Equipment</legend>
<ul>
<li>
<span id="type">Type</span>
</li>
</ul>
</fieldset>
</div>
</div>
<div id="settingTbl">
<div id="containerMaster"></div>
</div>
Here is my CSS:
div.settingsBox {
height: 400px;
overflow-y: scroll;
}
div.settingsBox fieldset {
font-weight: bold;
border: 2px solid #000099;
margin: 10px;
}
div.settingsBox ul li span:hover {
text-decoration: underline;
color: red;
cursor: pointer;
}
div.settingsBox ul {
list-style-image: url('../Images/edit.png');
}
nav.xNavigationSetting {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-top: 2px;
margin-bottom: 5px;
background-color: #c8e2db;
float: left;
border-bottom: 2px solid #000099;
height: 18px;
}
nav.xNavigationSetting a {
color: black;
text-decoration: none;
cursor: pointer;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
}
My settingsBox has height of 400px and overflow-y set to scroll. For some reason all content disappears when I apply this CSS. If anyone knows why or what is wrong in my code structure please let me know. Thank you.
You need to clear float on div.settingsBox. It's currently floated outside of the viewport.
div.settingsBox {
...
clear: both;
}
Related
I am trying to create a dropdown for my navigation in my mobile view. I am having an issue with the anchors overlapping. I attempted to stack them on top of one another by setting the display to block and adding a margin-bottom.
This has not worked as you can see.
html
<div id="brand">
<h1>brand</h1>
<nav>
<div class="fa fa-plus"></div>
<div class="fa fa-cog">
Edit Profile
Dashboard
</div>
<div class="fa fa-sign-out"></div>
<input type="search" id="main-q" name="q" placeholder="Search" data-value="" value="">
</nav>
</div>
css
nav .fa a {
display: none;
}
nav .fa:hover a {
display: block;
position: absolute;
top: 75px;
color: black;
margin-bottom: 1em;
}
#brand {
border-bottom: 1px solid #B2B2B2;
background: white;
color: darkgrey;
padding: 1em;
}
#brand h1 {
margin-bottom: .5em;
float: left;
}
jsfiddle demonstration
What is the solution?
Everything is fine. The main problem was to setting the position: absolute fora. Simply wrap those anchors a in UL li and then set the position for UL.
CSS:
nav .fa .child { /*modified CSS*/
display: none;
border:1px solid red;
}
nav .fa:hover .child { /*modified CSS*/
display: block;
position: absolute;
top: 75px;
color: black;
margin-bottom: 1em;
}
HTML
<div class="fa fa-cog">
<ul class="child"> <!--class child for dropdown-->
<li>Edit Profile</li>
<li>Dashboard</li>
</ul>
</div>
JSFIDDLE
After searching extensively on Stack Overflow, I have not been able to answer what really should be a simple fix: How do I center my navigation bar?
Now, before you mark this as a duplicate, please regard my code and my question.
I am trying to make a navigation bar that looks something like this.
http://computersciencenow.weebly.com/
Where the links are the the middle of the overall bar.
Here is my Nav Bar HTML:
<div id = "navbar">
<header>
<div class="nav">
<ul>
<li id="img" width = "350"><img src="res/shahind.png" alt="Shah Industries" height = "150" width = "350" /></li>
<li class="home"><a class="active" href="#">HOME</a></li>
<li class="tutorials">ABOUT</li>
<li class="about">MISSION</li>
<li class="news">CONTACT</li>
</ul>
</div>
</header>
</div>
And here is the CSS
#import url(http://fonts.googleapis.com/css?family=Maven+Pro:400);
body {
margin: 0;
padding: 0;
background: #ccc;
}
.img{
text-align: left;
}
.nav ul {
list-style: none;
background-color: #444;
padding: 0;
margin: 0;
vertical-align: middle;
overflow: hidden;
}
.nav li {
font-family: 'Maven Pro', sans-serif;
font-size: 1.2em;
line-height: 40px;
height: 40px;
border-bottom: 1px solid #888;
text-align: center;
}
header{
vertical-align:center;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
transition: .3s background-color;
vertical-align: middle;
margin: 0;
}
.nav a:hover {
background-color: #005f5f;
}
.nav a.active {
background-color: #fff;
color: #444;
cursor: pointer;
}
#img{
width:350px;
text-align: left;
cursor: default;
}
#media screen and (min-width: 600px) {
.nav li {
width: 120px;
border-bottom: none;
height: 50px;
line-height: 50px;
font-size: 1.4em;
}
.nav li {
display: inline-block;
margin-right: -4px;
}
Full Code Is Here http://codepen.io/anon/pen/zGojxX
It can be as simple as it - vertical-align: middle;
Here is the simplified demo:
.nav {
list-style: none;
}
.nav li {
display: inline-block;
vertical-align: middle;
}
<div class="nav">
<ul>
<li><img src="//dummyimage.com/100x100" /></li>
<li class="home">HOME</li>
<li class="tutorials">ABOUT</li>
<li class="about">MISSION</li>
<li class="news">CONTACT</li>
</ul>
</div>
If you ever like the way another website works you can always right click and select 'view source' on it. If you do that on the website you want to copy you will see that the rest of the images are not in the list.
Here is the code the other person used. You will see that they have the images in a separate div
<div id='header'>
<div class='header-wrap'>
<div class='logo'>
<span class='wsite-logo'><a href='/'><img src='/uploads/3/9/2/2/39229753/1410676966.png' style='margin-top:1px;max-height:118px;' /></a></span>
</div>
<div class='menu'
<ul class='wsite-menu-default'><li id="active">Home</li><li id='pg551601871401491579'><a href="/our-mission.html" data-membership-required="0" >Our Mission</a></li><li id='pg551272351721461114'><a href="/private-lessons.html" data-membership-required="0" >Private Lessons</a></li><li id='pg661448056549841030'><a href="https://www.youtube.com/user/learnprogrammingCS" data-membership-required="0" target='_blank'>Youtube</a></li><li id='pg927757866254746423'><a href="/become-a-teacher.html" data-membership-required="0" >Become A Teacher</a></li><li id='pg206710261896176825'><a href="/boot-camp-for-dummies.html" data-membership-required="0" >Boot Camp for Dummies</a></li></ul>
</div>
</div>
</div>
I am able to correctly align the menu bar when the browser is not resized. Once i start zooming out , the content in the menu bar comes below , I am currently concentrating on zooming out the menu.
please advice me what must be the problem, and is there any way i can keep the menu items from wrapping .
<body>
<div id="wrapper">
<div id="header">
<div id="logo">CodePlayer </div>
<div id="run_btn"> <button id="run"> Run </button> </div>
<ul id="menu">
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
<li> Result </li>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
CSS
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
background-color: #EDEDED;
height: 40px;
}
#header #logo {
font-weight: bold;
font-family: Helvetica;
font-size: 0.9em;
padding: 10px 10px;
float: left;
}
#header #menu {
width: 220px;
margin: 0 auto;
border: 1px solid grey;
border-radius: 3px;
height: 27px;
position: relative;
top: 5px;
padding-left: 0px;
padding-right: 0px;
}
#header ul li {
float: left;
list-style-type: none;
padding: 5px 10px;
border-right: 1px solid grey;
font-size: 1em;
}
#header ul li:last-child {
border-right: none;
}
#run_btn {
float: right;
padding: 5px 10px 0 0;
}
#run_btn #run {
font-size: 120%;
}
.clear {
clear: both
}
link
It does not work in the responsive layout . so the solution would be wither use the #media-queries or u can use the bootstrap grid layout , where u can put header as a row and giving the 3 columns of size 4 i.e 'col-md-4',
this will keep the code intact with the window resize.
I currently have a navbar that stays relative as I scroll; what I want to do is have the bar span the entire top from left to right (responsive to different screens) with no gaps on either side. Also, when I move my cursor over the bar or click on one of the links it begins shrinking from the right to the left, down to about half of it's original size.
Here is a screenshot of my current navbar: http://prntscr.com/5x02ef
Here is my HTML:
<div id="header">
<div id="navbar">
<ul>
<li>
Me
</li>
<li>
Work
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
And here is my CSS code:
#header {
position: relative;
}
#navbar {
text-align: center;
text-decoration: none;
position: fixed;
top: 10px;
margin-top:1.2%;
}
ul {
position: fixed;
margin: 0px;
height: auto;
}
li {
display: inline;
border: 2px solid rgb(73, 73, 73);
border-left: none;
border-right: none;
border-top:none;
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left:14%;
padding-right:14%;
background-color: #FFFFFF;
}
is this what you want?
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
#navbar {
text-align: center;
text-decoration: none;
}
body{
text-align:center;
}
#header {
position: relative;
text-align:center;
}
ul {
height: auto;
}
li {
display: inline-block;
border: 2px solid rgb(73, 73, 73);
padding-top: 1.562em;
padding-bottom: 1.562em;
padding-left: 6.25em;
padding-right: 6.25em;
border-radius: 5px 5px;
background-color: #FFFFFF;
}
<div id="header">
<div id="navbar">
<ul>
<li>Me
</li>
<li>Work
</li>
<li>Contact
</li>
</ul>
</div>
</div>
fiddle : http://jsfiddle.net/PrakharThakur/ksfqv5bf/embedded/result/
I am having real troubles with trying to align a horizontal menu.So far my menu is looking like
I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu
I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?
My html
<nav class="slide-nav">
<ul class="slider">
<li class="selected">
<div>
<span class="heart"></span>
<div>
Get Started</div>
</div>
</li>
<li>
<div>
<span class="price-tag"></span>
<div>
Get Results</div>
</div>
</li>
<li>
<div>
<span class="star"></span>
<div>
Track & Engage</div>
</div>
</li>
<li>
<div>
<span class="people"></span>
<div>
Features</div>
</div>
</li>
</ul>
</nav>
css
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px;
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
width: 150px;
}
.slider li div
{
line-height: 31px;
}
.slider li div div
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;
}
Here the CSS that u have to change with
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px;
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}
I believe this has been answered in detail here.
Basically you want to have your individual buttons rendered with display:inline-block which would allow for them to be justified. There's a trick however with adding a "dummy" line break to force justification.
I just got rid of the widths, removed margin: 0 auto from .slider and added the ole text-align: center.
Check out a live demo:
http://jsfiddle.net/RJL7J/
Hope this helps.