HTML & CSS [ SOLVED ] is a repeating image in a fixed top menu possible ?

lovebug · Jan 21, 2021

Hi, I just joined and I hope you can help me

Im not very good at css and ive been trying to get this to work for 4 days now and I just cant do it

I have a website at http://lovebug.ml with a fixed non scrolling menu at the top and im trying to display 2 images after the navigation buttons
The first (a tron lightcycle)

I can display ok no issues but im trying to display a 2nd image (light cycle wall)

which is 1 pixel wide and would like to repeat this image all the way to the right of the page as shown in this mockup image

The problem im having is that no matter what i try the layout of the navigation bar becomes a mess once I add the 2nd wall image

Is it possible ? I have posted this question in another forum and so far its no been solved

The closest ive gotten is having the red wall across the full width of the page behind the buttons and bike but that looks wrong

I can include my (stripped down index), navigation and css if it helps ?

Thanks

index.php

Code:

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <title>LoveBug - News</title>
        <link rel='stylesheet' href='/style.css' />
    </head>
    <body>
        <!-- navigation menu -->
        <?php include $_SERVER['DOCUMENT_ROOT'] . '/navigation.php';?>
        <!-- end navigation menu -->
        <!-- page content -->
        <div class='main'>
            <div class='slab' id='news'>
                <div>
                    <h1>Welcome to lovebug.ml</h1>
                </div>
                <h2>News</h2>
            </div>
        </div>
        <!-- end page content -->
    </body>
</html>

navigation.php

Code:

<div class='navbar'>
    <ul>
        <div id='navigation'>
            <li><a href='/'>Home</a></li>
            <li><a href='/servers.php'>Servers</a></li>
            <li><a href='/projects.php'>Projects</a><li>
            <li><a href='/websites.php'>Websites</a></li>
        </div>
        <div id='lovebug-logo-cycle'>
            <img src='/images/light-cycle-red-50.png'>
        </div>
<!--
        <div id='lovebug-logo-wall' style='background-image: url("/images/light-cycle-wall-red-50.png"); background-repeat: repeat-x;'>
            &nbsp;
        </div>
-->
    </ul>
</div>
<br>
<br>
<br>

style.css

Code:

/* scrollbar firefox */
*
{
    scrollbar-width: auto;
  scrollbar-color: #00f #000;
}

/* scrollbar chrome safari edge */
::-webkit-scrollbar
{
  width: auto;
}
::-webkit-scrollbar-track
{
  background: #000;
}
::-webkit-scrollbar-thumb
{
  background: #00f;
}

body
{
  background-image: url('/images/grid.png');
  background-repeat: repeat;
  background-attachment: fixed;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 125%;
    color: #ddd;
    margin: 0 auto;
}

hr
{
    border: 1px solid #00f;
}

b
{
    color: #fff;
}

h1
{
  color: #fff;
    border-bottom: 2px solid #f00;
    border-radius: 5px;
}

p, a, ul, table, flex, div
{
  line-height: 1.3;
  color: #ddd;
}

div h1
{
text-align: center;
line-height: 1.5;
}

div.navbar
{
  background-image: url('/images/grid.png');
  background-repeat: repeat;
  background-attachment: fixed;
  margin-bottom: 16px;
  padding: 12px 22px;
  display: inline-block;
  width: 100%;
  position: fixed;
}
  
a
{
    color: #fff;
    font-weight: bold;
    transition: all 600ms;

}

a:hover
{
    color: #f00;
}

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

li
{
    float: left;
}

li a
{
    display: block;
    color: #ddd;
    background: #000;
    text-align: center;
    padding: 8px 14px;
    margin: 5px 5px;
    text-decoration: none;
    border: 2px solid #00f;
  border-radius: 7px;
    transition: all 600ms;
}

li a:hover
{
    background: #f00;
    color: #fff;
  border: 2px solid #00f;
  border-radius: 7px;
}

div.main
{
    display: flex;
    padding: 2px 12px;
}

div.slab
{
    background: #000;
    color: #ddd;
  display: flex 1;
  border: 2px solid #00f;
  border-radius: 7px;
  padding: 5px 24px;
  margin: 15px;
  transition: all 400ms;
  vertical-align: top;
}

/* use for embedding youtube videos */
iframe
{
    border: none;
}

lovebug · Jan 22, 2021

I see at the top of this forum "Don't share a wall of code. All we want is the problem area, the code related to your issue." well I hope i didnt share too much code but not knowing where the problem is I have no idea how I could reduce the amount I have pasted. sorry

Tealk · Jan 22, 2021

remove the overflow hidden:

CSS:

