Sun, 2019-10-20 18:08
hello
i'm relatively new to putting web sites together, and I've come across a few problems I may need a bit of guidance on, if anyone can be kind enough to help.
I've just started putting a site together for a friend, it is http://www.thesmallbusinessnetwork.net/projects/plumbers/lpwc/index.html
obviously i'm right at the start of the project, but my problem is this:
the image that is being used is in a fixed position. as I have a div just above, the 'you're in safe hands div', it is cutting off of the top of the image. I understand why this is happening by default but I wonder if the image can be moved down to see the top of the picture from the outset.
also, when resizing, the left hand side of the image is getting pushed out. is there any way to keep the image completely centred?
also, when I look at the site on a phone, the toggle button kicks in as per expected, but when I turn the phone on its' side, the menu items re-appear and get mixed up.
can anyone help?
Fri, 2020-01-17 12:57
#1
I need to place a left and a
I need to place a left and a privilege fixed picture, and I don't have the foggiest idea why the correct one possibly goes to one side when isn't fixed. This is my code:
// this is for if you want to fixed attach image on the left side
my css:
#leftImage{
left: 0;
width: 150px;
height: 100%;
position: fixed;
}
// it is side on the right
#rightImage{
right: 0;
width: 150px;
height: 100%;
position: fixed;
}
Fri, 2020-01-17 19:53
#2
Unable to replicate
You failed to post your html code, so see my minimal test case.
<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <meta content= "width=device-width, height=device-height, initial-scale=1" name="viewport"> <title> Test document </title> <style type="text/css"> /*<![CDATA[*/ body { background-color: white; color: black; font: 100%/1.5 sans-serif; margin: 0; padding: 1em; } p { font-size: 1em; } #wrapper { margin: 0 auto; max-width: 65em; border: 1px dotted black; } h1 { font-family: serif; margin-bottom: 0; text-align: center; } /* end boilerplate */ /* this is for if you want to fixed attach image on the left side my css:*/ img { border: 1px solid red; } #leftImage { left: 0; width: 150px; height: 100%; position: fixed; } /* it is side on the right */ #rightImage{ right: 0; width: 150px; height: 100%; position: fixed; } /*]]>*/ </style> </head> <body> <div id="wrapper"> <h1>Testing Fixed Position Images</h1> <p> <img id="leftImage" src="test1.gif" alt="test image left"> </p> <p> <img id="rightImage" src="test2.gif" alt="test image right"> </p> </div><!-- end wrapper --> </body> </html>
gary