Issue with <div> I cannot solve Options

[lovebug]

Hello everyone, I just joined and really need some help if possible

Im just trying to put my website together and have an issue getting a <div> with a background image to display correctly in my navigation bar

my buttons work fine but im trying to display 2 images after the buttons with the 2nd one repeating all the way to the right side of the screen like this

[button] [button] [button] [button] image-fixed image-repeating-to-the-right

there should be no gap between the two images as the first is a tron lightcycle and the 2nd is the lightcycle wall

my website is lovebug.ml and the file for the navigation is navigation.php and the css file used by my site is style.css

the two images are light-cycle-red-50.png and light-cycle-wall-red-50.png located at /images

I've been trying to make this work for probably 4 hours now but I just cant seem to get it right, I either end up with nothing at all or a big mess with one image on top of another and below the buttons, for now ive commented out the 2nd image so at least the light cycle is displayed

Please can you help me with this

Thank you.

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;'>
        
             
            
        </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;
}

[pandy]

Hi!

First I must give you a compliment for the exemplary way you present your problem. URL to page, images and CSS and HTML and CSS here in code boxes too. You almost have me in tears. No joke!

Well, I think it simply is a matter of you adding the below line to your style sheet.

CODE

#lovebug-logo-cycle { background:  url('http://lovebug.ml/images/light-cycle-wall-red-50.png') }

I saw neither #lovebug-logo-cycle or light-cycle-wall-red-50.png mentioned in there. You must have forgotten to add it or deleted it by mistake.

I didn't get if you want the background behind the menu too, i.e. repeating all the way from left to right or only to the right of the little car? If the latter, that requires some thinking. Since the LIs are floated left the DIV the background is for stretches under the floats all the way to the left. Only the inline image is pushed aside. I think it looks nice as it is, but I got the feeling that's not how you want it.

[lovebug]

thanks for your reply pandy

I dont have anything in the css for the cycle and wall graphics as I just havent ever been able to get it to work

html and css isnt really my thing, i do the best i can typing all this stuff into notepad++ and ftp'ing it to test it

I usually try stuff out on the pages first and when it works i move it into the css, but I cannot get this to work at all

Im not trying to display anything behind the navigation buttons , just 2 images after the buttons

the bike first and then the 1 pixel wide wall repeated horizontally until the right side of the page

the two images are in the /image directory I posted earlier and the bike does display just after the buttons but as soon as i try to display the wall after the bike everything is wrecked

I dont think I could ever get this working but thanks again for trying

[lovebug]

They say a picture paints a thousand words so ive made a mockup of what im trying to do

the bike followed by the 1 pixel wide wall repeated horizontally all the way to the right of the screen, the idea being that what ever the size of the browsing window the red wall will run from the bike to the right side of the browser window even when resizing the window



btw my web host doesnt allow hot linking of images so ive duplicated these images onto my raspberry pi home server to be displayed here

This post has been edited by lovebug: Jan 20 2021, 10:32 PM

[lovebug]

I've been randomly trying everything i can think of for hours and it almost works but only if I put text in the div for the wall and it only draws the wall as wide as the text

http://lovebug.ml/test.php

I feel really stressed that I just cant make a simple image repeat to the end of the page

test.php

CODE

<!DOCTYPE html>

