i just started css & html this week, but i already have a problem with the top-bar.
I don't understand why the elements of my top-bar won't align and be center.
<!--HEADER-->
<!-- LOGIN FORM -->
...
<!-- END OF LOGIN FORM -->
<!-- END OF HEADER -->
I want them to be align and straight, like
[LOGO] [h1] [LOGIN_FORM]
And i might add some buttons in the futur.
(PS: I use Bootstrap 3)
/!\EDIT/!\ :
I fixed some trouble and make my code a bit cleaner, but style doesn't work :(
<body>
<!-- TOP BAR -->
<img src="../images/company-logo.png"/> <h1
id="text-center" style="display:inline"> NetStatus </h1>
<!-- LOGIN FORM -->
....
I just need "NetStatus" to be center
use text-align: center and that will center your text
Related
I am using a bootstrap css theme on my website but in a certain sub section of it I want to only use the plain bootstrap css. Is this possible without resorting to using an iframe?
For clarity this is what I want:
<div> <!-- this is styled by both boostrap and theme css -->
<div> <!-- this as well -->
<div id="subsection"> <!-- this is styled only by bootstrap css -->
</div>
</div>
</div>
I ended up using an iframe and communicating between it and the parent frame with https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API
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.
Im developing this website by using wordpress and the client requested a custom bar( www.orbit.yetu.co.tz ) But once i inserted the image and created a div for it, it automatically generated a white space between itself and the navigation bar.
<body <?php body_class($body_classes); ?>>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Main Container -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="main-container">
<!-- This is a custom bar added by me -->
<div id="main-topbar">
<img src="http://orbit.yetu.co.tz/wp-content/uploads/2014/12/top-bar-new.jpg" alt="Orbit Securities" style="margin-left:auto;margin-right:auto;width:1180px;height:90px">
</div>
<!--This is the end of the top bar -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Top Bar - Set "white" or "dark" below -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<div class="header <?php echo $basix_options['top_bar_style'] ?><?php if ($basix_options['fixed_header'] != FALSE) { ?> sticky<?php } ?>">
<div class="topbar content-width">
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<!-- Logo -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
What am i doing wrong?
Add display: inline-block to the <img>
I check your code, and first of all, i would suggest to add a class to the image, to better handle with CSS.
To fix the error, apply the display: block; property to it, to get rid of the line-height, in fact images by default are defined as inline elements so they follow text rules.
See here a live example of the difference between inline and block property apply to images.
And have a look here to better understand the theory behind the difference.
I am encountering a weird issue, only in Chrome, which adds extra space on top of an element with float: right, only upon resize (notice how the name then appears under the header fold):
Only when I resize back to the desktop media query do I encounter this issue.
My HTML is like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<div class = "client">...</div> <!-- float: right -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
</header>
See the name "Michael"? It appears to the right, properly positioned in the main navigation. But once the browser resizes, at the end, it is moved to the bottom.
Any idea what's causing this and how I can fix it? I have verified that this occurs with the latest version of Chrome on Windows and Mac.
Switch positions between "client" and "navigation" like this:
<header role="banner">
<a class = "logo"...>...</a> <!-- inline-block -->
<nav role = "navigation">...</nav> <!-- display: inline-block -->
<div class = "client">...</div> <!-- float: right -->
</header>
The problem is that the navigation menu was floating around your "client" container. The elements after the floating element will flow around it when they are close.