<div class="span12">
<div class="row">
<div class = "span6"><h1>The big text here</h1></div> <!-- end of span6-->
<div class = "span5 offset1">
<nav class = "navbar">
<div class = "navbar-inner">
<ul class = "nav">
<li>Link1</li><li class="divider-vertical"></li>
<li>Link2</li><li class="divider-vertical"></li>
<li>Link3</li><li class="divider-vertical"></li>
<li>Link4</li><li class="divider-vertical"></li>
<li>Link5</li>
</ul><!-- end of nav -->
</div><!-- end of navbarinner -->
</nav><!-- end of nav -->
</div> <!-- end of span4 -->
</div> <!-- end row -->
</div> <!-- span 12 -->
So thats my navbar and it has five items and i see the extra gap after the link5
currently both the text and the nav bar are in "span12" and "row" and then "The Big text here" is in "span6" and the navbar is in "span5 offset1" i tried using the span4 for navbar but it takes the links to the next line, now what should i do to make my link5 navbar look the same as others ?
It seems that you would need to float your .navbar to the right in order to stop the 100% width and make the element only as big as it's content
jsFiddle: Demo
Please notice in the fiddle on the markup in line 8 where I add the class .pull-right to make the navbar float to the right.
It's also worth to note that the .row class acts like a .span12 so you don't have to wrap your menu in it. Also note that your menu items will eventually stack if the window gets too narrow, but that's topic for another question on how to go about that.
As a little extra advice, you should try to format your code a little bit more so it's easier to read and debug.
Related
I'm tring to make an online game and I've spent quite some time trying to figure out how to do this (I'm using latest bootstrap). I've provided a pic. In it as you can see the "card" displays below and i need it to display below the navbar and on the right of the "stats" section. The server, stats and the card are all divs. I tried using fixed: left; on stats. float: left; on Servers. The card has float: right;
Just pointing out that the nav bar as well as the stats and servers is on a php header page and the card is separate on the main index.php.
If someone can help me fix this that would be amazing, I've spent hours trying to figure this out.
Pic of the game
A <div> take all of the with of the page, you can see that on the navigator's console.
You need to know the diference between block and inline elemenst of html.
<Div> is a block element and <span> is an inline element.
I recommend you read this articles:
https://www.w3schools.com/html/html_blocks.asp
https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements
Another thing: if you wanna to get better your view of your webpage, you only need to learn html5, css3, and javascript. PHP is a lenguage sever and it is for different purpose, like conect to database or make a session.
For each of the Divs, you need to target them with CSS and set their display model to inline, see below
So for example, if you have 2 divs like so;
<div class="myinlinediv" id="content">
Div 1
</div>
<div class="myinlinediv" id="sidebar">
Div 2
</div>
In your CSS you would put
.myinlinediv {
display: inline-block; /*This is the important line*/
background-color: black;
color: white;
padding: 20px;
}
This is an example with your code
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div style="width:20%; display: inline-block;" class="card m1-2 mb-2 mt-2">
<div style="height:2.5em;" class="card-header">
Servers:
</div><!-- end card-header block -->
<div><!-- start list -->
<ul class="d-flex align-items-stretch list-group list-group-flush">
<li class="list-group-item">Username</li>
<li class="list-group-item">IP</li>
<li class="list-group-item">Money</li>
<li class="list-group-item">Attacks</li>
</ul>
</div><!-- end list -->
</div><!-- end card block -->
<div style="width:20%; display: inline-block;" class="card m1-2 mb-2 mt-2">
<div style="height:2.5em;" class="card-header">
Stats
</div> <!-- end card header -->
<div><!-- start list -->
<ul class="d-flex align-items-stretch list-group list-group-flush">
<li class="list-group-item">Username</li>
<li class="list-group-item">IP</li>
<li class="list-group-item">Money</li>
<li class="list-group-item">Attacks</li>
</ul>
</div><!-- end list -->
</div><!-- end card block -->
<div style=" width: 50%; margin-top:10px; display: inline-block;" class="card">
<div class="card-body">
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
This is some text within a card body.
</div><!-- end card body block -->
</div><!-- end div card block -->
In my web application, I have a fixed sidebar in all the pages for the menu. In a particular page, in addition to the fixed sidebar, I created a div in the body of this page and I want to insert another sidebar aligned to the left of this div.
In order to create my general sidebar, I used the class m-aside-left of metronic, but now if I use that class into my new div to create also the new sidebar it overwrites the previous one. What am I doing wrong? Which class do I have to use in the div in order to create this new sidebar?
html of my div
<div class="m-portlet__body">
<div class="m-section">
<!-- BEGIN: Left Aside -->
<div id="m_aside_left" class="m-grid__item left m-aside-left m-aside-left--skin-dark">
<!-- BEGIN: Aside Menu -->
<div id="m_ver_menu" class="m-aside-menu m-aside-menu--skin-dark"
m-menu-vertical="1" m-menu-scrollable="1" m-menu-dropdown-timeout="500" style="position: relative">
<ul class="m-menu__nav m-menu__nav--dropdown-submenu-arrow" id="aside-menu" style="padding-top: 0px">
<div *ngFor="let item of parameterStruct">
<!-- single item -->
<li *ngIf="!item.isSubClass" class="m-menu__item sa-m-menu-item">
<a class="m-menu__link sa-m-menu__link sa-m-menu__link">
<span class="m-menu__link-wrap">
<span class="m-menu__link-text icon-padding sideBar-text"
style="padding-left: 15px; ">{{ item.description |translate }}
</span>
</span>
</a>
</li>
<!-- end single item -->
</div>
</ul>
</div>
<!-- END: Aside Menu -->
</div>
<!-- END: Left Aside -->
</div>
</div>
I think the issue is that, the new sidebar is overlapping with the previous sidebar.
You need to put the html of New sidebar after the div having id "m_ver_menu" is closed or having after its closing tag.
Please add the your HTML code after comment ""
<div class="m-portlet__body">
{{ item.description |translate }}
<!-- Start: Aside Menu 2 -->
<!-- End: Aside Menu 2 -->
</div>
<!-- END: Left Aside -->
Why is the fluid-container overlapping like that, but others don't?
Is that correct, or am I missing something? Looks wrong to me.
<nav class="nav flex-column float-left">
{links}
</nav>
<div class="container-fluid"><!-- overlapping -->
<div class="row"><!-- fine -->
<div class="col"><!-- fine -->
<main role="main"><!-- fine -->
{content}
</main>
</div>
</div>
</div>
https://jsfiddle.net/w3LwwxL7/
Edit: Just for you to know: I want to achieve a static left sidebar/nav with a fixed width (see image). Everything on the right is main content. That's why I didn't used col-1 (nav) and col-11 (main). Hope this helps :-)
Give your sidenav a fixed width and set a padding-left (same amount of sidebar width)
Here is an example:
https://jsfiddle.net/w3LwwxL7/3/
I'm trying to apply a margin to text within a div, to have text centered horizontally and vertically. I'm not sure if there's a better way to do this, as I'm very new to HTML and programming in general.
<!-- begin header -->
<header style="background-color:#8b0000" style="height:50px;">
<!-- frankenstien-ish bootstrap grid within a bootstrap grid -->
<div class="row">
<div class="col-md-6">
<!-- this div is a placeholder div and has no content -->
</div>
<!-- this div contains all of the navigation buttons in their own bootstrap
grid -->
<div class="col-md-6">
<p style="text-align:center;margin">Test Text</p>
<!-- I know the margin has no value right now. Read question -->
</div>
</div>
</header>
<!-- end header -->
When I try to apply a margin to the <p> element, the margin makes the header larger and doesn't affect the <p> element's margin. How can I center an element vertically and horizontally? (The <p> is a test. It will be replaced with a button)
From the comments in your code it's clear that you are trying to create some navigation buttons. I'm not sure about bootstrap but in general I prefer using list items when I build navigation buttons. The reason is its really easy to control, edit and understand the structure.
Coming to your question, flex box are very comfortable to center align contents inside another, but I will not prefer that in this use case instead go with an, <li>or <div> tag - > add the name inside and then set the gaps using padding.
<ul class="navbtn">
<li>button 1 </li>
<li>button 2 </li>
<li>button 3 </li>
</ul>
Now the CSS will be
.navbtn li {
padding : 10px 5px;
}
Play with the values as per your comfort
This will center align the text inside the box.
Using list item will be more conformable than anything else when it comes to adding navigation buttons.
I have two issues that I'm trying to solve with the right side of my nav bar.
1) I'd like to have the nav look like this "Login | Contact"
- Currently there's no divider in between, but when I add the divider line, it doesn't line up after the Login text.
2) When viewing the nav on mobile. The Login link stays in the correct place, but the "Contact" link falls down below the logo. How do I get it to lineup along side of the logo>
Here's my bootply:
http://www.bootply.com/waaBbWFaI1
Here's my HTML:
<!-- Navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="container topnav">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-brand">
<img class="img-responsive" src="https://red.org/wp-content/plugins/a8c-stripe/img/red_logo.png" alt="Red Exchange">
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<ul class="nav navbar-nav navbar-right">
<li>Login|</li>
<li>Contact</li>
</ul>
</div><!-- /.navbar-collapse -->
<!-- /.container -->
</nav>
Well, first of all I think adding the Divider like this
<li>Login|</li>
Seems to be a bad idea..Imagine You need the space that you are using for the list element for the label and it doesnt have any space left..So what it does is basically that it, puts it into the next line..
I would suggest you to do something like .. giving your anchor tag element(better if it would be wrapped around a div) a border to right
Another solution would be:
<li><a class="login" href="#">Login</a></li>
<li>|</li>
<li>Contact</li>
This would put the divider between those elements but not at the right place just check it. To put it into the right place you will have to give each list element following css.
ul {
display: block;
width: 100%;
height: 100% // only if its already around a header
li {
display: inline-block;
width: 15%; // each element gets 15% of the parents width
height: 100;
}
}
Learn CSS, the problem is that without knowing any css you will not be able to have your website, as you wish.
Issue is, that both are block elements login and contact and if you wrap it and there is no place because the font-size is too big and the elements take the whole space, they will automatically wrap..to the next line.
Sorry, i hope you understood my english.