<html lang='en'>

    <head>

        <meta charset='UTF-8'>
        <title>LoveBug</title>
        <link rel='stylesheet' href='/style.css' />

    </head>

    <body>

        <div style='width: 100%;' class='navbar'>

            <ul>

                <div style='width: 100%;' 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 id='lovebug-logo' style='width:100%;'>

                        <li><img src='/images/light-cycle-red-50.png'></li>
                        <li><div id='lovebug-logo-wall' style='width: 100%; height: 50px; background-image: url("/images/light-cycle-wall-red-50.png"); background-repeat: repeat-x;'>if i put some text i get a bit of wall :(</div></li>

                    </div>

                </div>

            </ul>

        </div>

        <br>
        <br>
        <br>

        <!-- page content -->
        <div class='main'>

            <div class='slab' id='news'>

                <div>

                    <h1>Welcome to lovebug.ml</h1>

                </div>
    
                <h2>Trying and failing to get this bike wall working :(</h2>
                
                <hr>

                <p><img src='/images/tron.png' width='100%'></p>

            </div>

        </div>
        <!-- end page content -->

    </body>

</html>

This post has been edited by lovebug: Jan 21 2021, 12:42 AM

[pandy]

Ok, I misunderstood. I thought you had a background image there but it didn't work.

I've been randomly trying everything i can think of for hours and it almost works but only if I put text in the div for the wall and it only draws the wall as wide as the text

The reason for that is that you've put it in a LI and you've floated the LIs left. A float auto-shrinks and isn't wider than its content if you don't explicitly set a width.

The CSS I suggested yesterday rendered like this - with the HTML you had yesterday! I think it looks cool with the red streak behind the buttons, but maybe you don't.




I didn't look close at your HTML yesterday since I didn't think it was needed, but I see now that you've done the list all wrong. You can have exactly nothing between UL and LI. They are a unit. Think of lists and tables as thermos bottles. Nothing can go between the elements that make them up, just as there can be nothing between the glass walls in a thermos. Everything must go in a LI or TD, just as the coffee can only be in the innermost glass bottle.

Remove div#navigation altogether. You can use #navigation with UL instead. You don't need to use extra DIV just to hang CSS on more than when there's nothing else you can use.

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='lovebug-logo-cycle'>
      <img src='http://lovebug.ml/images/light-cycle-red-50.png' width="113" height="50" alt="">
   </div>
</div>

But to get this to work you also need to float the UL so it shrink fits. Otherwise it will go all the way to the right and the DIV with the car will be below it. With the below additions you get what's in the screen cap above. Note that this is with what you showed me yesterday.

CODE

#lovebug-logo-cycle { background: url('http://lovebug.ml/images/light-cycle-wall-red-50.png'); }
ul   { float: left }

If you don't like the streak behind the buttons it needs a little more.

[lovebug]

thanks pandy you've been so helpful

One of my random experiments gave exactly that effect of the wall behind everything, Im still trying to avoid that

The closest I got was this almost working page but its a mess, i you click on this you'll see the wal is there behind th4 bike but only if you add some content to the wall lol

I really dont understand whats going on, Im gonna try and study css and get an understanding

This post has been edited by lovebug: Jan 21 2021, 08:32 PM

[pandy]

Well, I got it this far. But there's still a bit of the steak behind the car, but not behind the buttons. Have to think about that. Tomorrow.

CODE

#lovebug-logo-cycle { background: url('http://lovebug.ml/images/light-cycle-wall-red-50.png');
                      margin-left: 18em }
ul   { float: left }

[pandy]

Oh sorry! Is it a cycle? I thought it was a car. A velomobile?

[pandy]

OK, so I couldn't sleep. Taa-taa!

CODE

ul  { float: left }

#lovebug-logo-cycle       { position: relative;
                            margin-left: 22em }
#lovebug-logo-cycle img   { position: absolute;
                            z-index: 100 }
#stripe                   { height: 50px;
                            position: absolute; top: 0; left: 113px; right: 0;
                            background: url('http://lovebug.ml/images/light-cycle-wall-red-50.png') }

Note the change to the HTML also.

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='lovebug-logo-cycle'>    
    <img src='http://lovebug.ml/images/light-cycle-red-50.png' id="cycle">
   <div id="stripe"></div>
   </div>
</div>

I realized you had positioned navbar. Which means we can position other things within it. Which sort of simplifies, but was tricky anyway because the width of the buttons isn't known. So this got messy, but I actually think it's solid. I can explain further if you want. But that will have to wait until tomorrow. 😴🛏

[lovebug]

holy moly I cant thank you enough, sorry for your lack of sleep
I dont know how you did it, simply amazing
thanks pandy

yeah that bike does look like a car, its a light cycle in the style of the original disney tron movie from 1982 light cycle scene

I run 25 armagetron advanced servers on my old raspberry pi, players can play multiplayer 3d light cycles online with various styles of game play, its a lot of fun

i gotta try your code right now thanks

This post has been edited by lovebug: Jan 22 2021, 04:55 AM

[lovebug]

the only thing i changed were the id names but its not correct for some reason, i even changed the names back but same thing. i checked it a few times and I cant see any mistakes. I was having this issue before where the wall was displaying under the buttons I have no idea why

this is the closest its ever been, i wonder if something else in the style.css is messing with it ?

[lovebug]

ah ! i fixed it

CODE

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

thank you so much, you've been so helpful

Can I add this site to my websites page where im creating a list of great websites ?

This post has been edited by lovebug: Jan 22 2021, 05:19 AM

[pandy]

You are welcome. Link here, you mean? Of course, no need to ask.

Do you get what I did? So you can change it if you want to further on.

[pandy]

yeah that bike does look like a car, its a light cycle in the style of the original disney tron movie from 1982 light cycle scene

