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.
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 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
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.
I am using bootstrap and want a full width div to go 100% height on a background image. I can't figure out why its collapsing to just the line height. Any ideas? See fiddle:
http://jsfiddle.net/aartese/3kRVm/
<body>
<row><!--landing section -->
<div class="col-md-12 landing">Landing</div>
</row> <!-- /landing section -->
<row><!--about section -->
<div class="col-md-12 about">About</div>
</row><!-- /about section -->
<row><!-- professional profile section -->
<div class="col-md-12 professional">Professional</div>
</row><!-- /professional profile section -->
<row> <!-- contact section -->
<div class="col-md-12 contact">Contact</div>
</row> <!-- /contact section -->
</body>
Is that what you meant? The basic concept is copied from Ryan Fait's sticky footer. It basically revolves around ensuring that all the parent elements' min-height and height are 100%
I want to inject HTML (for advertisement) to every http request to my server. I want the advertisement to be on top of the web page.
The only problem is sometimes in the original website, there is a 'div' with a fixed position, making it overlap with the advertisement.
Example:
<html>
<head></head>
<body>
<!-- INJECTED ADVERTISEMENT -->
<div style="position: fixed; top: 0;">
...
</div>
<!-- END OF INJECTED ADVERTISEMENT -->
<!-- ORIGINAL WEBSITE -->
...
<div style="position: fixed; top: 0;">
...
</div>
...
<!-- END OF ORIGINAL WEBSITE -->
</body>
</html
If I use frame, then the problem will be easily solved. The 'div' with fixed position will not be overlapped with the advertisement, but there will be new problem, which is not every website can be contained in a frame, http://google.com for example.
And I want the advertisement's position to be 'fixed' as well, so the advertisement will always be shown.
Is there a good solution to this?
Thanks
You can add these lines
<html>
<head></head>
<body>
<!-- INJECTED ADVERTISEMENT -->
<div style="position: fixed; top: 0; z-index:10000;">
...
</div>
<!-- END OF INJECTED ADVERTISEMENT -->
<!-- ORIGINAL WEBSITE -->
...
<div style="position: fixed; top: 0; z-index:-10;">
...
</div>
...
<!-- END OF ORIGINAL WEBSITE -->
</body>
</html>
This will do the work