Not Solved Can't align image in navbar
#1
Not Solved
Hello so im trying to add the following to my naviagtion

html code:
<div class="navigation">
<a href="{$mybb->settings['bburl']}/index.php"><span id="home_bit"><i class="fa fa-home"></i></span></a><span>{$nav}{$activesep}{$activebit}</span>
<a href="https//csgoboost.dk" style="background-image:url(https//spinx4k.dk/csgoboost.png); float: left;">CSGOBoost.dk</a>
</div>


CSS Code:
.navigation {
background: #FEFEFE;
color: #000;
padding: 17px 0px;
border-bottom: 3px solid #2980b9;
font-family: Open Sans;
font-size: 15px;
border-radius: 2px;
}


i want to add an image + button
but when i add the image to

.naviagtion (css file) it covers the whole nav and not only align on the left side

my question is how do i make it work?

See image attach for perspektive show

   
Reply
#2
Not Solved
1. Try this way and correct the URL of your image
<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk" style="background-image:url(https://spinx4k.dk/csgoboost.png);">CSGOBoost.dk</a></div>
...

1. Your image is very large in size (983x271 pixels). Do you really want to add an image in such dimension? This will deform your whole header navigation for sure.
2. Your should decicde whether the image is displayed or the link-text or both

What about this solution:
<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk"><img src="https://spinx4k.dk/csgoboost.png" width="200" /><br />CSGOBoost.dk</a></div>
...
<div style="clear: both;></div>
</div>

[ExiTuS]
New Forum / MyBB 1.8.26 + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply
#3
Not Solved
(2021-01-23, 08:04 PM)[ExiTuS] Wrote: 1. Try this way and correct the URL of your image
<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk" style="background-image:url(https://spinx4k.dk/csgoboost.png);">CSGOBoost.dk</a></div>
...

1. Your image is very large in size (983x271 pixels). Do you really want to add an image in such dimension? This will deform your whole header navigation for sure.
2. Your should decicde whether the image is displayed or the link-text or both

What about this solution:
<div class="navigation">
<div style="float: right"><a href="https://csgoboost.dk"><img src="https://spinx4k.dk/csgoboost.png" width="200" /><br />CSGOBoost.dk</a></div>
...
<div style="clear: both;></div>
</div>

[ExiTuS]

Very thanks for your reply defently works out

only thing i can't figure out with your second solution it makes the nav-bar go down and get static with the forum post itself

I then tryed using "margin and padding" to get the image more aligen to center because yea take a look at the new attached image Smile    
Reply
#4
Not Solved
This overlapping is caused by the floating element. Therefore you need to claer this floats.
Did you forget to add the "clear: both" element at the end of the navigation section?
<div class="navigation"> /* 1 */
... /* 2 */
<div style="clear: both;></div> /* 3 */
</div> /* 4 */

*1 Begin of navigation section
*2 Your image and all the stuff within navigation/breadcrumbs
*3 This line will clear the floats!!!
*4 End of navigation section

[ExiTuS]
New Forum / MyBB 1.8.26 + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply
#5
Not Solved
(2021-01-23, 11:58 PM)[ExiTuS] Wrote: This overlapping is caused by the floating element. Therefore you need to claer this floats.
Did you forget to add the "clear: both" element at the end of the navigation section?
<div class="navigation"> /* 1 */
... /* 2 */
<div style="clear: both;></div> /* 3 */
</div> /* 4 */

*1 Begin of navigation section
*2 Your image and all the stuff within navigation/breadcrumbs
*3 This line will clear the floats!!!
*4 End of navigation section

[ExiTuS]

Yes i did use
<div style="clear: both;></div>
But did'nt help :/

So far i got this setup + the image isnt showing https://spinx4k.dk/ so i removed the image since the float was way off as showen in the image
Reply
#6
Not Solved
The alternate solution is working well - but it was my mistake to forgot the closing quote sign!
<div style="clear: both;></div> /* wrong */
<div style="clear: both;"></div> /* correct */

[ExiTuS]

PS.
Never just copy and paste any code without have a look at the idiot syntax Smile Smile Smile
New Forum / MyBB 1.8.26 + innovative full-responsive Theme
Live-Escape-Game-Forum
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)