ul
{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

you have a lot of unnecessary stuff in your stylesheet

if you have a live version of the problem, you can save sharing the code.

lovebug · Jan 22, 2021

I made some changes to the style.css and navigation.php and its working now

oh and I did remove that overflow hidden thanks

Tealk · Jan 22, 2021

Ever thought about rebuilding the page according to common standards?

Something like this is a nogo:

lovebug · Jan 22, 2021

yeah I never did like that block of breaks but without it the top of the page content gets cropped off and I could never work out a way to fix it

Im pretty bad at css and html

Tealk · Jan 22, 2021

So an SSL certificate would be nice too, then you don't always get the warning that the website is insecure.

add top: 0; to div.navbar
and add margin-top: 80px; to div.main
then remove the <br>

lovebug · Jan 23, 2021

Tealk said:
So an SSL certificate would be nice too, then you don't always get the warning that the website is insecure.

add top: 0; to div.navbar
and add margin-top: 80px; to div.main
then remove the <br>

wow thanks thats amazing its working nicely
I changed the 80px into 4em because im slowly trying to remove all fixed values but do you think that was a bad idea ?

I would love an ssl certificate but I just couldnt get my head around it

--------------------------------- edit --------------------------------

forget the crazy em's the whole layout is destroyed now, returning everything to px's

Tealk · Jan 23, 2021

lovebug said:
I changed the 80px into 4em because im slowly trying to remove all fixed values but do you think that was a bad idea ?

since your navigation bar is always the same high, this makes no sense at all

Yes its a bad idea, because if you don't want to work with fixed sizes, it's best to use grid

CSS Grid Layout

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Malcolm · Jan 23, 2021

Hi @lovebug,

I see that you have edited the title of this thread to "Solved", could you mark which solved your question by clicking the check-mark to the right of the post?

lovebug · Jan 23, 2021

I tried clicking the check mark of my post #4 but i didnt see anything change

Malcolm · Jan 23, 2021

lovebug said:
I tried clicking the check mark of my post #4 but i didnt see anything change

Strange... Could you point out what post it was?

lovebug · Jan 23, 2021

it was this one

Malcolm · Jan 23, 2021

lovebug said:
it was this one
View attachment 707

Could you include the code that was used to solve this? It will help anyone who has a similar issue that comes along.

lovebug · Jan 23, 2021

sure thing

I changed navigation.php to this

Code:

<div class='navbar'>

    <ul id='navigation'>

        <li><a href='/'>Home</a></li>
        <li><a href='/servers.php'>Servers</a></li>
        <li><a href='/projects.php'>Projects</a><li>
        <li><a href='/websites.php'>Websites</a></li>

    </ul>
  
    <div id='logo-cycle'>  
            <img src='/images/logo-light-cycle-red-50.png'>
            <div id='logo-wall'></div>
   </div>

</div>

and added this to the style.css (the left: 113px in #logo-wall is the width of the cycle image)

Code:

#logo-cycle
{
    position: relative;
    margin-left: 22em;
}

#logo-cycle img
{
    position: absolute;
  z-index: 100;
}

#logo-wall
{
    height: 50px;
    position: absolute;
    top: 0;
    left: 113px;
    right: 0;
    background: url('/images/logo-light-cycle-wall-red-50.png')

lovebug · Feb 2, 2021

well I just threw out that code as it only worked with the current navigation menu layout but adding or removing a menu item meant repositioning the wall

this is a better solution

[CODE lang="html" title="navigation.php"]<div class='navbar'>

<ul id='navigation'>

<li><a href='/'>Home</a></li>
<li><a href='/?page=servers'>Servers</a></li>
<li><a href='/?page=projects'>Projects</a><li>
<li><a href='/?page=websites'>Websites</a></li>

</ul>

<div style="overflow: hidden; white-space: nowrap;">
<img style='float: left;' src='/images/logo-light-cycle-red-50.png' />
<img style='width: 100%; height: 50px;' src='/images/logo-light-cycle-wall-red-50.png' />
</div>

</div>
[/CODE]

oh and the new safer index.php that checks for valid pages

[CODE lang="html" title="index.php"]<?php
// redirect browser to secure site https://lovebug.ml if trying to browse insecure site http://lovebug.epizy.com
if(strpos($_SERVER['SERVER_NAME'], 'lovebug.epizy.com') !== false)
{
header('Location: https://lovebug.ml/', true, 301);
exit();
}
?>

<?php
// check for valid pages and select page and title
switch($_GET['page'])
{
case 'servers':
$page = 'servers';
$title = 'Servers';
break;

case 'projects':
$page = 'projects';
$title = 'Projects';
break;

case 'project-z80-disassembler':
$page = 'project-z80-disassembler';
$title = 'Project Z80 Disassembler';
break;

case 'project-ladybug':
$page = 'project-ladybug';
$title = 'Project Lady Bug';
break;

case 'websites':
$page = 'websites';
$title = 'Websites';
break;

case '400':
$page = '400';
$title = '400';
break;

case '401':
$page = '401';
$title = '401';
break;

case '403':
$page = '403';
$title = '403';
break;

case '404':
$page = '404';
$title = '404';
break;

case '500':
$page = '500';
$title = '500';
break;

case '503':
$page = '503';
$title = '503';
break;

case 'test':
$page = 'test';
$title = 'Test';
break;

case 'blank-template':
$page = 'blank-template';
$title = 'Blank Template';
break;

default:
$page = 'news';
$title = 'News';
}

?>

<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset='UTF-8'>
<title>LoveBug - <?php echo $title; ?></title>
<link rel='icon' type='image/png' href='/images/favicon-mushroom-48.png' />
<link rel='stylesheet' href='/lovebug.css' />

</head>

<body>


<?php include $_SERVER['DOCUMENT_ROOT'] . '/navigation.php'; ?>



<?php include $_SERVER['DOCUMENT_ROOT'] . '/' . $page . '.php'; ?>


</body>

</html>
[/CODE]

Welcome!

HTML & CSS [ SOLVED ] is a repeating image in a fixed top menu possible ?

Active Coder

Active Coder

Platinum Coder

Active Coder

Platinum Coder

Active Coder

Platinum Coder

Active Coder

Platinum Coder

Administrator

Active Coder

Administrator

Active Coder

Administrator

Active Coder

Active Coder

Log in

Share this page

Buy us a coffee!

About Us

Site links

Stay Connected

We value your privacy