I've heard of Tron but didn't know what it was about really. Those light cycles look like velomobiles. This, for instance (that I wouldn't mind if Santa brought me...).
https://www.katanga.eu/

You should get one! Then you could pretend you were in a light cycle. Would probably feel like it too. They are very fast.

I run 25 armagetron advanced servers on my old raspberry pi, players can play multiplayer 3d light cycles online with various styles of game play, its a lot of fun

Wow, sounds fun! I've looked at rasberry, but I don't get enough to know what I could do with it.

[lovebug]

I see what you mean about those velomobiles

the original 1982 tron movie was about a guy (flynn) that used to work for a firm as a programmer and at night he used to stay late and write computer games, another programmer stole his work and submitted it to the firm as his own, became ceo and got flynn fired

so fylnn breaks in one night to try and find traces of his stuff to prove he was the original programmer, the main computer server detects his intrusion and stops him by digitizing him with a laser and sends him into the computer memory where he is forced to play video games for real to the death

sounds mad but its quite a good movie actually and i highly recommend the original 1982 version, the newer tron 2 movie from 2010 was ok but the original is far superior


the raspberry pi is a neat little computer that runs linux os from a micro sd card you can use it as a desktop computer as is but it also has a lot of input /output connections so if you need to monitor or control devices in the world you can write your own programs to read these inputs or send control signals on the outputs

the latest version even has 2 x 4k hdmi outputs ! and theres a version called pi 400 thats built inside a keyboard so theres no messy wires and stuff to look at, just plugin the hdmi and the power cord

great fun

oh I didnt fully understand what you did maybe 1/2 of it but im gonna study it, thanks ever so much

im gonna add your site to my website list right now

This post has been edited by lovebug: Jan 22 2021, 11:59 AM

[lovebug]

ive added this site to the websites page, thanks

I just had a major panic, I use firefox as a rule but I thought lets see my site in google chrome and boom the bike is all messed up

then I realised that it was old page from the cache its all good phew

thanks again

[pandy]

I just had a major panic, I use firefox as a rule but I thought lets see my site in google chrome and boom the bike is all messed up

then I realised that it was old page from the cache its all good phew

Thank heavens!

[pandy]

I see what you mean about those velomobiles

the original 1982 tron movie was about a guy (flynn) that used to work for a firm as a programmer and at night he used to stay late and write computer games, another programmer stole his work and submitted it to the firm as his own, became ceo and got flynn fired

so fylnn breaks in one night to try and find traces of his stuff to prove he was the original programmer, the main computer server detects his intrusion and stops him by digitizing him with a laser and sends him into the computer memory where he is forced to play video games for real to the death

sounds mad but its quite a good movie actually and i highly recommend the original 1982 version, the newer tron 2 movie from 2010 was ok but the original is far superior


the raspberry pi is a neat little computer that runs linux os from a micro sd card you can use it as a desktop computer as is but it also has a lot of input /output connections so if you need to monitor or control devices in the world you can write your own programs to read these inputs or send control signals on the outputs

the latest version even has 2 x 4k hdmi outputs ! and theres a version called pi 400 thats built inside a keyboard so theres no messy wires and stuff to look at, just plugin the hdmi and the power cord

great fun

oh I didnt fully understand what you did maybe 1/2 of it but im gonna study it, thanks ever so much

im gonna add your site to my website list right now

Maybe I should see it. Could be educational.

That WAW velomobile can be had with super smart e-assist. Velomobiles feel heavy and slow when you accelerate and when you go uphill - because they are heavy compared to a cycle. But once you get the speed up it takes very little effort to keep them going due to the low air resistance. WAW is equipped with sensors that feel when you are accelerating or going up hill and the motor can be set to help ONLY under those conditions. That means you can go about 500 km without the need to charge the battery while you fly up the hills. Depends on how hilly it is, of course.

I want one!

[lovebug]

That WAW velomobile can be had with super smart e-assist. Velomobiles feel heavy and slow when you accelerate and when you go uphill - because they are heavy compared to a cycle. But once you get the speed up it takes very little effort to keep them going due to the low air resistance. WAW is equipped with sensors that feel when you are accelerating or going up hill and the motor can be set to help ONLY under those conditions. That means you can go about 500 km without the need to charge the battery while you fly up the hills. Depends on how hilly it is, of course.

I want one!

I think I want one too

im slowly getting my site looking the way I like, kind of old skool retro (I like retro), ive rewritten everything so that theres only one main index.php page and that uses php to include the navigation.php and any page thats specified by the links like ?page=websites which I needed because there was so much duplication in all the pages but now they are clean and just have the page content and nothing else as its all handled by index.php

I managed to get cloudflare enabled now so my site is https and no more browser warnings about the site being insecure lol

my free hosting from infinityfree.net doesnt allow hotlinking of images to other sites thats fine but an unexpected bonus of cloudflare is that now I can hotlink images ! which is going to be handly because I was trying to setup something on ebay for a friend that requires some images in the discription section

but even with hotlinking disabled or enabled it was impossible from http because ebay insists images must be from https but now I have https and hotlinking I can continue with helping him so im really happy about that

but I wouldnt have got this far without your help, im very greatful, thank you.

>>>>>> new secure site lol >>>>>>> https://lovebug.ml <<<<<<<<<

This post has been edited by lovebug: Jan 25 2021, 05:44 PM