• Locked
2 replies [Last post]
Sun, 2019-10-20 18:08
malcster
malcster's picture
Offline
newbie
Last seen: 31 weeks 2 days ago
Timezone: GMT+1
Joined: 2019-10-20
Posts: 1
Points: 2

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?

Top
Tags:
Fri, 2020-01-17 12:57
#1
priyagchaudhary
priyagchaudhary's picture
Offline
newbie
Noida
Last seen: 18 weeks 2 days ago
Noida
Timezone: GMT+5.5
Joined: 2020-01-17
Posts: 2
Points: 2

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

Top
Fri, 2020-01-17 19:53
#2
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 21 hours 22 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9755
Points: 3837

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

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked